☰

Vuetify - 背景色を設定する方法 質問する

tag-icon • tag-icon vue.js vuetify.js
Vuetify - 背景色を設定する方法 質問する

私は Vuetify を Light テーマで使用しています。デフォルトでは、メイン コンテンツの背景がライト グレーに設定されます。これを白にする必要があります。

スタイラス変数を変更してこれを上書きしたいのですが、どの変数が背景色を設定するのかわかりません。

私はすべての手順に従いましたドキュメント$body-font-family = 'Open Sans'main.styl ファイルで設定することで、アプリ全体のフォントを変更できます(Webpack ビルドが正しく設定されていることがわかります)

main.styl で試してみました$body-bg-light = '#fff'が、何も変わらないようです。設定すると$material-light.background = '#fff'エラーが発生します。

ベストアンサー1

Vuetify 2.0 では、次のような解決策を提案したいと思います。

Vuetifty テーマリファレンス

別の変数 (私の場合は背景) を追加することを除いて、カスタム テーマを設定するときは通常どおりドキュメントに従います。

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,
        background: colors.indigo.lighten5, // Not automatically applied
        ...
      },
      dark: {
        primary: colors.blue.lighten3, 
        background: colors.indigo.base, // If not using lighten/darken, use base to return hex
        ...
      },
    },
  },
})

しかし、まだ終わりではありません。background変数だけでは不十分です。v-app明るい背景と暗い背景を切り替えるように設定する必要があります。

<template>
  <v-app id="main" :style="{background: $vuetify.theme.themes[theme].background}">
    <v-content>
        Stuff :)
    </v-content>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  computed:{
    theme(){
      return (this.$vuetify.theme.dark) ? 'dark' : 'light'
    }
  }
};
</script>

おすすめ記事