How to implement dark mode based on vue3 and element-plus

1. Basic use

Because by adding the dark class to the html tag, you can switch by yourself

But in order to facilitate switching and further customization, it is officially recommended to use useDark | VueUse

Example: Below, a dark mode switch component is created based on the element-plus switch component, and it is placed in the menu bar. You can switch modes easily

<script setup>
import { useDark, useToggle } from &#39;@vueuse/core&#39;

const isDark = useDark()
const toggleDark = useToggle(isDark)

</script>

<template>
  <span @click.stop="toggleDark()">暗黑模式</span>
  <el-switch size="small" v-model="isDark"/>
</template>

2. Custom dark styles

In dark mode, once non-dark styles are mixed in, it will be very ugly and dazzling. Some custom-style dark modes Adaptation is indispensable

1. Dark style

element-plus defines some variables in dark mode to meet the dark mode adaptation project of its own style

Styles with colors set in cannot be automatically adapted. We need to manually write a set of dark styles to cover

html.dark {
  .my-dialog {
    background-color: #304156;
    color: #bfcbd9;
  }
}

2. Variable coverage

Some repeatedly used styles can be defined as Variable reuse, so that you can adapt to the dark mode through simple variable coverage

:root {
  --theme-color: #409EFF;
}
html.dark {
  --theme-color: #135fad;
}
.demo-class {background-color:var(--theme-color)}
.demo-class-one button {color:var(--theme-color)}

3. element-plus variable coverage

If you want to change the default dark style of element-plus, you can Define it again and overwrite it. For correct coverage, the following styles need to be introduced after introducing the element-plus style

src/styles/demo.scss:

html.dark {
  /* 覆盖element-plus默认深色背景色 */
  --el-bg-color: #626aef;
  .el-button--primary {
    --el-button-text-color: #ededed;
  }
}

main.js:

import 'element-plus/dist/index.css'
import './styles/demo.scss'

4. scss variables

scss defines variables and introduces them into other styles. Combined with css variables, dark mode adaptation can also be easily realized

src/styles/variables.scss：

$menuBg:var(--menuBg);
$menuActiveText:var(--themeColor);
$btnColor: var(--themeColor);

src/styles/index.scss：

@import './variables.scss';

:root {
  --themeColor: #409EFF;
  --menuBg: #304156;
}
html.dark {
  --themeColor: #46ACFF;
  --menuBg: #263445;
}

main .js:

import './styles/index.scss'

Having said that, if you just use scss variables as css variables, then why not use css variables directly? Moreover, css variables can also be changed using js

3. Pictures in dark mode

One line of code solution found on CodePen Dark mode image filter

In fact, the brightness and saturation of the image are set by using CSS3 filter:

filter: brightness(0.8) saturate(1.25);

In dark mode When displaying pictures, some parts will be brighter and dazzling. You can use CSS filters to set the brightness and saturation of images

In addition to images, you can add the class dark-img-bg or other css selectors to containers that use images as background images

html.dark {
  img,
  .dark-img-bg {filter:brightness(0.8) saturate(1.25)}
}

The above is the detailed content of How to implement dark mode based on vue3 and element-plus. For more information, please follow other related articles on the PHP Chinese website!