MUKI AI Summary
在 Vue3 + Vite 專案中，設定亮色與暗色主題可透過 `@media prefers-color-scheme` 偵測系統主題，設定網站顏色。可選值為 light 和 dark。使用 Element Plus v2.2.0 以上版本，搭配 `@vueuse` 切換主題。預設暗色主題可用 `localStorage` 設定，避免每次 build 更新。
使用 TailwindCSS 可自訂主題樣式，透過 `dark:{樣式}` 設定深色模式。若想用 class 控制主題，可修改 TailwindCSS 設定為 `darkMode: 'class'`。這樣可更靈活地管理網站的主題樣式。...
這篇文章是延續前篇 用 Vue3 + Vite + TypeScript + TailwindCSS + ESLint 新增專案 的應用。實際開新專案後，發現自己還想安裝一些工具，先列出預計想要再安裝的東西：
- Vue-i18n
- SASS + CSS Module
- 亮色與暗色主題 (本篇)
根據電腦系統決定深色或暗色
▼ 我們可以使用 @media prefers-color-scheme 偵測使用者電腦的主題，以決定網站的主題顏色
prefers-color-scheme 可選的值為：
lightdark
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}使用 Element Plus 的暗黑主題
我目前公司的其中一個專案使用 Element Plus，所以這邊也拉出來介紹，Element Plus v2.2.0 以上有內建暗黑主題，可以搭配 @vueuse 來設定切換
$ npm i @vueuse/core
import 'element-plus/theme-chalk/dark/css-vars.css'
<template>
<div class="flex justify-center">
<span @click.stop="toggleDark()">暗黑模式</span>
<el-switch size="small" v-model="isDark" />
</div>
</template>
<script setup lang="ts">
import { useDark, useToggle } from '@vueuse/core'
const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>使用以上語法，就能在使用 element 的 switch 套件，切換亮色與暗色主題。
預設為暗色主題，而且不能切換
承上所述，因為不知道如何在 html 裡直接加入 class="dark"，因此我使用 @vueuse 指定預設的佈景主題
useDark 是用 localStorage() 儲存主題，因此在載入網站時，直接將 localStorage() 的 vueuse-color-scheme 設為 dark，然後不開放修改即可
<script setup lang="ts">
import { useDark } from '@vueuse/core'
localStorage.setItem('vueuse-color-scheme', 'dark')
useDark()
</script>搭配 TailwindCSS 做客製化的主題樣式
如果你有使用 TailwindCSS，他預設也是用 @media prefers-color-scheme，取得使用者電腦系統的主題，來設定對應的網站主題。
▼ 在 CSS 裡面設定 dark:{樣式} 客製化樣式
<!-- 在淺色模式下，背景是白色 在深色模式下，背景是黑色 --> <div class="bg-white dark:bg-black">
▼ 如果你不想用 @media 去偵測，而是用像 Element Plus 的方式，透過 class 去控制的話，可以修改 TailwindCSS 的設定
module.exports = {
// 設定為 class，表示透過 class 去控制
darkMode: 'class',
}
4