前言

element-plus@2.2.0 已經(jīng)開始支持暗黑模式了

通過在html標(biāo)簽上添加一個(gè)名為 dark 的類來啟用

基于 vue3 & element-plus 的項(xiàng)目現(xiàn)在可以方便的添加暗黑模式

一、基本使用

因?yàn)槭峭ㄟ^在html標(biāo)簽上添加 dark 類，可以自行實(shí)現(xiàn)切換

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

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

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

進(jìn)一步定制化可查閱官方文檔

二、自定義深色樣式

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

1、深色樣式

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

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

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

2、變量覆蓋

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

: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默認(rèn)的深色樣式，可再次定義并覆蓋之。為了正確覆蓋，下述樣式需在引入element-plus樣式后引入

src/styles/demo.scss：

html.dark {
  /* 覆蓋element-plus默認(rèn)深色背景色 */
  --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變量，也可以輕松實(shí)現(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'

話說回來，如果只是當(dāng)作css變量一樣使用scss變量，那為何不直接使用css變量呢？況且，css變量還可以使用js更改之

三、暗黑模式下的圖片

CodePen上發(fā)現(xiàn)的一行代碼的方案 Dark mode image filter

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

filter: brightness(0.8) saturate(1.25);

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

除圖片外，可將以圖片為背景圖的容器加上類 dark-img-bg 或其它c(diǎn)ss選擇器

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

總結(jié)

到此這篇關(guān)于基于vue3&element-plus暗黑模式的文章就介紹到這了,更多相關(guān)vue3 element-plus暗黑模式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論