【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>

参考

https://stackoverflow.com/questions/50243769/vuetify-how-to-set-background-color
https://vuetifyjs.com/ja/customization/theme/