Nuxt3+ElementPlus暗黑模式闪烁问题

用useDark就会闪烁，还会有各种错误提示。有效解决方案：

本人风格，直接上核心代码。

composables/theme.ts

export const useTheme = () => {
    const theme = useState<string>('theme', () => 'light')
    const cookie = useCookie('theme')
  
    // 服务端同步 cookie 到 state
    if (import.meta.server && cookie.value) {
      theme.value = cookie.value
    }
  
    // 客户端处理类名和持久化
    onMounted(() => {
      if (import.meta.client) {
        watchEffect(() => {
          cookie.value = theme.value
          document.documentElement.classList.toggle('dark', theme.value === 'dark')
        })
        
        // 初始同步一次类名
        document.documentElement.classList.toggle('dark', theme.value === 'dark')
      }
    })
  
    const toggleTheme = () => {
      theme.value = theme.value === 'dark' ? 'light' : 'dark'
    }
  
    return { theme, toggleTheme }
  }

app.vue

import { useTheme } from "../composables/theme";
const { theme } = useTheme();
useHead({
  htmlAttrs: {
    class: computed(() => theme.value),
  },
});

DarkModeSwitch.vue

<template>
  <el-switch v-model="isDark" class="dark-mode-switch"></el-switch>
</template>

<script setup>
import { useTheme } from "../composables/theme";

const { theme, toggleTheme } = useTheme();
const isDark = computed({
  get: () => theme.value === "dark",
  set: () => toggleTheme(),
});
</script>

<style lang="scss" scoped>
// 样式略
</style>