你可以通过调用 useColorMode() 或在模板中直接访问 $colorMode 来使用颜色模式助手。该助手具有以下属性：
preference：实际选择的颜色模式（可以是 'system'），更新它可改变用户偏好的颜色模式value：当 $colorMode === 'system' 时，用于了解检测到的颜色模式，不应修改它unknown：在 SSR 或静态生成时判断是否需要渲染占位符forced：用于判断当前颜色模式是否被当前页面强制设置（用于隐藏颜色选择器）<template>
<div>
<h1>颜色模式: {{ $colorMode.value }}</h1>
<select v-model="$colorMode.preference">
<option value="system">系统</option>
<option value="light">浅色</option>
<option value="dark">深色</option>
<option value="sepia">棕褐色</option>
</select>
</div>
</template>
<script setup>
const colorMode = useColorMode()
console.log(colorMode.preference)
</script>
<style>
body {
background-color: #fff;
color: rgba(0,0,0,0.8);
}
.dark body {
background-color: #091a28;
color: #ebf4f1;
}
.sepia body {
background-color: #f1e7d0;
color: #433422;
}
</style>