@vueuse/core使用useColorMode实现主题颜色切换

useColorMode 是一个在前端开发中常用的自定义钩子（Hook），尤其在需要支持深色模式和浅色模式切换的场景下。这个钩子可以根据用户的选择或系统设置动态调整页面样式。

一、安装和引入

npm install @vueuse/core  
# 或者  
yarn add @vueuse/core

在需要使用 useColorMode 的组件中，通过以下方式引入：

import { useColorMode } from '@vueuse/core';

二、基本使用

在组件的 setup 方法中使用 useColorMode，并通过解构赋值获取当前系统颜色模式（system）和项目页面设置的颜色模式（store）。

import { useColorMode } from '@vueuse/core';  
  
export default {  
  setup() {  
    const { system, store } = useColorMode();  
  
    // system.value 表示当前系统颜色模式，可能是 'dark' 或 'light'  
    // store.value 表示页面设置的颜色模式，可能是 'dark'、'light' 或 'auto'  
  
    // 使用计算属性动态获取当前应使用的颜色模式  
    const myColorMode = computed(() => store.value === 'auto' ? system.value : store.value);  
  
    // 切换颜色模式的函数  
    const changeTheme = (val) => {  
      store.value = val;  
    };  
  
    return {  
      myColorMode,  
      changeTheme  
    };  
  }  
};

三、使用

在 Vue 模板中，你可以根据 myColorMode 的值来应用不同的 CSS 类或样式，以实现深色模式和浅色模式的切换。

<template>  
  <div :class="{'dark-mode': myColorMode === 'dark', 'light-mode': myColorMode === 'light'}">  
    <!-- 页面内容 -->  
    <button @click="changeTheme('dark')">切换到深色模式</button>  
    <button @click="changeTheme('light')">切换到浅色模式</button>  
    <button @click="changeTheme('auto')">跟随系统</button>  
  </div>  
</template>

 @vueuse/core 的官方文档开始使用 | VueUse 中文网 (nodejs.cn)