nuxtjs+vuetifyjsのThemaのカラー及び背景色を変更する

はじめに

• 前回、vuetifyjsのインストールしたので、vuetifyjsで色々と設定を変更してみる。 px-wing.hatenablog.com

• 下記のページを参考に自分のローカル環境で試してみる vuetifyjs.com

設定

• assets/variables.scssというファイルを作成して下記のコードを記述する。下記はbodyの背景を変更するための設定です。背景色を変更する必要がなければいらないです。

@import '~vuetify/src/styles/styles.sass';

$material-light: map-merge($material-light, (
  'background': var(--v-background-base, map-get($material-light, 'background')) !important,
));
$material-dark: map-merge($material-dark, (
  'background': var(--v-background-base, map-get($material-dark, 'background')) !important,
));

• nuxt.config.jsファイルに下記の記述を追記する.primary、secondaryのボタンを任意の色に設定することができる

  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    treeShake: true,
    theme: {
      options: {
        customProperties: true
      },
      light: true,
      themes: {
        light: {
          background: '#d0f0c0',
          primary: '#00ced1',
          secondary: '#f08080',
          accent: '#9370db',
          error: '#2f4f4f',    
        }
      }
    }
  }

nuxt pageのコード

<template>
  <v-app id="inspire">
    <v-container>
      <v-row justify="center">
        <v-col cols="6">
          <v-card>
            <v-card-title>ログイン</v-card-title>
          </v-card>
        </v-col>
      </v-row>
      <v-row justify="center">
        <v-col cols="6">
          <v-form ref="form" v-model="valid" lazy-validation>
            <v-text-field v-model="email" :rules="emailRules" label="メールアドレス" required />
            <v-text-field v-model="password" :rules="passwodRules" label="パスワード" required />

            <v-btn :disabled="!valid" color="primary" class="mr-4" @click="validate">
              primary
            </v-btn>
            <v-btn :disabled="!valid" color="secondary" class="mr-4" @click="validate">
              secondary
            </v-btn>
            <v-btn :disabled="!valid" color="accent" class="mr-4" @click="validate">
              accent
            </v-btn>
            <v-btn :disabled="!valid" color="error" class="mr-4" @click="validate">
              error
            </v-btn>
          </v-form>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

実行結果