【Vuetify】 메인 콘텐츠의 배경색 변경

빨간색 프레임 부분의 배경색을 변경하는데 수수하게 빠져서 메모.

환경

Vuetify 2.3.9

변경 방법

테마를 사용자 정의하고 background를 설정합니다.

vuetify.ts

import Vue from "vue";
import Vuetify from "vuetify/lib";

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        background: "#f5f5f5"
      }
    }
  }
});

v-app 에 스타일 바인딩

App.vue

<v-app :style="{ background: $vuetify.theme.themes.light.background }">
  <v-navigation-drawer app>
    <!-- -->
  </v-navigation-drawer>

  <v-app-bar app>
    <!-- -->
  </v-app-bar>

  <v-main>
    <v-container fluid>
      <router-view></router-view>
    </v-container>
  </v-main>

  <v-footer app>
    <!-- -->
  </v-footer>
</v-app>

참고

h tps : // s t c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 50243769 / ゔ 에치 fy 호 w- 토세 t 바 ckg 로운 d 코 r
htps : // ゔ에치 fyjs. 코 m / 자 / 쿠 s와 미자치 온 / 테메 /