基於vue3和element-plus的暗黑模式怎麼實現

一、基本使用

因為是透過在html標籤上新增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);

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

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

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

以上是基於vue3和element-plus的暗黑模式怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！