Vuetify 2 から Vuetify 3 の theme変更点

redamoon

Vuetify 2の Theme と Vuetfy 3 のThemeの変更点

Vuetify 3 からは useThemeがAPIとして提供されるようになった。
従来のThemeと変更点がいくつかあるため、まとめていく。

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

redamoon

style scoped 環境下で themeの色を利用する場合の変更点

Vuetify 2

new Vuetify の theme プロパティに customProperties プロパティを定義し true にする
style は var(--v-primary-base) と記述する必要がある

Vuetify 3

customProperties 不要
style は rgb(var(--v-theme-primary)) に変更

redamoon

themeの設定値をコンポーネントで利用する方法

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

Vuetify 3 では useThemeを利用します。

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

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>

スクリプトで利用する場合は、setup内であれば読み込みした useThemeの変数でテンプレート同様にアクセスすることができる。

redamoon

それぞれ提供されているAPIには Ref になるため .value が必要になる。

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

theme.computedThemes.value
theme.global.name.current.value
theme.isDisabled
theme.name.value
theme.styles.value
themeClasses.value
themes.value

redamoon

カスタムテーマを作ることができるようになった

Vuetify 2 では light と darkのみだったが、Vuetify 3からはカスタムテーマを作ることができるようになった。

従来のテーマはパッケージとしてインストールして Optionsに渡していた。
Vuetify 3から設定ファイル内で独自のテーマを作成することができるようになった。

themeの変更点

redamoon

Vuetify 3 と Vuetify 2 のテーマ設定の違い

Vuetify 3

テーマの設定方法:
- defaultThemeオプションを使ってデフォルトテーマを設定。
- テーマを追加するには、theme.themesオブジェクトに新しいプロパティを定義する。
テーマの変更:
- useThemeを使って現在のテーマ情報を取得し、変更可能。
- <v-theme-provider>コンポーネントを使用して、子コンポーネントにテーマを適用。
カスタムテーマ:
- 色やその他のオプションを含むテーマオブジェクトを作成。
- colorsオブジェクトにカスタムカラーを追加可能。
ランタイムでのテーマ変更:
- テーマの変更はリアルタイムでプログラム的に実行可能。
- <v-btn>を使ったテーマ切り替えボタンの例。
テーマの無効化:
- themeプロパティをfalseに設定してテーマ機能を無効化。
カスタムプロパティ:
- customPropertiesを有効にすると、各テーマカラーに対してCSS変数が生成される。
CSP Nonce:
- cspNonceオプションでCSPルールに対応。
カラーのバリエーション:
- 色のライト・ダークバリエーションを自動生成。
- オプションで無効化可能。

Vuetify 2

テーマの設定方法:
- デフォルトで標準テーマが適用。
- themeプロパティを使ってテーマをカスタマイズ。
カスタムテーマ:
- Vuetifyコンストラクタにテーマオブジェクトを渡してカスタマイズ。
- Materialカラーのプリセットを利用可能。
ランタイムでのテーマ変更:
- $vuetify.theme.darkをtrueまたはfalseに変更して手動でダークモードの切り替え。
テーマの無効化:
- themeプロパティにdisable: trueを設定してテーマ機能を無効化。
カスタムプロパティ:
- customPropertiesオプションでCSS変数を生成し、スタイルブロック内で使用可能。
CSP Nonce:
- cspNonceオプションでCSPルールに対応。
カラーのバリエーション:
- デフォルトで各色に対して9つのバリエーションを生成。

まとめ:
Vuetify 3では、テーマ設定がより柔軟かつプログラム的にリアルタイムで変更可能になっています。また、テーマのカスタマイズや適用が簡略化されており、特定のコンポーネントやセクションに個別のテーマを適用する機能が強化されています。一方、Vuetify 2では、テーマ設定は比較的シンプルで、主に全体的なカスタマイズに重点が置かれていました。

redamoon

Vuetify 3 vs. Vuetify 2: テーマ設定の違い

