So implementieren Sie den Dunkelmodus basierend auf Vue3 und Element-Plus

1. Grundlegende Verwendung

Denn durch Hinzufügen der Klasse dark zum HTML-Tag können Sie selbst wechselndark 类，可以自行实现切换

但为了方便切换以及进一步的定制化，官方推荐使用 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);

Um den Wechsel und die weitere Anpassung zu erleichtern, lautet die offizielle Empfehlung jedoch verwendenDark |. VueUseBeispiel: Unten wird eine Dark-Mode-Switch-Komponente basierend auf der Element-Plus-Switch-Komponente erstellt, indem Sie den Modus ganz einfach wechseln

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

2

Im dunklen Modus ist die Anpassung einiger benutzerdefinierter Stile sehr hässlich und blendend.

Dunkler Stil

element-plus definiert einen dunklen Modus Variablen, um die Anpassung des eigenen Stils an den Dunkelmodus zu ermöglichen. Der im Projekt festgelegte Stil kann nicht automatisch angepasst werden. Wir müssen manuell einen Satz dunkler Stile schreiben, um ihn abzudecken.

2 / h4>🎜Einige wiederholt verwendete Stile können als Variablenwiederverwendung definiert werden, sodass Sie sich durch einfache Variablenabdeckung an den Dunkelmodus anpassen können🎜rrreee

3 Element-plus-Variablenabdeckung

🎜Wenn Sie Änderungen vornehmen möchten Element – ​​plus den standardmäßigen dunklen Stil, der definiert und wieder überschrieben werden kann. Für eine korrekte Abdeckung müssen die folgenden Stile nach der Einführung des Element-Plus-Stils eingeführt werden 🎜🎜src/styles/demo.scss: 🎜rrreee🎜main.js: 🎜rrreee

4. scss-Variablen

🎜scss Definitionsvariablen und in anderen Stilen eingeführt und verwendet. In Kombination mit CSS-Variablen lässt sich auch eine Dark-Mode-Anpassung leicht realisieren 🎜🎜src/styles/variables.scss: 🎜rrreee🎜src/styles/index.scss: 🎜rrreee🎜main.js: 🎜rrreee🎜Abgesehen davon, wenn Sie Verwenden Sie einfach SCSS-Variablen als CSS-Variablen. Warum also nicht CSS-Variablen direkt verwenden? Darüber hinaus können CSS-Variablen auch mit js geändert werden. 🎜🎜3. Bilder im Dunkelmodus Filtergrad: 🎜🎜Filter: Helligkeit (0,8) gesättigt (1,25);🎜🎜🎜Bei der Anzeige von Bildern im dunklen Modus werden einige Teile heller und greller. Sie können CSS-Filter verwenden, um die Helligkeit und Sättigung von Bildern festzulegen🎜🎜Zusätzlich zu Bildern können Sie dem Container, der das Bild als Hintergrundbild verwendet, die Klasse „dark-img-bg“ oder andere CSS-Selektoren hinzufügen🎜rrreee

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Dunkelmodus basierend auf Vue3 und Element-Plus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!