mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 09:50:58 +08:00
6f9d55471b
* docs: add dark mode usage & compile dark/css-vars.css * docs: add example link
1.7 KiB
1.7 KiB
title | lang |
---|---|
Dark Mode | 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 class="dark">
<head></head>
<body></body>
</html>
If you want to toggle it, i recommend useDark | VueUse.
Then, you can quickly enable it with just one line of code to import CSS in your entry.
// 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.
Custom variables
By CSS
Just override it by CSS Vars.
For example, new file styles/dark/css-vars.css
:
html.dark {
/* custom dark bg color */
--el-bg-color: #626aef;
}
Import it after styles of Element Plus:
// 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 to get more info.
// 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,
)
);
// main.ts
import './styles/element/index.scss'
// or just want to import scss?
// import 'element-plus/theme-chalk/src/dark/css-vars.scss'