Zenn
株式会社HAMWORKS
🤔

Theme 変更点（Vuetify 2 〜 Vuetify 3 アップデート）

redamoon
2024/06/18に公開
Storybook
Vue.js
Vuetify
tech

Vuetify 3 Theme の変更点

この記事では、Vuetify 3.5.16 での theme の変更点をまとめています。
また、記事の内容は Composition API を利用して検証しています。

Vuetify 2 Theme Configuration

https://v2.vuetifyjs.com/en/features/theme/

Vuetify 3 Theme Configuration

https://vuetifyjs.com/en/features/theme

Theme の変更点

Vuetify 2 では、this.$vuetify.theme.dark の 真偽値で dark と light のクラスを付与することでテーマを切り替えていました。

Vuetify2
<template>
  <v-app>
    <v-btn @click="toggleTheme">テーマ切り替え</v-btn>
  </v-app>
</template>

<script>
  export default {
    methods: {
      toggleTheme() {
        this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
      }
    }
  }
</script>

Vuetify 3 では useTheme を利用してテーマを切り替えることができます。

Vuetify3
<script setup lang="ts">
import { useTheme } from 'vuetify'
const theme = useTheme()

const toggleTheme = () => {
  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
}
</script>

<template>
  <v-app>
    <v-btn @click="toggleTheme">テーマ切り替え</v-btn>
  </v-app>
</template>

テンプレート内での利用

Vuetify 2では、new Vuetify にtheme -> themes -> light のプロパティに定義していました。

new Vuetify({
  theme: {
    dark: false,
    themes: {
      light: {
        primary: "#3f51b5",
        secondary: "#b0bec5",
        accent: "#8c9eff",
        error: "#b71c1c",
      },
    },
  },
})

これらの値を利用する際は、 $vuetify もしくは this.$vuefiy でアクセスします。
テンプレート内で利用する場合は、 $vuetifyでアクセスできます。

<template>
  <v-app id="app">
    <v-container>
      {{ $vuetify.theme.themes.light.primary }} // #3f51b5
    </v-container>
  </v-app>
</template>

coumputedなどのスクリプト内で利用する場合は、thisでアクセスします。

<template>
  <v-app id="app">
    <v-container>
      {{ themesColorPrimary }} // #3f51b5
    </v-container>
  </v-app>
</template>
<script>
export default {
  computed: {
    themesColorPrimary() {
      return this.$vuetify.theme.themes.light.primary;
    },
  }
};
</script>

Vuetify 3 では useThemeを利用して、 createVuetify にtheme -> themes -> light のプロパティに定義します。

createVuetify({
  components,
  directives,
  theme: {
    themes: {
      light: {
        colors: {
          primary: '#1976D2',
        }
      }
    }
  }
})

テンプレート内で利用する場合は、script で useTheme() を呼び出して変数に格納して、テンプレートで呼び出します。
Vuetify 2との違いとしては、 useThemeを読み込む必要がある。
composable を利用している場合は themes 配下は、 .value が必要になります。

<template>
  <div>
    {{ theme.themes.value.light.colors.primary}}  // #1976D2
    {{ light.colors.primary }}  //  分割代入 #1976D2
  </div>
</template>
<script setup lang="ts">
import { useTheme } from 'vuetify'
const theme = useTheme()

// 分割代入でも可能
const { themes: {value: { light }}} = useTheme()
</script>

defaultTheme の設定

Vuetify 3 でも同様に light と dark の theme がプリインストールされています。

Vuetify 2 では dark: true でダークテーマをONにして切り替えを実現していました。
Vuetify 3からはカスタマイズしたテーマも挿入することができるようになったため、defalutTheme が提供されるようになりました。

Vuetify3
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'

export default createVuetify({
  theme: {
    defaultTheme: 'dark'
  }
})

カスタムテーマの設定

Vuetify 3 ではカスタマイズしたテーマを設定することが可能になりました。
theme.themes にカスタマイズした値を設定することで利用することができるようになりました。

