element plus 暗黑模式通过 css 变量在 html.dark 下批量重置实现，需确保自定义 css 在 dark/css-vars.css 后加载，使用 html.dark { } 作用域，成对调整语义化变量如 --el-bg-color 与 --el-text-color，并通过 document.documentelement 动态设置。
直接覆盖 html.dark 下的 CSS 变量即可生效
Element Plus 的暗黑模式不依赖 JS 逻辑切换样式，而是靠 CSS 变量在 html.dark 作用域下批量重置。只要你在 html 元素上有 dark 类，且后续引入的 CSS 文件里定义了同名 --el-* 变量，就会自动覆盖默认值。
关键点在于：必须确保你的自定义 CSS 在 element-plus/theme-chalk/dark/css-vars.css 之后加载，否则会被覆盖回默认深色值。
- 推荐新建
src/styles/dark/custom.css，内容以html.dark { ... }开头 - 不要写成
.dark { ... }（缺少html前缀会导致优先级不足） - 避免使用
!important—— 正常层叠顺序下，后加载的同名变量自然生效
--el-bg-color、--el-text-color 等核心变量必须成对调整
只改背景色不调文字色，大概率导致文字不可读；只调按钮色不调 hover 色，交互反馈会断裂。Element Plus 的组件样式大量依赖语义化变量组合，比如：
-
--el-bg-color控制页面背景、卡片底色、弹窗遮罩等 -
--el-text-color-primary是主文本色，--el-text-color-regular是次级文本（如 label、placeholder） -
--el-border-color影响输入框边框、分割线、表格边框等 -
--el-fill-color用于 loading、progress、tag 等填充类组件
示例（可直接复制进 custom.css）：
html.dark {
--el-bg-color: #121212;
--el-bg-color-page: #1e1e1e;
--el-text-color-primary: #e0e0e0;
--el-text-color-regular: #9e9e9e;
--el-border-color: #333;
--el-fill-color: #333;
}
用 setProperty 动态改变量时，目标必须是 document.documentElement
如果你在运行时通过 JS 切换主题（比如响应 el-switch），不能对某个 div 或 body 设置变量，必须操作根元素 —— 因为 Element Plus 组件内部读取的是 :root（即 html）下的变量。
- 错误写法：
document.body.style.setProperty('--el-bg-color', '#000') - 正确写法：
document.documentElement.style.setProperty('--el-bg-color', '#000') - 注意：动态设置仅影响当前会话，刷新后丢失；如需持久化，要配合
localStorage存储状态并初始化 class 和变量
SCSS 覆盖方式需注意 @forward 的 with 参数结构
若你项目用 SCSS 构建，想在编译期替换暗色变量，得导入 element-plus/theme-chalk/src/dark/var.scss 并用 @forward ... with 传参。但这个文件里的变量是嵌套 map，不是扁平键值对。
例如修改深色背景色，不能写 $bg-color: #000，而要写：
@forward 'element-plus/theme-chalk/src/dark/var.scss' with (
$bg-color: (
'page': #0a0a0a,
'': #121212,
'overlay': #1d1e1f,
)
);
其中空字符串键 '' 对应 --el-bg-color，'page' 对应 --el-bg-color-page —— 这个映射关系容易被忽略，填错 key 就不会生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
