Nuxt 3深色模式无法持久化，尝试useCookie未生效求解决方案

你的问题主要出在两个地方：cookie值的类型判断错误，以及没有让useDark直接基于cookie做存储同步，导致SSR初始渲染和客户端状态不匹配。

问题分析 #

1. 类型不匹配：你存到cookie里的是字符串"true"/"false"，但判断时用darkModeCookie.value === true，字符串和布尔值永远不相等，所以初始状态一直被设为false，切换后路由跳转或刷新就会重置。
2. 手动同步时机错误：SSR环境下，服务器渲染阶段需要读取cookie来确定初始模式，但你手动同步的逻辑可能在客户端hydration时才执行，导致服务器渲染的DOM和客户端不一致，出现状态重置。

可行解决方案 #

让useDark直接使用cookie作为存储介质，同时处理好cookie的类型转换，这样useDark会自动负责状态的读写和同步，无需手动处理toggle后的cookie更新：

<script setup>
// 创建cookie实例，配置自动类型转换
const darkModeCookie = useCookie("dark-mode", {
  path: "/",
  sameSite: "lax",
  // 将cookie的字符串值转为布尔值
  parse: (value) => value === "true",
  // 将布尔值转为字符串存入cookie
  serialize: (value) => value ? "true" : "false"
});

// 配置useDark使用cookie作为存储源
const isDark = useDark({
  disableTransition: false,
  storage: {
    getItem: () => darkModeCookie.value,
    setItem: (_, value) => { darkModeCookie.value = value; }
  }
});

// 直接使用useToggle切换，无需额外同步cookie
const toggleDark = useToggle(isDark);
</script>

额外注意事项 #

• 如果使用Nuxt等SSR框架，建议把这段代码放在全局布局组件或插件中，确保所有页面都能共享状态。
• 避免在onMounted等客户端钩子中设置初始状态，要在setup阶段完成，保证服务器渲染的DOM和客户端hydration的DOM完全一致，避免 hydration 警告。

内容的提问来源于stack exchange，提问作者Michael