web-dev-qa-db-ja.com

Nuxt / Vuetifyスターターテンプレートでテーマの色を変更する方法

色を変える

私はスタイルにVueをNuxtとVuetifyで使用しようとしています、Vuetifyには多くのテンプレートが存在し、そのうちの1つがすべてをもたらします。

/assets/style/app.stylに色を追加しようとしましたが、効果はありませんでした。

/plugins/vueitfy.jsにも以下のようなものを追加します：

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

効果がなければ、最後の方法が最良の方法だと思います。

vue.jsstylesvuetify.js
8
Marcos R. Guevara

カラーテーマを変更するには、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' }

ヘッダーとフッターはカラーテーマプロパティとして機能しません

2
amitgur

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

1
Dmitry Kaltovich