Vuetifyを使った開発 2 ~Vuetifyの色の設定~

<!-- primary => red-lighten-1 -->
<v-app-bar color="red-lighten-1" density="compact">

<!-- 16進数でも指定可能
<v-app-bar color="#EF5350" density="compact"> -->

// インポート分を追加
// 16進数でも指摘できる。その場合は不要。
import colors from 'vuetify/util/colors'

export default createVuetify({
  theme: {
    defaultTheme: 'dark',
    // ここから下の行を追加
    themes: {
      dark: {
        colors: {
          // 好きな色を指定
          primary: colors.green.lighten1,
          // theme.mjsに定義されていない名前でも指定可能
          aaaaaaa: colors.red.darken3
        }
      },
    },
  },
})

<template>
    <v-navigation-drawer class="bg-deep-purple" permanent>
        <v-list-item title="Navigation" subtitle="test"></v-list-item>
        <v-divider></v-divider>
        <v-list-item link title="Home"></v-list-item>
        <v-list-item link title="Test"></v-list-item>
    </v-navigation-drawer>
</template>

    <v-navigation-drawer class="" permanent>
        <v-list-item title="Navigation" subtitle="test"></v-list-item>
        <v-divider></v-divider>
        <v-list-item link title="背景のみ" class="bg-pink-darken-1"></v-list-item>
        <v-list-item link title="テキストのみ" class="text-pink-darken-1"></v-list-item>
        <v-list-item link title="背景とテキスト" class="bg-teal text-orange"></v-list-item>
        <v-list-item link title="bgつけないと反映されない" class="yellow"></v-list-item>
        <v-list-item link title="文字は背景に合わせて黒か白" class="bg-green-lighten-5"></v-list-item>
    </v-navigation-drawer>

export default createVuetify({
  theme: {
    defaultTheme: 'dark'
})

// 「type ThemeDefinition」を追加
import { createVuetify, type ThemeDefinition } from 'vuetify'


// カスタムテーマの作成
const myVividPink: ThemeDefinition = {
  dark: false,
  colors: {
    background: colors.pink.lighten5,
    primary: colors.pink.accent3,
    secondary: colors.pink.accent2
  }
}

export default createVuetify({
  theme: {
　　// カスタムテーマを指定する
    defaultTheme: 'myVividPink',
    themes: {
      myVividPink
    },
  },
})

<script setup lang="ts">
import { ref } from 'vue';
import { useTheme } from 'vuetify'

const clicked = ref('')
const theme = useTheme()
const changeTheme = () => {
    // クリックしたボタンのvalueをテーマに設定する
    theme.global.name.value = clicked.value
}
</script>

<template>
    <v-app-bar color="primary" density="compact">
        <template v-slot:prepend>
            <v-app-bar-nav-icon></v-app-bar-nav-icon>
            // トグルボタンを追加
            <v-btn-toggle mandatory v-model="clicked" @click="changeTheme">
                <v-btn value="dark" class="bg-black">dark</v-btn>
                <v-btn value="myVividPink" class="bg-pink">pink</v-btn>
            </v-btn-toggle>
        </template>
        <v-app-bar-title>App bar</v-app-bar-title>
        <template v-slot:append>
            // どちらが押されたかわかりやすくするために追加
            <p>{{ clicked }}押された</p>
            <v-btn icon="mdi-dots-vertical"></v-btn>
        </template>
    </v-app-bar>
</template>