# テーマの設定

アプリケーションの色をプログラムで簡単に変更できます。デフォルトのスタイルシートを再構築し、特定のニーズに合わせてフレームワークのさまざまな面をカスタマイズします。

# テーマジェネレータ

テーマジェネレータ ツールを使用し、 Vuetify アプリケーションの新しいカラーテーマを発見・生成しましょう。

# テーマ対応

VuetifyはMaterial Design specの Light と Dark の両方のバリエーションをサポートしています。この指定は、ルートアプリケーションコンポーネントであるv-appから始まり、ほとんどのコンポーネントでサポートされています。デフォルトでは、アプリケーションはlightテーマを使用しますが、テーマサービスにdarkオプションを追加することで簡単に上書きできます。

// src/plugins/vuetify.js

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

Vue.use(Vuetify)

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

コンポーネントを light または dark に指定すると、コンポーネントの子要素はすべて、特に指定されていない限り継承され、適用されます。 this.$vuetify.theme.darkをtrueまたはfalseに変更することで、手動でdarkのオン/オフを切り替えることができます。

# カスタマイズ

デフォルトでは、Vuetify はすべてのコンポーネントに適用される標準テーマを持っています。

{
  primary: '#1976D2',
  secondary: '#424242',
  accent: '#82B1FF',
  error: '#FF5252',
  info: '#2196F3',
  success: '#4CAF50',
  warning: '#FFC107',
}

これは簡単に変更できます。 テーマ プロパティを Vuetify コンストラクタに渡すだけです。デフォルトから継承されるテーマプロパティを使用して、すべてまたは一部のみを変更することができます。

// src/plugins/vuetify.js

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

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

定義済みのマテリアルカラーを使用することもできます。

// src/plugins/vuetify.js

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

import colors from 'vuetify/lib/util/colors'

const vuetify = new Vuetify({
  theme: {
    themes: {
      light: {
        primary: colors.purple,
        secondary: colors.grey.darken1,
        accent: colors.shades.black,
        error: colors.red.accent3,
      },
      dark: {
        primary: colors.blue.lighten3,
      },
    },
  },
})

デフォルトでは、テーマサービスはアプリケーションのメインカラーを anchor タグに使用します。テーマにanchorプロパティを追加することでオーバーライドできます:

// src/plugins/vuetify.js

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

Vue.use(Vuetify)

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

Vuetify はこれらの値に基づいて css クラスを生成し、DOM でアクセスできるようにします。これらのクラスは、他のヘルパークラス、例えばテキストなどのprimary またはsecondary--textクラスと同じマークアップに従います。カラーオブジェクト全体を指定した場合 (上記の colors.purple のように)、明暗lighten/darkenのバリエーションは生成されるのではなく、直接使用されます。

これらの値は、theme プロパティの下のインスタンス $vuetify オブジェクトでも利用可能になります。これにより、テーマを動的変更することができます。舞台裏では、Vuetifyはテーマクラスを再生成して更新し、アプリケーションをシームレスに更新します。

// Light theme
this.$vuetify.theme.themes.light.primary = '#4caf50'

// Dark theme
this.$vuetify.theme.themes.dark.primary = '#4caf50'

# カスタムテーマのバリエーション

Vuetifyはテーマの色を lighten 、 darken バリエーションを自動的に生成しますが、自分で制御したい場合があります。変更したいバリエーションを含むテーマオブジェクトを渡すだけです。指定されていないものは、あなたのために生成されます。

// src/plugins/vuetify/theme.js

import colors from 'vuetify/lib/util/colors'

export default {
  primary: {
    base: colors.purple.base,
    darken1: colors.purple.darken2,
  },
  secondary: colors.indigo,
  // すべてのキーでテーマスタイルが生成されます。
  // ここでは、カスタムの `tertiary` カラーを追加します。
  tertiary: colors.pink.base,
}

