2022-05-05 19:56:10 +08:00
|
|
|
---
|
|
|
|
|
title: Dark Mode
|
|
|
|
|
lang: en-US
|
|
|
|
|
---
|
|
|
|
|
|
2023-04-09 21:02:49 +08:00
|
|
|
# Dark Mode ^(2.2.0)
|
2022-05-05 19:56:10 +08:00
|
|
|
|
|
|
|
|
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
|
|
|
|
|
<html class="dark">
|
|
|
|
|
<head></head>
|
|
|
|
|
<body></body>
|
|
|
|
|
</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'
|
|
|
|
|
```
|
