Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.1k views
in Technique[技术] by (71.8m points)

vue.js - How To change theme colors on Nuxt/Vuetify starter template

Change colors

I'm trying to use Vue with Nuxt and Vuetify for the styles, on Vuetify exists many templates, one of them brings all.

I tried to add colors on /assets/style/app.styl without effect.

Also on /plugins/vueitfy.js add something like:

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

Without effects, i think that the last way is the best way for do it.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

In Vuetify 2, for example, if you want ro override background colour (nuxt js):

  1. Create .assetsstylevariables.scss
    @import '~vuetify/src/styles/styles.sass';

    $material-light: map-merge($material-light, (
            background: map-get($blue, 'lighten-5'),
            calendar: (background-color: red),
    )
    );
  1. In nuxt.config.js add:
    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
                }
    }

More info:

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

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...