Help us understand the problem. What is going on with this article?

[Nuxt.js]Vuetifyのテーマを用いる

Vuetifyのテーマを用いる

開発環境

package.json
"dependencies": {
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "@nuxtjs/vuetify": "^1.0.0"
  }

インストールの際は以下のどちらかのコマンドを用い、UIコンポーネントにVuetifyを選択します。

 npx create-nuxt-app <project-name>
 yarn create nuxt-app <project-name>

Vuetifyのテーマ

Vuetifyにはデフォルトでテーマが設定されており、クラス名で指定したり、Vuetifyのコンポーネントでcolorというpropsを用いることによって色を指定できます。Nuxt.jsでは、Vuetifyのテーマはnuxt.config.jsに以下のように書かれています(上記のバージョン)。

nuxt.config.js
vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: true,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  }

ここでdark: trueの部分でテーマをダークモードかライトモードかを選択でき、trueだとダークテーマとなります。また、primary: colors.blue.darken2の記述ではVuetifyで決められたカラーパレットの色が指定されています(参考URL:https://vuetifyjs.com/ja/styles/colors)もちろん、色コードをprimary: #F44336と指定することも可能です。ただし、執筆している現在のところ(2020/2月)rgb(0, 0, 0), rgba(0, 0, 0, 0), #ffffff00といった形で指定すると[Vuetify] 'rgb(100, 100, 100)' is not a valid rgb colorといったエラーがでます。そのため、透明度のある色はここからは設定できないようです。

ライトテーマも利用したい時は、nuxt.config.jsに追記します。

nuxt.config.js
vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: true,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        },
        /*以下追加*/
        light: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  }

これで、dark: flaseとするとライトテーマで指定した色を利用できます。

テーマの利用

テーマの色は、Vuetifyのコンポーネントと、一般のhtmlタグどちらでも利用することが可能です。
たとえば、v-cardというコンポーネントでは、

<template>
  <v-card color="primary">
  </v-card>
</template>

とすると適応されます。またhtmlタグではclass名を指定することでテキストや背景に色を利用します。公式のドキュメントに書いていますので参考にしてください。
 darkとlightのテーマをイベントによって切り替えたい場合は、this.$vuetify.theme.darkに真偽値を代入することによって切り替えが可能です。

テーマをCSSで利用する

テーマをCSSでも利用できるようにするにはnuxt.config.jsに以下を加えます。

nuxt.config.js
vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: true,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        },
        light: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      },
      /*以下追加*/
      options: {
        customProperties: true
      }
    }
  }

これによって、CSSで以下のように用いることができます。

<style>
  .example {
    color: var(--v-primary-base);
    background-color: var(--v-accent-lighten2);
  }
</style>

テーマのカスタマイズ

テーマ名は、primary, accent, secondary, info, warning, error, successがデフォルトでありますが、この通りに名前を指定する必要はありません。
そのため、

nuxt.config.js
vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: true,
      themes: {
        dark: {
          btnBg: colors.blue.darken2
        },
        light: {
          btnBg: colors.grey.darken3
        }
      }
    }
  }

といった指定をすることも可能です。この場合も呼び出す時はcolor="btnBg"とすれば利用可能です。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした