如何解决@nuxtjs/vuetify关闭深色主题失败仍添加theme--dark类问题

配置修正（适配Vuetify 2 + @nuxtjs/vuetify v1.x 稳定版本） #

你当前的配置缺少显式关闭暗色模式的声明，Vuetify默认会检测用户系统的暗色模式偏好，仅配置disable: true未指定dark: false时仍可能触发自动暗色适配，导致theme--dark类被异常添加。修正后的nuxt.config.js配置如下：

buildModules: [
  ['@nuxtjs/vuetify', {
    theme: {
      dark: false, // 显式指定默认使用亮色主题，优先级高于系统检测
      disable: true, // 保留原有禁用主题系统的配置
    },
    treeShake: true,
    defaultAssets: false,
    icons: {
      iconfont: 'md'
    }
  }],
  // 其他原有模块配置
]

补充排查与解决方案 #

• 排查全局代码冲突：检查layouts目录下的布局文件、plugins目录下的全局插件，是否存在手动修改this.$vuetify.theme.dark的逻辑，这类代码会覆盖nuxt.config.js中的静态配置。
• 根组件强制指定亮色：在根布局的<v-app>组件上添加light属性，强制绑定亮色模式，写法为<v-app light>，优先级高于全局配置。
• 高版本适配：如果你使用的是@nuxtjs/vuetify v3.x（对应Vuetify 3），主题配置语法已更新，需改为指定默认主题为亮色：

  buildModules: [
    ['@nuxtjs/vuetify', {
      theme: {
        defaultTheme: 'light'
      },
      // 其他原有配置
    }]
  ]
  

• 兜底强制覆盖：如果以上操作仍不生效，可在全局样式文件中添加样式覆盖异常的暗色主题样式，或手动移除异常类：

  /* 全局样式 */
  .theme--dark {
    color: inherit !important;
    background: inherit !important;
  }
  

  也可以在根布局的生命周期钩子中手动移除异常类：

  mounted() {
    document.querySelector('.v-application')?.classList.remove('theme--dark')
  }
  

内容的提问来源于stack exchange，提问作者Владислав Сердобинцев