页面重新加载后 Vuetify 暗模式颜色错误

Posted 2023-02-23

【中文标题】页面重新加载后 Vuetify 暗模式颜色错误

【英文标题】：Vuetify DarkMode colors wrong after page reload

【发布时间】：2021-11-22 17:49:33

【问题描述】：

我的 Vuetify 应用程序现在可以正确切换到暗模式（万岁！）但是，当发生整页刷新时，样式颜色不会改变（我的原色与亮模式保持一致）

我可以切换到浅色，然后再切换回深色，颜色会正确转换为深色主题的颜色。

网网 到底是怎么回事？从我正在阅读的内容来看，我需要做的就是在应用安装方法中设置 this.$vuetify.theme.dark = true，但它不起作用......

更新 我们使用的是 nuxt 布局，并在 vuetify 主题上设置了 dark = true：

  mounted() 
    console.log('darkMode:', this.darkMode);
    this.$vuetify.theme.dark = this.darkMode;
  ,

【问题讨论】：

你想在刷新后设置默认模式吗？如果你想在刷新后设置默认模式，你需要将darkMode设置为vuex并使用darkMode。因为刷新后，将变量恢复到vuex。

是的，我正在将this.$vuetify.theme.dark = this.darkMode; 设置到我们的 main-layout.vue 组件中，并设置背景和按钮颜色，但是在我切换 this.$vuetify.theme 之前文本颜色不会改变.dark 关闭再打开

【参考方案1】：

做了一些挖掘，发现这是暗模式 vuetify 元数据的一个已知问题： https://github.com/vuetifyjs/vuetify/issues/13378

更新： git hub 问题已关闭，但预期的解决方法对我不起作用。

我最终抛出了半毫秒的 setTimeout 来重置 this.$vuetify.theme.dark = true，因为元代码在应用暗模式的中途再次将其更改为 false。