2.12.0

暗黑模式 2.2.0 ​

经过很长一段时间，Element Plus 终于支持暗黑模式了！

我们提取并统一了所有必要的变量，使其可以基于 CSS 变量来实现。

如何开启？ ​

首先，你可以创建一个开关来切换 html 的 dark 类。

如果你只需要暗黑模式，只需为 html 添加 dark 类。

html
<html class="dark">
  <head></head>
  <body></body>
</html>

如果你想切换它，我推荐使用 useDark | VueUse。

然后，你只需在你的入口文件中导入一行 CSS 代码即可快速启用它。

main.ts
ts
// if you just want to import css
import 'element-plus/theme-chalk/dark/css-vars.css'

如果你需要一个例子，可以参考 element-plus-vite-starter。

自定义变量 ​

通过 CSS ​

只需通过 CSS 变量覆盖它。

例如，新建文件 styles/dark/css-vars.css

css
html.dark {
  /* custom dark bg color */
  --el-bg-color: #626aef;
}

在 Element Plus 的样式之后导入它

main.ts
ts
import 'element-plus/theme-chalk/dark/css-vars.css'
import './styles/dark/css-vars.css'

通过 SCSS ​

如果你使用 SCSS，你也可以导入 SCSS 文件进行编译。

你可以参考主题来获取更多信息。

styles/element/index.scss
scss
/*just override what you need*/
@forward 'element-plus/theme-chalk/src/dark/var.scss' with (
  $bg-color: (
    'page': #0a0a0a,
    '': #626aef,
    'overlay': #1d1e1f,
  )
);
main.ts
ts
import './styles/element/index.scss'

// or just want to import scss?
// import 'element-plus/theme-chalk/src/dark/css-vars.scss'