【问题标题】:How To change theme colors on Nuxt/Vuetify starter template如何在 Nuxt/Vuetify 入门模板上更改主题颜色
【发布时间】:2018-08-13 11:06:40
【问题描述】:

改变颜色

我正在尝试将 Vue 与 Nuxt 和 Vuetify 一起用于样式,在 Vuetify 上存在许多模板,其中一个提供了所有模板。

我尝试在 /assets/style/app.styl 上添加颜色,但没有效果。

还在 /plugins/vueitfy.js 上添加如下内容:

Vue.use(Vuetify, {
    theme: {
     header: '#48393C',
     footer: '#2f3542'
    }
})

没有效果,我认为最后一种方法是最好的方法。

【问题讨论】:

  • 您是否尝试使用主要而不是页眉.. 我认为这些是预定义的并且可以被覆盖,页眉和页脚您必须在 themeOptions 中声明

标签: vue.js styles vuetify.js


【解决方案1】:

Vuetify 2 中,例如,如果你想 ro 覆盖background colour (nuxt js):

  1. 创建.\assets\style\variables.scss
    @import '~vuetify/src/styles/styles.sass';

    $material-light: map-merge($material-light, (
            background: map-get($blue, 'lighten-5'),
            calendar: (background-color: red),
    )
    );
  1. nuxt.config.js 添加:
    import colors from 'vuetify/lib/util/colors'


    buildModules: ['@nuxtjs/vuetify'],
    vuetify: {
        treeShake: true,
        customVariables: ['~/assets/style/variables.scss']
        theme: {
            options: {customProperties: true},
            themes: {
                light: {
                    primary: colors.blue.lighten5,
                    secondary: colors.amber.darken3,
                    accent: colors.grey.darken3,
                    info: colors.teal.lighten1,
                    warning: colors.amber.base,
                    error: colors.deepOrange.accent4,
                    success: colors.green.accent3
                }
    }

更多信息:

  1. https://vuetifyjs.com/ru/customization/sass-variables

  2. https://vuetifyjs.com/ru/customization/theme

【讨论】:

    【解决方案2】:

    有两个选项可以更改颜色主题 1.来自/plugins/vueitfy.js

        Vue.use(Vuetify, {
      theme: {
        primary: '#2c3e50',
        secondary: '#1abc9c',
        accent: '#2980b9',
        error: '#e74c3c',
        action: '#23DB2A'
      }})
    
    1. 来自 /assets/style/appl.styl,在 vuetify 的要求之前

    $theme := { primary: '#2c3e50', secondary: '#1abc9c', accent: '#2980b9', error: '#e74c3c', action: '#23DB2A' }

    页眉和页脚不能用作颜色主题属性

    【讨论】:

    • > And header and footer won't work as a color theme property 不正确,您可以定义自己的颜色,它们应该可以工作。显然它不会分别自动应用于页眉(即工具栏)和页脚,但您可以在任何接受颜色属性的元素上设置color="header",它会应用您设置的颜色(也 class="header" 将应用自定义颜色)。
    • 请澄清选项 2。我试过了,但它不起作用。 $theme 应该在哪里使用?我的代码如下:// Import Vuetify styling $theme := { primary: '#2c3e50', secondary: '#1abc9c', accent: '#2980b9', error: '#e74c3c', action: '#23DB2A'} @import '~vuetify/src/stylus/main'
    猜你喜欢
    • 1970-01-01
    • 2021-05-18
    • 2021-03-11
    • 2020-12-30
    • 2019-05-11
    • 2020-04-21
    • 2018-09-23
    • 2020-08-29
    • 2020-07-30
    相关资源
    最近更新 更多