如何将自定义主题的颜色应用到Vuetify切换组件?

cmssoen2  于 2022-12-14  发布在  Vue.js
关注(0)|答案(1)|浏览(106)

我正在使用Vuetify 3.0.4和Vue 3,我想通过自定义主题将自定义颜色应用到我的<v-switch>。我想将我的自定义主颜色应用到它。
什么似乎不起作用:

<v-switch theme="myTheme" color="primary" inset></v-switch>

我将我的主题定义为:

const myTheme = {
  dark: true,
  colors: {
    background: '#212126',
    surface: '#000',
    primary: '#fd8118',
    // more colors
  },
};

const vuetify = createVuetify({
  theme: {
    themes: {
      myTheme,
    },
  },
  components,
  directives,
});

createApp(App).use(router).use(store).use(vuetify).mount('#app');

然而,我可以将我的主颜色应用到按钮上,所以主题应该设置正确:

<v-btn theme="myTheme" color="primary">This button has the correct color</v-btn>

我还可以将开关的颜色更改为默认颜色:

// this works
<v-switch color="orange" inset></v-switch>
hgqdbh6s

hgqdbh6s1#

当你创建主题时,你没有将它设置为默认主题,如文档here中所示
下面示例应该适合您

import { createApp } from 'vue'
import { createVuetify, ThemeDefinition } from 'vuetify'

const myTheme = {
  dark: true,
  colors: {
    background: '#212126',
    surface: '#000',
    primary: '#fd8118',
    // more colors
  },
}

export default createVuetify({
  theme: {
    defaultTheme: 'myTheme',
    themes: {
      myCustomLightTheme,
    }
  }
})

相关问题