是否可以在 nuxt.config.js 或通过定义 sass 变量来更改主题默认文本颜色？

Question

我有以下配置的 Nuxt / Vuetify 应用程序 (nuxt.config.js)

vuetify: {
    customVariables: ['~/assets/sass/vuetify.sass'],

    theme: {
      themes: {
        light: {
          primary: '#e85730',          
        }
      }
    }
  }

所以我可以改变原色（例如应用于按钮背景）。我还可以更改 ~/assets/sass/vuetify.sass 中的 Vuetify 变量，例如。

$body-font-family: 'Poppins', sans-serif

但我无法在那里更改主题文本颜色。对于浅色主题颜色编译为 .theme--light.v-application 默认值rgba(0, 0, 0, 0.87)

我可以用 CSS 规则和相同的选择器覆盖它，但我不太喜欢它。我宁愿将主题更改放在一个地方（最好在 Nuxt 配置文件中或至少作为 sass 变量）。甚至有可能吗。

Answer 1

这可以通过 sass 变量$material-light和$material-dark（https://vuetifyjs.com/en/api/vuetify/#sass-variables）进行更改。但对于以下按钮颜色，它将始终使用深色；主要、次要、重音、成功、错误、警告和信息。

$material-light: (
  'text': (
    'primary': 'yellow'
  )
);
$material-dark: (
  'text': (
    'primary': 'blue'
  )
);