これで、カスタムテーマオブジェクトをインポートしてVuetifyに適用できます。

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import light from './theme'

Vue.use(Vuetify)

export default new Vuetify({
  theme: {
    themes: { light },
  },
})

以下は、themeオブジェクトの上書き可能なキーの完全なリストです:

interface ParsedThemeItem {
  base: string
  lighten5: string
  lighten4: string
  lighten3: string
  lighten2: string
  lighten1: string
  darken1: string
  darken2: string
  darken3: string
  darken4: string

  [name: string]: string
}

# テーマを無効にする

disable プロパティの値を true にすることで、テーマ機能を無効にできます。これにより、Vuetifyスタイルシートが作成されなくなります。

// src/plugins/vuetify.js

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

const vuetify = new Vuetify({
  theme: { disable: true },
})

# オプション

Vuetifyは、SPAの場合はランタイムで、SSRアプリケーションの場合はサーバーサイドでテーマスタイルを生成します。生成されたスタイルは、vuetify-theme-stylesheet のidを持ち<style> タグ内に配置されます。

# Minification

minifyTheme オプションを使用すると、カスタムのミニフィケーション実装を提供できます。これは初期ページサイズを小さくするのに役立ち、options.themeCacheと組み合わせることが推奨されています。この例では、生成されたテーマスタイルをミニファイするために minify-css-stringパッケージを使用します。

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import minifyTheme from 'minify-css-string'

Vue.use(Vuetify)

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

# キャッシュ

カスタム themeCache の実装を渡すオプションがあります。これにより、テーマオブジェクトの再計算の必要性をスキップできます。以下は localStorage プロパティを使用した例です。

// src/plugins/vuetify.js

export default new Vuetify({
  theme: {
    options: {
      themeCache: {
        get: key => localStorage.getItem(key),
        set: (key, value) => localStorage.setItem(key, value),
      },
    },
  },
})

提供された themeCache オブジェクトは get と set メソッドを含んでいる必要があります。 生成された css 文字列を取得し設定するために使用します。

キャッシュは lru-cache を介して行うこともできます。これは、SSR (サーバ・サイド・レンダリング) アプリケーションで特に便利です。

// src/plugins/vuetify.js

const themeCache = new LRU({
  max: 10,
  maxAge: 1000 * 60 * 60, // 1 hour
})

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

# カスタムプロパティ

customProperties を有効にすると、css 変数を各テーマの色ごとに生成します。<style>ブロックで使用できます。

カスタムプロパティは、Internet Explorerではネイティブにサポートされていません。 Internet Explorer 11では、Polyfill で利用できます。ただし、いくつかの制限があります:

// src/plugins/vuetify.js

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

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

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

# CSP nonce

script-src または style-src CSP ルールが有効になっているページでは、組み込みスタイルタグに nonce を指定する必要があります。

<!-- Use with script-src -->
Content-Security-Policy: script-src 'self' 'nonce-dQw4w9WgXcQ'

<!-- Use with style-src -->
Content-Security-Policy: style-src 'self' 'nonce-dQw4w9WgXcQ'

// src/plugins/vuetify.js

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

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

# バリエーション

When Vuetify generates your application’s theme, it creates 9 variants for each color. For majority of users, these variants are rarely used. This is an opt in feature that will be false by default in the next major version.

// src/plugins/vuetify.js

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

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

# Theme Provider

Vuetifyのテーマシステムは、 Vueの機能により提供しています。 There may be situations in which you need to manually change the provided theme (dark or light).

# API

v-theme-provider

# 例

Use the v-theme-provider to manually overwrite all children component’s current theme (light/dark). In the following example, the root v-card is explicitly set to dark with 2 children lists. The first one inherits from the parent v-card while the second is explicitly set to match the root Vuetify theme.

準備はできましたか？

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーションリンクでページ間を移動できます。

GitHub でこのページを編集する

最終更新日:10/07/2024, 11:31:37 AM