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

創(chuàng)新互聯(lián)公司從2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元原陽做網(wǎng)站,已為上家服務(wù),為原陽各地企業(yè)和個人服務(wù),聯(lián)系電話:18980820575

一、基本使用

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

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

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

import { useDark, useToggle } from '@vueuse/core'

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

二、自定義深色樣式

暗黑模式中，一旦混入非深色樣式，就會非常難看刺眼，一些自定義樣式的暗黑模式適配是少不了的

1、深色樣式

element-plus定義了一些暗黑模式下的變量，滿足其自身樣式的暗黑模式適配

項目中設(shè)定了顏色的樣式是無法自動適配的，需要我們手動寫一套深色樣式來覆蓋

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

2、變量覆蓋

一些反復(fù)使用的樣式可以定義成變量重用，這樣，就可以通過簡單的變量覆蓋來適配暗黑模式

: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定義變量，并在其它樣式中引入使用。結(jié)合css變量，也可以輕松實現(xiàn)暗黑模式的適配

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上發(fā)現(xiàn)的一行代碼的方案 Dark mode image filter

其實是通過使用 CSS3 filter 設(shè)置圖片的亮度、飽和度：

filter: brightness(0.8) saturate(1.25);

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

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

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

關(guān)于“基于vue3和element-plus的暗黑模式如何實現(xiàn)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。