Vuetify3
const myCustomLightTheme = {
  dark: false,
  colors: {
    background: '#FFFFFF',
    surface: '#FFFFFF',
    primary: '#1867C0',
    secondary: '#48A9A6',
    error: '#B00020',
    info: '#2196F3',
    success: '#4CAF50',
    warning: '#FB8C00',
  }
}

export default createVuetify({
  theme: {
    defaultTheme: 'myCustomLightTheme',
    themes: {
      myCustomLightTheme,
    },
  },
})

Vuetify 2 では、オリジナルのテーマをインストールして利用していましたが、Vuetify 3 では設定ファイルのみで定義することができます。

Vuetify2
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import minifyTheme from 'minify-css-string'  // minifyTheme をインポート

Vue.use(Vuetify)

export default new Vuetify({
  theme: {
    options: { minifyTheme },
  },
})

useTheme の情報

https://vuetifyjs.com/en/api/use-theme

useTheme で提供される値は以下になります。
提供されるオブジェクトは ref が定義されていることから Composition API の利用で取得する場合には、末尾に .value (※ global以外) を付与する必要があります。

  • computedThemes.value
    • 定義したテーマ情報を含むオブジェクトを返します
  • current.value
    • 現在のテーマ情報
  • global
    • グローバルのテーマ情報のインスタンスを参照
  • isDisabled
    • テーマ無効（3.6.8 のバージョンでは、プロパティが存在しないエラーになる）
  • name.value
    • 現在のテーマ名
  • styles.value
    • テーマのスタイル情報
  • themeClasses.value
    • テーマのクラス名
  • themes.value
    • テーマ情報

これらの情報を uesTheme から取得することができます。

themeの値をCSSで利用する場合の変更点

Vuetify 2 では、customProperties に true を渡すことで スタイルに変数を渡すことができました。
Vuetify 3 では、customPropertiesは不要でスタイルに変数を渡すことができます。

変更点は、スタイルの記述方法が変わりました。

  • varの前に rgb / rgba を追加する
  • 末尾の base を削除して、--v- のあとに theme を追加
  <style>
    .my-class {
-      background-color: var(--v-primary-base);
+      background-color: rgb(var(--v-theme-primary));
    }
  </style>

v-theme-provider の変更点

Vuetify 2 でもあった v-theme-provider は Vuetify 3でも同様になりますが、propsの情報が変わりました。

Vuetify 2 では 以下の propsのみを提供していました。

  • light: boolean
  • dark: boolean
  • root: boolean

Vuetify 3 では以下の propsを提供しています。

  • tag: string
  • theme: string
  • with-background: boolean

デフォルトのテーマを設定できるようになったことで変更になったようです。
アップデートの際に特定の画面でテーマを設定している場合は、変更が必要になります。

with-backgroundは、背景色を設定するかどうかを設定するプロパティです。
このとき v-theme-provider は v-app の中に配置する必要があります。

v-theme-provider
  <v-app>
- <v-theme-provider dark>
+ <v-theme-provider theme="dark" with-background>
    <v-card>
      <v-card-title>Theme Dark</v-card-title>
      <v-card-text>
        <v-btn>ダークテーマ</v-btn>
      </v-card-text>
    </v-card>
  </v-theme-provider>
  </v-app>

まとめ

Vuetify 3 での theme の変更点についてまとめました。
アップデートに伴っていくつかの変更点があり、そのまま移行はできないため適宜修正が必要になります。
Composition API に書き換えしている場合にも扱いに注意が必要そうです。

Vuetify 3からはカスタムなテーマを定義できるため、従来のようにライトやダークの値を上書きするような対応でなく新設できる点が個人的に良いかなと思いました。
だれかの参考になれば幸いです。

参考記事

https://azukiazusa.dev/blog/vuetify-3-alpha-mejar-changes/

株式会社HAMWORKS
株式会社HAMWORKS

HAMWORKSは企画・マークアップ・JavaScript/TypeScript・CMS構築までトータルでサポートする制作会社です WordPress・Movable Typeの設計・実装 から React / Next.js といったフロントエンドフレームワークを活用したWebアプリケーション構築まで対応しています

Discussion