VuetifyのテーマをCSS変数として使用する

結論

オプションとしてcustomProperties:trueを渡します。

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

Vue.use(Vuetify)

export default new Vuetify({
  theme: {
    themes: {
      light: {
        main: '#D7F9F1',
        secondary: '#7AA095',
      }
    },
    options: { customProperties: true },
  },
})

後は、--v-{テーマ名}-baseという名前でCSS変数として利用できます。

<style scoped>
.bg {
  background-color: var(--v-main-base);
}

.text {
  color: var(--v-secondary-base);
}
</style>

Vuetifyのテーマとは

Vuetifyでは、カラーコードをテーマとして設定することができます。
テーマとして設定をしておけば、コード上で#D7F9F1のようにカラーコードを直接埋め込む代わりに、mainのようなわかりやすい名前で使うことができます。

また、アプリケーション内で使用可能なカラーをすべてテーマとして定義しておくことで、デザインの一貫性を保つことができます。

デフォルトの標準テーマとして、以下が設定されています。

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

これらのテーマ一部を上書きをすることができますし、新たなテーマ名を設定することもできます。
デフォルトのテーマから変更するには、Vuetifyのコンストラクタにオプションとして渡すことでおこなえます。

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

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        main: '#D7F9F1',
        secondary: '#7AA095',
      },
    },
  },
});

テーマを利用する

設定したテーマは、ほぼすべてのコンポーネントに対して利用することができます。

例えば、v-btnコンポーネントでは、colorpropsに対してテーマ名を渡すことでボタンの色を設定します。

<template>
  <v-btn color="main">ボタン</v-btn>
</template>

また、スクリプトからは$vuetifyオブジェクトからアクセスすることができます。

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  created() {
    console.log(this.$vuetify.theme.themes.light.main) // #D7F9F1;
  },
});
</script>

CSSから使用する

それでは、タイトルのとおりにVuetifyのテーマをCSSから使用してみましょう。

themeのオプションにcustomProperties:trueを渡すことですべてのテーマがCSS変数として生成されます。

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

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        main: '#D7F9F1',
        secondary: '#7AA095',
      },
    },
+   options: { customProperties: true },
  },
});

デバッグツールを開くと、ルート要素に確かに生成されていることがわかります。

思ったよりもたくさん生成されていますが、これはVuetifyがテーマに渡したカラーコードに対してlighten4・darken2のようにテーマの色のバリエーションを自動で生成するためです。

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

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        main: '#D7F9F1',
        secondary: '#7AA095',
      },
    },
-   options: { customProperties: true },
+   options: { customProperties: true, variations: false },
  },
});

もしこの機能がおせっかいだと感じるのであれば、variations: falseを渡すことでバリエーション自動生成を行わないようにできます。

先程よりも生成されたCSS変数が確かに減っていることがわかります。

後は、通常のCSS変数と同じように利用できます。

<template>
  <div class="bg">
    <span class="text">こんにちは！</span>
  </div>
</template>

<style scoped>
.bg {
  background-color: var(--v-main-base);
  min-height: 100vh;
}

.text {
  color: var(--v-secondary-base);
  font-weight: 600;
  font-size: 16px;
}
</style>