wordpress 移除一级菜单石狮seo
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)