Comment implémenter le mode sombre basé sur vue3 et element-plus

1. Utilisation de base

Parce qu'en ajoutant la classe dark à la balise html, vous pouvez changer vous-mêmedark 类，可以自行实现切换

但为了方便切换以及进一步的定制化，官方推荐使用 useDark | VueUse

示例：以下，基于 element-plus switch组件 创建了一个暗黑模式开关组件，将它放入菜单栏，就可以方便地切换模式了

<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>

二、自定义深色样式

暗黑模式中，一旦混入非深色样式，就会非常难看刺眼，一些自定义样式的暗黑模式适配是少不了的

1、深色样式

element-plus定义了一些暗黑模式下的变量，满足其自身样式的暗黑模式适配

项目中设定了颜色的样式是无法自动适配的，需要我们手动写一套深色样式来覆盖

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

2、变量覆盖

一些反复使用的样式可以定义成变量重用，这样，就可以通过简单的变量覆盖来适配暗黑模式

: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变量覆盖

如果想更改element-plus默认的深色样式，可再次定义并覆盖之。为了正确覆盖，下述样式需在引入element-plus样式后引入

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变量

scss定义变量，并在其它样式中引入使用。结合css变量，也可以轻松实现暗黑模式的适配

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'

话说回来，如果只是当作css变量一样使用scss变量，那为何不直接使用css变量呢？况且，css变量还可以使用js更改之

三、暗黑模式下的图片

CodePen上发现的一行代码的方案 Dark mode image filter

其实是通过使用 CSS3 filter 设置图片的亮度、饱和度：

filter: brightness(0.8) saturate(1.25);

Mais afin de faciliter la commutation et une personnalisation plus poussée, la recommandation officielle est pour utiliser useDark | VueUse

Exemple : ci-dessous, un composant de commutateur de mode sombre est créé sur la base du composant de commutateur element-plus En le plaçant dans la barre de menu, vous pouvez facilement changer de mode

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

2.

en mode sombre, une fois mélangé avec des styles non sombres, ce sera très moche et éblouissant. L'adaptation en mode sombre de certains styles personnalisés est indispensable🎜

1 Style sombre

🎜element-plus définit un mode sombre. Variable, pour répondre à l'adaptation du mode sombre de son propre style🎜🎜Le style avec la couleur définie dans le projet ne peut pas être automatiquement adapté. Nous devons écrire manuellement un ensemble de styles sombres pour le couvrir🎜rrreee

2. / h4>🎜Certains styles utilisés à plusieurs reprises peuvent être définis comme une réutilisation variable, afin que vous puissiez vous adapter au mode sombre grâce à une simple couverture variable🎜rrreee

3 élément plus couverture variable

🎜Si vous souhaitez changer. element- plus le style sombre par défaut, qui peut être défini et remplacé à nouveau. Pour une couverture correcte, les styles suivants doivent être introduits après l'introduction du style element-plus 🎜🎜src/styles/demo.scss : 🎜rrreee🎜main.js : 🎜rrreee

4 variables scss

🎜scss. variables de définition, et introduites et utilisées dans d'autres styles. Combiné avec des variables CSS, l'adaptation en mode sombre peut également être facilement réalisée 🎜🎜src/styles/variables.scss : 🎜rrreee🎜src/styles/index.scss : 🎜rrreee🎜main.js : 🎜rrreee🎜Cela dit, si vous juste Utilisez simplement les variables scss comme variables CSS, alors pourquoi ne pas utiliser directement les variables CSS ? De plus, les variables CSS peuvent également être modifiées à l'aide de js🎜🎜3. Images en mode sombre🎜

🎜La solution de code en une ligne trouvée sur le filtre d'image en mode sombre CodePen🎜🎜définit en fait la luminosité et la saturation de l'image en utilisant CSS3. degré de filtre : 🎜🎜filtre : luminosité(0,8) saturer(1,25);🎜🎜🎜Lors de l'affichage des images en mode sombre, certaines parties seront plus lumineuses et éblouissantes. Vous pouvez utiliser des filtres CSS pour définir la luminosité et la saturation des images🎜🎜En plus des images, vous pouvez ajouter la classe dark-img-bg ou d'autres sélecteurs CSS au conteneur qui utilise l'image comme image d'arrière-plan🎜rrreee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!