@nuxtjs/color-mode 的 v4 版本要求 Nuxt 3+，不再支持 Nuxt Bridge。它还引入了若干重大变更以优化模块。
默认的 classSuffix 已被移除。如果你之前依赖默认的 -mode 后缀，需在配置中显式设置：
export default defineNuxtConfig({
colorMode: {
classSuffix: '-mode'
}
})
或者更新你的 CSS 类，去掉后缀：
- .dark-mode { }
- .light-mode { }
+ .dark { }
+ .light { }
该模块不再提供 CommonJS 构建，确保你的项目使用 ESM（Nuxt 3 的默认配置）。
无法再直接设置 colorMode.value，请改用 colorMode.preference：
<script setup>
const colorMode = useColorMode()
- colorMode.value = 'dark'
+ colorMode.preference = 'dark'
</script>
value 属性现在是只读的，反映实际使用的颜色模式（使用系统偏好检测时，可能与 preference 不同）。
hid 选项已废弃的 hid 配置选项已被移除。如果你之前使用了它，直接删除即可：
export default defineNuxtConfig({
colorMode: {
- hid: 'nuxt-color-mode-script',
preference: 'system',
}
})
不再支持 Nuxt Bridge。如果你仍在使用 Nuxt Bridge，建议继续使用 v3。否则请升级到 Nuxt 3+。
@nuxtjs/color-mode 的 v3 版本需要 Nuxt Bridge 或 Nuxt 3+。如果你使用的是不带 Bridge 的 Nuxt 2，建议继续使用 v2。
Nuxt 2 → Nuxt 3+ 之间的主要变化是在页面级别定义颜色模式，使用 definePageMeta：
<template>
<h1>此页面强制使用浅色模式</h1>
</template>
- <script>
- export default {
- colorMode: 'light',
- }
+ <script setup>
+ definePageMeta({
+ colorMode: 'light',
+ })
</script>
definePageMeta，应继续使用组件选项方式的 colorMode。$colorMode helper 保持不变，但新增了组合式函数 (useColorMode)，这是推荐的访问颜色模式信息的方式。
<script setup>
const colorMode = useColorMode()
// 访问属性
console.log(colorMode.preference)
console.log(colorMode.value)
</script>
如果你直接导入颜色模式配置类型，注意名称已改为 ModuleOptions。
// 之前
import type { ColorModeConfig } from '@nuxtjs/color-mode'
// 之后
import type { ModuleOptions } from '@nuxtjs/color-mode'