如何在Nuxt项目中修改Vuetify暗色主题的默认文本和背景色

问题原因 #

你之前写的body/#app样式未生效，是因为Vuetify自带的.v-application根容器样式优先级更高，覆盖了你的自定义样式。

方案1：通过Sass变量配置（推荐，无兼容性问题） #

你已经在配置中声明了customVariables: ['~/assets/variables.scss']，直接在该文件中覆盖Vuetify内置的暗色主题变量即可：

// assets/variables.scss
$material-dark: map-merge($material-dark, (
  // 自定义暗色模式全局背景色
  'background': #121212,
  // 自定义全局文本色
  'text': (
    'primary': var(--v-info-base),
    'secondary': #bbbbbb,
    'disabled': #888888
  )
));

如果编译时报找不到$material-dark的错误，在文件顶部补充引入：

@import '~vuetify/src/styles/styles.sass';

方案2：全局CSS强制覆盖（实现简单） #

在全局样式文件中使用更高优先级的选择器覆盖默认样式：

1. 新建assets/global.css，写入以下内容：

/* 匹配暗色模式下的Vuetify根容器 */
.v-application.v-application--is-dark {
  background-color: #121212 !important;
  color: var(--v-info-base) !important;
}

2. 在nuxt.config.js中注册全局样式，确保加载顺序在Vuetify样式之后：

export default {
  // 其他原有配置保留
  css: [
    '~/assets/global.css'
  ],
  vuetify: {
    // 你原有的vuetify配置不变
  }
}

两种方案选其一即可，你配置中的customProperties: true已经生效，var(--v-info-base)可以正常调用。

内容的提问来源于stack exchange，提问作者hamid-davodi