[TOC] ## 主題 ### 自定義主題 ``` import { createApp } from 'vue' import { createVuetify, ThemeDefinition } from 'vuetify' const myCustomLightTheme = { dark: false, colors: { background: '#FFFFFF', surface: '#FFFFFF', primary: '#6200EE', 'primary-darken-1': '#3700B3', secondary: '#03DAC6', 'secondary-darken-1': '#018786', error: '#B00020', info: '#2196F3', success: '#4CAF50', warning: '#FB8C00', }, } export default createVuetify({ theme: { defaultTheme: 'myCustomLightTheme', themes: { myCustomLightTheme, }, }, }) ``` ### 更改主題 ``` import {useTheme} from "vuetify" const theme = useTheme() theme.global.name.value = theme.global.current.value.dark ? 'light' :'dark' ``` ### 自定義顏色,并使用 ``` themes: { light: { colors: { primary: '#1867C0', secondary: '#5CBBF6', foo:'#fc2b2b', }, }, ``` 使用 ``` .foo{ color: rgb(var(--v-theme-success)); // --v-theme-success 為框架自帶顏色, background-color: rgb(var(--v-theme-foo)); // --v-theme-foo 為自定義顏色 } ``` ## 在類中使用 ``` <div class="bg-foo on-foo"> ```