基于vue3和element-plus的暗黑模式如何實現

這篇文章主要介紹“基于vue3和element-plus的暗黑模式如何實現”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“基于vue3和element-plus的暗黑模式如何實現”文章能幫助大家解決問題。

一、基本使用

因為是通過在html標簽上添加 dark 類，可以自行實現切換

但為了方便切換以及進一步的定制化，官方推薦使用 useDark | VueUse

示例：以下，基于 element-plus switch組件 創建了一個暗黑模式開關組件，將它放入菜單欄，就可以方便地切換模式了

<script setup>
import { useDark, useToggle } from '@vueuse/core'

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

在暗黑模式下顯示圖片，部分會比較亮，刺眼。可以使用CSS濾鏡，設置圖片的亮度、飽和度

除圖片外，可將以圖片為背景圖的容器加上類 dark-img-bg 或其它css選擇器

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

關于“基于vue3和element-plus的暗黑模式如何實現”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。