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

Posted 2023-02-22

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

【英文标题】：Is it possible to change theme default text color in nuxt.config.js or by defining sass variable?

【发布时间】：2020-09-22 04:23:10

【问题描述】：

我有 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 变量）。有没有可能。

【问题讨论】：

您使用的是哪个版本的 vuetify？

@HardikShah Vuetify 2.3.15

【参考方案1】：

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

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