Dark Mode 2.2.0

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'