ElementUI RUOYI 深色适配

  1. 切换按钮:随便找个页面放上去

页面触发逻辑如下

a. html 按钮结构(可自定义)

html 复制代码
 <el-switch
      style="margin-top: 4px; margin-left: 8px; margin-right: 8px"
      v-model="isDark"
      inline-prompt
      active-icon="Moon"
      size="large"
      inactive-icon="Sunny"
      active-color="var(--el-fill-color-dark)"
      inactive-color="var(--el-color-primary)"
      @change="toggleDark"
 />

b. script,vueuse/core 工具库提供了一些操作便利,内部实现了在 HTMl 根元素添加 class="dark"类,和持久化等操作。开发者不用关心实现原理。Element-UI 深色基于vueuse/core,所以能实现完美适配。

javascript 复制代码
import { useDark, useToggle } from "@vueuse/core";

const isDark = useDark();
const toggleDark = () => useToggle(isDark);

c. 安装vueuse/core(若安装则忽略)

javascript 复制代码
npm i @vueuse/core

完成上述步骤 点击按钮即可完成 ElementUI 深色、浅色切换

  1. 若继续对自定义布局进行深色适配

a. 自定义 theme.css(文件位置随意)

css 复制代码
:root {
    --lly-c0:#ffffff;
    --lly-c1:#ffffff;
    --lly-c2:#e6e6e6;
    --lly-c3:#cccccc;
    --lly-c4:#b3b3b3;
    --lly-c5:#999999;
    --lly-c6:#808080;
    --lly-c7:#666666;
    --lly-c8:#4d4d4d;
    --lly-c9:#333333;
    --lly-c10:#1a1a1a;
    --lly-c11:#000000;
    --lly-menu-background: #304156;
}

html,.dark{
    --lly-c0:#0e0e0e;
    --lly-c1:#333333;
    --lly-c2:#333333;
    --lly-c3:#383838;
    --lly-c4:#4d4d4d;
    --lly-c5:#666666;
    --lly-c6:#808080;
    --lly-c7:#999999;
    --lly-c8:#b3b3b3;
    --lly-c9:#cccccc;
    --lly-c10:#e6e6e6;
    --lly-c11:#ffffff;
    --lly-menu-background: #161d27;
}

b. App.vue 或 main.js 中引入,这里只提供 app.vue main.js 引入参照其他 css引入

javascript 复制代码
<style lang="scss">
@import "@/assets/styles/theme.css";
</style>

注意:置于其他 css文件之后

c. 需要适配深色模式的地方使用自定义色系

css 复制代码
.card_box {
  background-color: var(--lly-c2) !important;
}
.card_text span {
  color: var(--lly-c7) !important;
}
相关推荐
庸俗今天不摸鱼31 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下38 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周1 小时前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei2 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码2 小时前
Spring Task 定时任务
java·前端·spring