LightテーマでVuetifyを使用しています。デフォルトでは、これによりメインコンテンツの背景が明るい灰色に設定されます。白である必要があります。
スタイラス変数を変更することでこれをオーバーライドしたいのですが、どの変数が背景色を設定するのかわからないようです。
docs のすべての手順を実行し、main.stylファイルで$body-font-family = 'Open Sans'
を設定することでアプリ全体でフォントを変更できます(Webpackビルドが正しく設定されていることがわかります)
Main.stylで$body-bg-light = '#fff'
を試しましたが、それで何も変わらないようです。 $material-light.background = '#fff'
を設定すると、エラーが発生します。
適切なアプローチがあります。最初にvuetifyのテーマファイルをインポートするだけで、material-light
変数が定義されています:
//main.styl
@import '~vuetify/src/stylus/theme.styl'
$material-light.background = #fff
@import '~vuetify/src/stylus/main.styl'
Vuetify 2.0で、解決策を提案したいと思います。
別の変数(私の場合はバックグラウンド)を追加することを除いて、カスタムテーマを設定する通常のドキュメントに従ってください。
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>
メインコンテナでは、デフォルトのライトグレー色を背景色として設定するクラスは.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
プロパティ。つまり、デフォルトコードをコピーして貼り付け、必要な背景色を設定します。
個人的には、これはとてもきれいな方法だと思います。次のように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'
Cssコードの直接注入、それは解決することができます。ブラウザでコードを調べて、クラス名またはID名を見つけます。コンポーネントに移動し、スタイルセクションで、たとえばコードを記述します。コードを調べてクラス名を見つけました。クラス名は「.v-picker_body」で、クラスにはdivがあります。 divの背景色を変更する必要があります。だからここにある-
<style>
.v-picker__body > div{
background-color: #F44336;
}
</style>
テーマの検証をご覧ください。次のようなことができます。
<v-app dark>
...
</v-app>
たとえば、暗いテーマを適用します。これは、vuetifyに付随するすべての「標準色」(危険、原色など)も変更するため、好ましい方法です。
素早く汚い必要がある場合は、<v-app>
にclass
esまたはstyle
sを適用することもできます。
<v-app style="
background: #3A1C71;
background: -webkit-linear-gradient(to right, #FFAF7B, #D76D77, #3A1C71);
background: linear-gradient(to right, #FFAF7B, #D76D77, #3A1C71);
">
ダークテーマ( source )と組み合わせて使用できます。
背景色を変更するには...
<v-app class="white">
テキストの色
<v-app class="grey--text text--darken-2">