Vuetify深色模式页面刷新后主题颜色显示异常如何解决

• Nuxt SSR/SSG渲染时机差：服务端渲染阶段无法读取客户端本地存储的深色模式配置，默认生成浅色模式的HTML与样式。mounted是客户端独有的生命周期，此时页面已经完成hydration，Vuetify不会主动全量重绘已生成的样式，仅修改theme.dark属性不会触发根节点样式更新，就会出现主色保留浅色值的问题。手动来回切换两次会强制触发样式重计算，所以可以正常显示。
• 深色模式状态获取时机晚：你当前在mounted中才给this.darkMode赋值并修改主题，此时Vuetify已经完成初始样式注入，修改不会同步到所有已渲染的组件样式上。
• 未绑定根组件dark属性：Vuetify的<v-app>根组件需要主动绑定dark属性才能触发全局样式同步，仅修改$vuetify.theme.dark可能不会触发根节点的样式类更新。

1. 优先在Nuxt客户端插件中初始化主题
   创建仅客户端执行的Vuetify插件，在应用初始化阶段就设置主题，早于组件渲染：

// plugins/vuetify.client.js
export default ({ app }) => {
  // 从本地存储/状态管理中取已保存的深色模式配置
  const savedDarkMode = localStorage.getItem('darkMode') === 'true'
  app.vuetify.theme.dark = savedDarkMode
}

然后在nuxt.config.js中注册插件：

// nuxt.config.js
export default {
  plugins: [
    '~/plugins/vuetify.client.js'
  ],
  // 其余配置
}

2. 给根<v-app>组件绑定dark属性
   在布局文件中，给Vuetify根组件动态绑定dark属性，保证状态变更时全局样式同步更新：

<template>
  <!-- 绑定dark属性代替仅在js中修改theme.dark -->
  <v-app :dark="darkMode">
    <Nuxt />
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      darkMode: false
    }
  },
  // 提前到beforeMount生命周期读取配置，不要等mounted
  beforeMount() {
    this.darkMode = localStorage.getItem('darkMode') === 'true'
  },
  watch: {
    // 监听darkMode变更自动同步到Vuetify主题
    darkMode(newVal) {
      this.$vuetify.theme.dark = newVal
      localStorage.setItem('darkMode', newVal)
    }
  }
}
</script>

3. 特殊情况兼容
   如果以上方案还是生效滞后，可以用$nextTick包裹主题设置逻辑，确保DOM更新完成后再修改配置：

mounted() {
  this.$nextTick(() => {
    this.$vuetify.theme.dark = this.darkMode
  })
}

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