--- title: Dark Mode lang: en-US --- # Dark Mode After a long time, Element Plus supports dark mode! We extracted and unified all necessary variables to make it possible to implement based on CSS Vars. ## How to enable it? First you can create a switch to toggle `dark` class of html. > If you only need dark mode, just add `dark` class for html. ```html ``` > If you want to toggle it, i recommend [useDark | VueUse](https://vueuse.org/core/useDark/). Then, you can quickly enable it with just one line of code to import CSS in your entry. ```ts // main.ts // if you just want to import css import 'element-plus/theme-chalk/dark/css-vars.css' ``` > If you want an example, you can refer to [element-plus-vite-starter](https://github.com/element-plus/element-plus-vite-starter). ## Custom variables ### By CSS Just override it by CSS Vars. For example, new file `styles/dark/css-vars.css`: ```css html.dark { /* custom dark bg color */ --el-bg-color: #626aef; } ``` Import it after styles of Element Plus: ```ts // main.ts import 'element-plus/theme-chalk/dark/css-vars.css' import './styles/dark/css-vars.css' ``` ### By SCSS If you use scss, you can also import scss file to compile. > You can refer [Theming](./theming.md) to get more info. ```scss // styles/element/index.scss /*just override what you need*/ @forward 'element-plus/theme-chalk/src/dark/var.scss' with ( $bg-color: ( 'page': #0a0a0a, '': #626aef, 'overlay': #1d1e1f, ) ); ``` ```ts // main.ts import './styles/element/index.scss' // or just want to import scss? // import 'element-plus/theme-chalk/src/dark/css-vars.scss' ```