2023-11-24
不重新整理網頁，讓 Vue3 強制更新當前路由並重新渲染頁面
Vue
這篇文章是延續前篇 用 Vue3 + Vite + TypeScript + TailwindCSS + ESLint 新增專案 的應用。實際開新專案後，發現自己還想安裝一些工具，先列出預計想要再安裝的東西：
▼ 我們可以使用 @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 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，他預設也是用 @media prefers-color-scheme，取得使用者電腦系統的主題，來設定對應的網站主題。
▼ 在 CSS 裡面設定 dark:{樣式} 客製化樣式
<!-- 在淺色模式下，背景是白色 在深色模式下，背景是黑色 --> <div class="bg-white dark:bg-black">
▼ 如果你不想用 @media 去偵測，而是用像 Element Plus 的方式，透過 class 去控制的話，可以修改 TailwindCSS 的設定
module.exports = {
// 設定為 class，表示透過 class 去控制
darkMode: 'class',
}
1
