vue3 및 element-plus를 기반으로 다크 모드를 구현하는 방법

1. 기본 사용법

html 태그에 dark 클래스를 추가하면 직접 전환할 수 있기 때문에 dark 类，可以自行实现切换

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

그러나 전환 및 추가 사용자 정의를 용이하게 하기 위해 공식적인 권장 사항은 다음과 같습니다. useDark | VueUse

예: 아래에서는 요소 플러스 스위치 구성 요소를 기반으로 다크 모드 스위치 구성 요소를 생성합니다. 이를 메뉴 표시줄에 배치하면 모드를 쉽게 전환할 수 있습니다

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

2.

다크 모드에서 다크가 아닌 스타일과 혼합하면 매우 보기 흉하고 눈부시게 됩니다. 일부 사용자 정의 스타일의 다크 모드 적용은 필수입니다.🎜

1 다크 스타일

🎜element-plus는 일부 다크 모드를 정의합니다. 가변, 자신만의 스타일에 맞게 다크 모드 적용🎜🎜프로젝트에 설정된 색상이 있는 스타일은 자동으로 적용할 수 없습니다. 이를 덮으려면 다크 스타일 세트를 수동으로 작성해야 합니다🎜rrreee

2. / h4>🎜일부 반복적으로 사용되는 스타일은 변수 재사용으로 정의할 수 있으므로 간단한 가변 적용을 통해 다크 모드에 적응할 수 있습니다🎜rrreee

3. 요소 + 가변 적용

🎜변경하려는 경우 요소 - 다시 정의하고 재정의할 수 있는 기본 어두운 스타일을 추가합니다. 올바른 적용을 위해서는 요소 플러스 스타일 🎜🎜src/styles/demo.scss: 🎜rrreee🎜main.js: 🎜rrreee

scss 변수

🎜scss를 도입한 후 다음 스타일을 도입해야 합니다. 정의 변수 , 다른 스타일에 도입되어 사용됩니다. CSS 변수와 결합하면 다크 모드 적응도 쉽게 실현될 수 있습니다. 🎜🎜src/styles/variables.scss: 🎜rrreee🎜src/styles/index.scss: 🎜rrreee🎜main.js: 🎜rrreee🎜그렇다면, 그냥 scss 변수를 CSS 변수로 사용하면 되는데 왜 CSS 변수를 직접 사용하지 않는 걸까요? 또한 CSS 변수는 js를 사용하여 변경할 수도 있습니다🎜🎜3. 다크 모드의 그림🎜

🎜CodePen 다크 모드 이미지 필터에 있는 한 줄 코드 솔루션🎜🎜실제로 CSS3를 사용하여 이미지의 밝기와 채도를 설정합니다. 필터 정도: 🎜🎜필터: 밝기(0.8) 채도(1.25);🎜🎜🎜다크 모드에서 사진을 표시하면 일부 부분이 더 밝고 눈부시게 됩니다. CSS 필터를 사용하여 이미지의 밝기와 채도를 설정할 수 있습니다🎜🎜이미지 외에도 이미지를 배경 이미지로 사용하는 컨테이너에 dark-img-bg 클래스 또는 기타 CSS 선택기를 추가할 수 있습니다🎜rrreee

위 내용은 vue3 및 element-plus를 기반으로 다크 모드를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!