web-dev-qa-db-ja.com

Vuetify-背景色の設定方法

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

スタイラス変数を変更することでこれをオーバーライドしたいのですが、どの変数が背景色を設定するのかわからないようです。

docs のすべての手順を実行し、main.stylファイルで$body-font-family = 'Open Sans'を設定することでアプリ全体でフォントを変更できます（Webpackビルドが正しく設定されていることがわかります）

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

vue.jsvuetify.js
9
Cindy Conway

適切なアプローチがあります。最初にvuetifyのテーマファイルをインポートするだけで、material-light変数が定義されています：

//main.styl

@import '~vuetify/src/stylus/theme.styl'

$material-light.background = #fff

@import '~vuetify/src/stylus/main.styl'
14
Ziemek Trzesicki

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>
6
BlueFrog

メインコンテナでは、デフォルトのライトグレー色を背景色として設定するクラスは.application.theme--light（または暗い、使用しているものに応じて）。

Vuetify内で、この色はsrc/stylus/settings/_theme.styl：

$material-light := {
  status-bar: {
    regular: #E0E0E0,
    lights-out: rgba(#fff, .7)
  },
  app-bar: #F5F5F5,
  background: #FAFAFA, // here
  cards: #FFFFFF,

残念ながら、背景色を具体的にオーバーライドする簡単な方法を見つけられなかったため（色が直接定義されているため）、material-lightプロパティ。つまり、デフォルトコードをコピーして貼り付け、必要な背景色を設定します。

3
m4rtin

暗いテーマの背景色を上書きするには

個人的には、これはとてもきれいな方法だと思います。次のようにvuetify.jsで背景色を設定します。

export default new Vuetify({
  theme: {
    options: {
      customProperties: true,
    },
    themes: {
      dark: {
        background: '#292930',
      },
    },
      dark: true,
  },
});

次に、これをcssファイル（たとえば、プロジェクトルートの「app.css」）に追加します。

.v-application {
    background-color: var(--v-background-base) !important;
}

App.Vueで、cssファイルをインポートするだけです：

import styles from './app.css'
2
svenema

Cssコードの直接注入、それは解決することができます。ブラウザでコードを調べて、クラス名またはID名を見つけます。コンポーネントに移動し、スタイルセクションで、たとえばコードを記述します。コードを調べてクラス名を見つけました。クラス名は「.v-picker_body」で、クラスにはdivがあります。 divの背景色を変更する必要があります。だからここにある-

<style>
 .v-picker__body > div{
    background-color: #F44336;
 }
</style>
2
Ziaur Rahman

テーマの検証をご覧ください。次のようなことができます。

<v-app dark>
...
</v-app>

たとえば、暗いテーマを適用します。これは、vuetifyに付随するすべての「標準色」（危険、原色など）も変更するため、好ましい方法です。

素早く汚い必要がある場合は、<v-app>にclassesまたはstylesを適用することもできます。

<v-app style="
  background: #3A1C71;
  background: -webkit-linear-gradient(to right, #FFAF7B, #D76D77, #3A1C71);
  background: linear-gradient(to right, #FFAF7B, #D76D77, #3A1C71);
">

ダークテーマ（ source ）と組み合わせて使用​​できます。

1
acdcjunior

背景色を変更するには...

<v-app class="white">

テキストの色

<v-app class="grey--text text--darken-2">
1
Steve Dench