Vuetifyは、Vue.jsアプリケーションにおいて美しいUIを簡単に構築できる強力なUIフレームワークです。特にテーマ設定に関しては、Vuetify 2からVuetify 3にかけて多くの改善が加えられました。本記事では、Vuetify 3とVuetify 2のテーマ設定の違いを詳しく解説します。

Vuetify 3

1. テーマの設定方法
Vuetify 3では、defaultThemeオプションを使ってアプリケーションのデフォルトテーマを簡単に設定できます。新しいテーマを追加する場合は、theme.themesオブジェクトに新しいプロパティを定義します。

import { createVuetify } from 'vuetify'

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,
    },
  },
})

2. テーマの変更
Vuetify 3では、useThemeコンポーザブルを使って現在のテーマ情報を取得し、プログラム的に変更できます。また、<v-theme-provider>コンポーネントを使って、特定のセクションやコンポーネントにテーマを適用することができます。

<template>
  <v-app>
    <v-btn @click="toggleTheme">Toggle Theme</v-btn>
  </v-app>
</template>

<script setup>
import { useTheme } from 'vuetify'

const theme = useTheme()

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

3. カスタムプロパティ
customPropertiesオプションを有効にすると、各テーマカラーに対してCSS変数が生成され、スタイルブロック内で使用できます。

import { createVuetify } from 'vuetify'

export default createVuetify({
  theme: {
    options: { customProperties: true },
  },
})

4. カラーのバリエーション
Vuetify 3では、テーマシステムが色のライト・ダークバリエーションを自動生成します。必要に応じてこの機能を無効にすることも可能です。

import { createVuetify } from 'vuetify'

export default createVuetify({
  theme: {
    variations: {
      colors: ['primary', 'secondary'],
      lighten: 1,
      darken: 2,
    },
  },
})

5. CSP Nonce
CSPルールが有効なページでは、cspNonceオプションを使ってスタイルタグにnonceを指定できます。

import { createVuetify } from 'vuetify'

export const vuetify = createVuetify({
  theme: {
    cspNonce: 'dQw4w9WgXcQ',
  },
})

Vuetify 2

1. テーマの設定方法
Vuetify 2では、Vuetifyコンストラクタにテーマオブジェクトを渡してカスタマイズします。Materialカラーのプリセットを利用することもできます。

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

const vuetify = new Vuetify({
  theme: {
    themes: {
      light: {
        primary: '#3f51b5',
        secondary: '#b0bec5',
        accent: '#8c9eff',
        error: '#b71c1c',
      },
    },
  },
})

export default vuetify

2. ランタイムでのテーマ変更
Vuetify 2では、$vuetify.theme.darkプロパティを使って手動でダークモードを切り替えることができます。

this.$vuetify.theme.dark = true // ダークテーマを有効化
this.$vuetify.theme.dark = false // ダークテーマを無効化

3. カスタムプロパティ
Vuetify 2でも、customPropertiesオプションを有効にすることで、各テーマカラーに対してCSS変数が生成されます。

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

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

4. カラーのバリエーション
Vuetify 2はデフォルトで各色に対して9つのバリエーションを生成します。この機能は次のメジャーバージョンで無効化がデフォルトになる予定です。

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

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

5. CSP Nonce
Vuetify 2でも、cspNonceオプションを使ってスタイルタグにnonceを指定できます。

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

export default new Vuetify({
  theme: {
    options: { cspNonce: 'dQw4w9WgXcQ' },
  },
})

まとめ

Vuetify 3では、テーマ設定がより柔軟かつプログラム的にリアルタイムで変更可能になっています。また、特定のコンポーネントやセクションに個別のテーマを適用する機能が強化されています。一方、Vuetify 2では、テーマ設定は比較的シンプルで、主に全体的なカスタマイズに重点が置かれていました。これらの変更点を理解し、適切に活用することで、より洗練されたユーザーインターフェースを実現できるでしょう。

このスクラップは2024/06/18にクローズされました