Vuetify 색상 테마 변경이 작동하지 않음

Vuetify 색상 테마 변경이 작동하지 않음

vuetify와 함께 vuej를 사용하고 있습니다.Basic vuetify 템플릿을 넣고 Color 테마를 변경하려고 했는데 Color가 전환되지 않습니다.콘솔에 에러는 표시되지 않고 캐시도 클리어 됩니다.

main.js 코드:

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
import colors from 'vuetify/es5/util/colors';

Vue.use(Vuetify, {
  theme: {
    primary: colors.indigo.base, // #E53935
    secondary: colors.indigo.base, // #FFCDD2
    accent: colors.indigo.base // #3F51B5
  }
});

const app = new Vue({
    el: '#app',
    // ...
});

그리고 내 템플릿은 이렇게 생겼지

    <div id="app">
  <v-app light>
    <v-navigation-drawer
      fixed
      v-model="drawerRight"
      right
      clipped
      app
    >
    </v-navigation-drawer>
    <v-toolbar
      dark
      fixed
      app
      clipped-right
    >
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-spacer></v-spacer>
      <v-toolbar-side-icon @click.stop="drawerRight = !drawerRight"></v-toolbar-side-icon>
    </v-toolbar>
    <v-content>
      <v-container fluid fill-height>
        <v-layout justify-center align-center>

        </v-layout>
      </v-container>
    </v-content>
  </v-app>
    </div>

제 경우 모든 컴포넌트를 v-app로 포장해야 했습니다.

<div id="id">
  <v-app>
// youre code here
  </v-app>
</div>

이렇게 하지 않으면 앱이 기본 테마를 사용합니다.

vuetify 문서에서 참조:

"Vuetify에서는 v-app 구성 요소와 v-navigation-drawer, v-app-bar, v-footer 등과 같은 구성 요소에 대한 애플리케이션 프로포트를 통해 구성 요소 크기를 적절하게 조정하여 애플리케이션을 부트스트랩할 수 있습니다.이것에 의해, 레이아웃 사이징을 관리하는 번거로움 없이, 정말로 독자적인 인터페이스를 작성할 수 있습니다.v-app 구성 요소는 모든 애플리케이션에 필요합니다.이는 Vuetify의 많은 구성 요소 및 기능의 마운트 지점이며 기본 애플리케이션 변형(어두운/밝은)을 하위 구성 요소에 전파하고 Safari와 같은 브라우저에서 특정 클릭 이벤트에 대한 적절한 크로스 브라우저 지원을 보장합니다. v-app은 애플리케이션 ONCE 내에서만 사용해야 합니다."

색상이 전환되지 않음

무슨 색이요?테마 색상을 사용하는 컴포넌트가 없습니다.예를 들어 툴바의 배경색을 변경하려면 다음 작업을 수행해야 합니다.<v-toolbar color="primary">

@DigitalDrifter 권장@import '~vuetify/src/stylus/main'.

하지만 그건 스타일러스 코드예요예를 들어,stylus폴더 및 풋main.styl기본 스타일을 쉽게 변경할 수 있도록 권장되는 폴더입니다.

그 코드를 에 추가한다.main.styl:

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

그 후 포함main.styl당신의 안에서app.js

// app.js
import './stylus/main.styl'

나중에 Vuetify 기본 스타일러스 변수를 덮어쓰려면 (에서 실행)main.styl)이후 변수를 선언해야 합니다.@import그러면 Vuetify 기본 변수를 자동으로 덮어씁니다.

언급URL : https://stackoverflow.com/questions/49805913/color-theme-change-in-vuetify-not-working