61
37

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

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"とすれば利用可能です。

61
37
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
61
37

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?