vite实现选择深色、浅色、跟随系统设置页面主题的方法

项目框架：vite + js

需求：页面设置深色、浅色、跟随系统，切换不同皮肤(主题)功能

① 如果设置了深色主题，不管电脑系统设置的是深色还是浅色，都是用深色主题；
② 如果设置了浅色主题，不管电脑系统设置的是深色还是浅色，都是用浅色主题；
③ 如果设置了跟随系统，当系统是深色主题时，用深色主题；系统是浅色主题时，用浅色主题。

安装 VueUse 库

在项目中
安装方法：

npm i @vueuse/core

使用方法

在要是用的组件中引入 “useColorMode”,
可以 从 useColorMode() 方法返回的 对象中 ，通过结构赋值，得到系统当前设置的是深色还是浅色主题，以及项目设置的是什么主题（深色、浅色、跟随系统）

system.value - - - 记录的当前电脑系统使用的是深色还是浅色 颜色模式；有两个值：dark、light。dark 是指深色，light 是指浅色。

store.value - - - 记录的是项目页面设置是 深色、浅色、根据系统 颜色模式；有三个值：dark、light、auto。dark 是指深色，light 是指浅色，auto 是指 跟随系统。

import { useColorMode } from '@vueuse/core'

const { system, store } = useColorMode()

system.value // 'dark' | 'light'
store.value // 'dark' | 'light' | 'auto'

// 计算属性，动态获取设置的 主题色模式
const myColorMode = computed(() => store.value === 'auto' ? system.value : store.value)

如果不是设置使用主题的组件中要获取当前使用主题，可以使用如下方法：

import { useColorMode } from '@vueuse/core'

const mode = useColorMode() // Ref<'dark' | 'light'>

小提示：

通过 const mode = useColorMode() 获取页面模式时，
尝试修改过 mode 的值为 auto, 修改后，页面会在修改电脑系统时自动变换主题，但 读取 mode 值的时候，不是 auto，是当前系统设置的颜色模式。
所以，需要设置跟随系统时，使用 ‘const { system, store } = useColorMode()’ 来获取电脑系统设置的颜色模式，以及页面设置的颜色模式，

只是获取页面使用的模式时，可以使用 ‘const mode = useColorMode()’ 来读取使用的颜色模式，展示不同主题效果。

win10查看电脑主题色和修改主题色的方法如下：

找到电脑设置选项 - - -》找到 “个性化”（背景、锁屏、颜色）选项 - - -》找到 “颜色” 选项，
可以查看电脑使用的是浅色还是深色主题色。

查看主题色：

修改主题色：

创建深色、浅色主题样式

VueUse 判断项目使用的是浅色主题色时，会给元素添加 “light” 类名；
使用的是深色主题色时，会给元素添加 “dark” 类名；不会实质性的改变页面样式

实现换肤效果的关键就是 ：页面设置为浅色/深色主题时，使用不同的样式表

所以，需要设置 深色、浅色两套样式，当浅色模式时添加浅色主题样式；深色模式时，添加深色主题样式。

如下：


可以在 main.css 中添加 .lgiht 、.dark 样式表：

.dark {
	--bg-color: #181818;
	--color-text_primary: rgba(255, 255, 255, 0.9);
}

.light {
	--bg-color: #F8F8FA;
	--color-text_primary: rgba(0,0,0,0.9);
}

组件中编写样式时，使用定义好的变量名：

.box {
	background: var(--bg-color);
	color: var(--color-text_primary);

页面中切换不同模式方法

代码示例 ：

<script setup>
import { computed } from 'vue'
import { useColorMode } from '@vueuse/core'

const { system, store } = useColorMode()

// 页面的颜色模式
const mode = computed(() => {
  return store.value == 'auto' ? system.value : store.value
})

// 切换主题
const changeTheme = (val) => {
  store.value = val
}

</script>

<template>

  <ul v-if="showTheme" class="theme-list">
	<li :class="{active: store == 'dark'}" @click="changeTheme('dark')">暗黑模式</li>
	<li :class="{active: store == 'light'}" @click="changeTheme('light')">亮色模式</li>
	<li :class="{active: store == 'auto'}" @click="changeTheme('auto')">跟随系统</li>
  </ul>

</template>

点击切换 深色、浅色模式后，页面就会切换不同主题了，
如果设置成跟随系统模式，当系统设置的是浅色时，就会使用浅色（light）下的样式，呈现浅色主题；
当系统改成深色模式，页面就会自动变成深色（dark）下的样式，呈现深色主题。

根据需求，添加样式变量到 light 、dark 类名下的样式表中。

如果有使用图片，也可以根据页面使用的是深色还是浅色模式，使用相应的图片

例如：

<img v-if="mode == 'light'" src="../../assets/image/logo-light.svg" />
<img v-else src="../../assets/image/logo-dark.svg" />