CODEWITHSUNDEEP
vue.jsvuetify.jsvuejs3vuetifyjs3
Loránd Péter
Loránd Péter

Reputation: 314

How to apply my custom theme's color to a Vuetify switch component?

I'm using Vuetify 3.0.4 with Vue 3 and I want to apply a custom color via a custom theme to my <v-switch>. I want to apply my custom primary color to it.

What doesn't seem to work:

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

I defined my theme as:

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');

However I'm able to apply my primary color to a button, so the theme should be set up correctly:

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

Also I can change the switch's color to be a default one:

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

Upvotes: 0

Views: 1237

Answers (1)

Multi
Multi

Reputation: 195

while you are creating the theme you are not setting it as the default theme as shown in the documentation here

below example should work for you

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,
    }
  }
})

Upvotes: 0

Related Questions