新功能，不用写代码，调整页面为暗黑模式，附图！

本文链接：https://blog.csdn.net/u012627861/article/details/146432862

在这里插入图片描述

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%;