时间戳

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

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

问题描述

我有具有以下配置的 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 变量）。有没有可能。

标签： sassvuetify.jsnuxt.js

解决方案

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

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

推荐阅读