程序员们看过来，在线修改页面主题见过没，跟Deepseek没关系!

myzbx 2025-03-29 20:01 9 浏览

Eva v5.1.0开始，前端支持主题设置，我们提供了明亮模式和暗黑模式两种，暗黑模式的实现并没有使前端加重，Eva依然非常好的保持着轻量状态，甚至默认情况下框架是未开启主题的，可以像一个非常单一的项目一样去开发，而不用关注暗黑模式的实现。

启用主题功能

你可以在.env文件中启用主题功能，即可通过系统设置/主题设置自由调整出你喜欢的系统风格！
开启后，可以在主题设置中选择暗黑模式，如下图所示

选择暗黑模式后会自动调整一份默认的暗黑配色，这份配色是我们精心调整的，你也可以根据自己的喜好调整相关参数，例如，我们将其更改为蓝色风格，主题色改为黄色，则可以得到下面的效果：

当然，其它页面的效果也会立即跟进：

在线调整

即使项目已经发布，我们可以直接在生产环境中进行修改，对于开发售卖给第三方的系统再合适不过。如果你愿意，你还可以将logo、系统名称、字体大小等写入主题配置中，将可以很快的实现你想要的效果。

如何兼容？

如果你不考虑根据主题设置的参数来展现页面，那么你可以随意写各种颜色；

如果你需要能适配各种主题参数，那么我们定义了一些CSS变量，使用这些CSS变量，则可以通过主题设置进行动态处理，全部的变量定义在了theme.scss文件中，这里列出开发过程中常用的变量：

// 主色调
--color-primary: #{$--color-primary};
// - 主色调-亮色
--color-primary-light: #{$--color-primary-light};
// - 主色调-暗色
--color-primary-dark: #{$--color-primary-dark};

// 危险色
--color-danger: #{$--color-danger};
--color-danger-hover: #{$--color-danger-hover};

// 基础色
// - 亮色，大范围使用到的颜色，如一个信息模块的背景
--color-light: #fff;
// - 灰色，如提示文字
--color-gray: #999;
// - 深灰色，如标题
--color-gray-deep: #555;

// 主体背景色
--background-color: #f7f7f7;

// 字体颜色
--font-color: #282828;

// 边框颜色
--border-color: #eee;

除此之外，你还可以使用element-plus的内部CSS变量，因为这些变量会根据主题色进行自动计算

--el-color-primary-light-1: 主色调提亮 10%;
--el-color-primary-light-2: 主色调提亮 20%;
--el-color-primary-light-3: 主色调提亮 30%;
--el-color-primary-light-4: 主色调提亮 40%;
--el-color-primary-light-5: 主色调提亮 50%;
--el-color-primary-light-6: 主色调提亮 60%;
--el-color-primary-light-7: 主色调提亮 70%;
--el-color-primary-light-8: 主色调提亮 80%;
--el-color-primary-light-9: 主色调提亮 90%;

--el-color-primary-dark-2: 主色调暗化 20%;

该技术实现来自于开源的Eva权限系统的v5.1.0版本。

Sass 颜色

上一篇：Java开源后台最美可视化面板，程序员:“好东西要尽快收藏”
下一篇：本周纽约最佳街拍造型（纽约街拍2021）

程序员们看过来，在线修改页面主题见过没，跟Deepseek没关系!

启用主题功能

在线调整

如何兼容？

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

用上Vue3，你真的变了吗?（vue3 key）

说下你的vue项目的目录结构，该怎么划分?

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」