Element UI SCSS 变量转 CSS 变量

Trae AI 修改

本项目将 Element UI 的 SCSS 变量转换为 CSS 变量，主要针对颜色相关的变量进行了转换，包括颜色、背景色、边框颜色和阴影等。同时，添加了暗主题支持。

改造内容

创建了 src/common/css-vars.scss 文件，定义了所有颜色相关的 CSS 变量
创建了 src/common/var-css.scss 文件，将原有的 SCSS 变量映射到 CSS 变量
修改了 src/common/var.scss 文件，将颜色相关的 SCSS 变量替换为引用对应的 CSS 变量
创建了 src/common/dark-theme.scss 文件，提供暗主题支持

变量分组

CSS 变量按照以下分组进行了组织：

基础颜色：primary、success、warning、danger、info 等
功能色：白色、黑色等
文本颜色：主要文本、常规文本、次要文本、占位文本等
边框颜色：基础边框、浅色边框、更浅边框、最浅边框等
背景颜色：基础背景等
链接颜色：链接颜色、悬浮颜色等
禁用状态：禁用填充、禁用颜色、禁用边框等
图标：图标颜色等
阴影：基础阴影、深色阴影、浅色阴影等
填充：基础填充等

测试

安装依赖

npm install
# 或
pnpm install
# 或
yarn

编译 SCSS

npm run build

运行测试

npm test

测试脚本会编译 SCSS 文件，并验证生成的 CSS 中是否包含 CSS 变量，以及颜色相关属性是否使用了 CSS 变量。

暗主题使用

基础使用

要使用暗主题，只需要导入暗主题文件：

// 导入基础样式
@import 'element-ui-scss/src/common/index.scss';

// 导入暗主题
@import 'element-ui-scss/src/common/dark-theme.scss';

然后，在 HTML 或 body 元素上添加 el-theme-dark 类名：

<html class="el-theme-dark">
  <!-- 或 -->
<body class="el-theme-dark">

在组件中使用暗主题

你可以使用提供的 mixin 在组件中添加暗主题特定样式：

.custom-component {
  background-color: var(--el-background-color-base);
  color: var(--el-color-text-primary);
  
  // 使用 mixin 添加暗主题特定样式
  @include dark-theme {
    // 这些样式只会在 .el-theme-dark 存在时应用
    border: 1px solid var(--el-border-color-base);
    box-shadow: var(--el-box-shadow-dark);
  }
}

动态切换主题

你可以使用 JavaScript 动态切换主题：

// 切换暗主题
document.documentElement.classList.toggle('el-theme-dark');

// 启用暗主题
document.documentElement.classList.add('el-theme-dark');

// 禁用暗主题
document.documentElement.classList.remove('el-theme-dark');

查看示例

项目提供了一些示例来展示如何使用 Element UI SCSS，特别是暗主题功能：

# 编译 SCSS 文件
npm run build

# 然后在浏览器中打开示例页面
open examples/index.html

示例包括：

examples/index.html：示例入口页面
examples/dark-theme.html：暗主题示例，展示如何使用和切换暗主题

编译完成后，可以在浏览器中打开 test.html 文件查看效果。页面上提供了三个主题切换按钮，可以测试 CSS 变量的动态切换效果。

优势

使用 CSS 变量替代 SCSS 变量的主要优势：

运行时可修改：CSS 变量可以在运行时通过 JavaScript 动态修改，实现主题切换功能
继承性：CSS 变量具有继承性，可以在不同的组件**享
减少编译体积：避免了 SCSS 变量在每个使用处的复制，减少了编译后的 CSS 体积
更好的调试体验：在浏览器开发工具中可以直接查看和修改 CSS 变量

satrong / elementui-scss