Vuetify - 배경색 설정 방법

Vuetify - 배경색 설정 방법

나는 빛 테마와 함께 Vuetify를 사용하고 있다.기본적으로 이것은 주 콘텐츠의 배경을 옅은 회색으로 설정한다.흰색이 필요해.

스타일러스 변수를 수정하여 이것을 재정의하고 싶지만, 어떤 변수가 배경색을 설정하는지 알 수 없을 것 같다.

워드프로세서의 모든 단계를 따랐고 앱 전체에서 설정을 통해 글꼴을 변경할 수 있다.$body-font-family = 'Open Sans'main.styl 파일에 (그래서 웹 팩 빌드가 올바르게 설정되어 있다는 것을 알고 있다)

난 시도했다.$body-bg-light = '#fff'내 본연의 모습이지만, 그건 전혀 변하지 않는 것 같아.만약 내가 설정한다면$material-light.background = '#fff'나는 실수를 한다.

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>

넌 올바른 접근법을 가지고 있어.먼저 vuetify의 테마 파일만 가져오면material-light변수 정의:

// main.styl

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

$material-light.background = #fff

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

---

Vuetify 2.0 업데이트

Vuetify는 2.0에서 SASS로 전환하여 구문이 약간 다르다.안내에 따라 sass-loader를 올바르게 설정한 다음 변수를 변수.scss 파일에 추가하십시오.scss:

$material-light: (
  'background': #fff
);

테마와 메인 가져오기는 더 이상 필요하지 않으며, 지도는 뷔에 의해 병합되므로 변경할 키만 정의하면 된다.

어두운 테마 배경색을 재정의하려면

개인적으로, 나는 이것이 매우 깨끗한 방법이라고 생각한다.배경색을 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;
}

그리고 당신의 앱에서.Vue, css 파일 가져오기:

import styles from './app.css'

또 다른 해결책이 있다.

invuetify.js:

export default new Vuetify({
    theme: {
        themes: {
            light: {
                primary: '#e20074',
                secondary: '#6c757d',
                accent: '#3ea2fb',
                error: '#dc3545',
                petrol: '#17a499',
                background: '#fff',
            }
        },
        options: {
            customProperties: true
        },
    },
})

App.vue의 경우:

<v-app id="app">
...
</app>

<style>
#app {
    background-color: var(--v-background-base);
}
</style>

세부 정보: https://stackoverflow.com/a/48285278/506764

배경색을 간단히 바꾸려면...

<v-app class="white">

텍스트 색상을 위해

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

기본 컨테이너에서 기본 라이트 그레이 색상을 배경색으로 설정하는 클래스는.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 테마를 살펴보십시오.

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

예를 들어 어두운 테마를 적용하려면이것은 또한 부비시(위험, 일차 등)와 어울리는 모든 "표준색"을 수정하기 때문에 선호되는 방법이다.

빠르고 더러워질 필요가 있는 경우, es 또는 s를 에 적용할 수도 있다.

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

어두운 테마(출처)와 함께 사용할 수 있다.

위의 솔루션을 결합한 Betify.js 2와 Nuxt.js에 대한 짧은 기사를 썼다.Vuetify.js와 Nuxt.js에서 배경색 변경 - 누군가 이 배경색을 흥미롭게 여길 수 있다고 생각했다.

기본적으로 사용자 지정 배경색을 사용하십시오.

vuetify: {
  customVariables: ['~/assets/variables.scss'],
  treeShake: true,
  theme: {
    options: {
      customProperties: true
    },
    dark: true,
    themes: {
      dark: {
        background: '#00a86b'
      },
      light: {
        background: '#d0f0c0'
      }
    }
  }
}

그리고 그것을 에 적용한다.variables.scss:

@import '~vuetify/src/styles/styles.sass';
$material-light: map-merge($material-light, (
  'background': var(--v-background-base, map-get($material-light, 'background')) !important,
));
$material-dark: map-merge($material-dark, (
  'background': var(--v-background-base, map-get($material-dark, 'background')) !important,
));

css 코드를 직접 주입하면 해결할 수 있다.브라우저에서 코드를 검사하고 클래스 또는 ID 이름을 확인하십시오.구성 요소로 이동하여 스타일 섹션에 다음과 같이 코드를 기록하십시오.코드를 검사해서 클래스 이름을 알아봤는데, 클래스 안에 '.v-picker_body'가 있어. div의 배경색을 바꿔야겠어.그래서 여기..

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

배경을 바꾸는 가장 쉬운 방법은 다음과 같았다.

/src/plugins/vuetify.js의 배경색 설정

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

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: 'mdi',
  },
  theme: {
    dark: true,
    themes: {
      dark: {
        background: colors.grey.darken4,
      }
    }
  }
});

그런 다음 v-app 구성 요소에 바인딩하십시오.

<v-app v-bind:style="{ background: $vuetify.theme.themes.dark.background}">

위의 방법을 사용하여 밝은/어두운 테마 기본 배경색을 변경하려고 했지만 효과가 없다!!!여기 내가 한 일이 있다.

아래에 새 스타일 파일 추가./src/scss/main.scss

// src/scss/main.scss
@import '~vuetify/src/styles/styles.sass'
$new-colors: (
    'app-bar': map-get($red, 'lighten-4') !important,
    'background': map-get($red, 'lighten-4') !important,
    'cards': map-get($red, 'lighten-4') !important,
    'bg-color': map-get($red, 'lighten-4') !important,
    'fg-color': map-get($red, 'lighten-4') !important,
    'text-color': map-get($red, 'lighten-4') !important,
    'buttons': (
      'disabled': map-get($red, 'lighten-4') !important,
      'focused': map-get($red, 'lighten-4') !important,
      'focused-alt': map-get($red, 'lighten-4') !important,
      'pressed': map-get($red, 'lighten-4') !important,
    ),
);
$material-light: map-merge($material-light, $new-colors);
$material-dark: map-merge($material-dark, $new-colors);
@debug $material-light;

@import '~vuetify/src/styles/main.sass';
@import '~vuetify/src/components/VBtn/_variables.scss';

그리고 나서 나는 이 파일을 가지고 왔다../src/main.js다음과 같은 경우:

// ./src/main.js 
import Vue from 'vue';
import vuetify from './plugins/vuetify';
import './scss/main.scss';

new Vue({
    vuetify,
    beforeCreate() {
        console.log('Before our APP is created');
    },
    mounted() {
        console.log('Our APP is being mounted now.');
    },
    render: function(h) {
        return h(App);
    }
}).$mount('#app');

나는 사용하고 있다vue 2.6.7그리고vuetify 2.1.7

에서root모든 페이지/목록/뷰를 동일한 색상으로 표시하려면 구성요소 수준:

<template>
  <div style="background-color: #333">
    ...
  </div>
</template>

여기, 더root -의 구성 요소 ->><<<<->>>><div>그러나 당신은 당신이 원하는 거의 모든 것을 가질 수 있다.에 효과가 있다.<section> <v-layout>등

v-app 스타일만 변경

 <v-app style="background-color:black; color:white">
        
 </v-app>

기본 스타일 파일에서 동일

main.css

body { background-color: black; color: white }

현재와 관련된 문제를 가지고 있는 모든 사람들을 위해vuetify v2.5.5, 간단히 이 줄을 당신의 것에 추가하시오.variable.scss파일:

$material-light: ( 'background': #e5e5e5 );

대체하다#e5e5e5원하는 색으로

참조URL: https://stackoverflow.com/questions/50243769/vuetify-how-to-set-background-color