結論
オプションとして 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>
