2.11.1

深色模式 2.2.0 ​

经过漫长的等待，Element Plus 终于支持深色模式了！

我们提取并统一了所有必要的变量，以便能够基于 CSS 变量来实现它。

如何开启？ ​

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

如果您只需要深色模式，只需为 html 添加 dark class。

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'