CODEWITHSUNDEEP
vuetify.jsvuetifyjs3
Felix
Felix

Reputation: 19

Change Vuetify 3 theme colors on runtime

I have an app in which i use custom vuetify themes and i'd like to be able to change some of the colors of those custom themes during runtime. I saw some posts here about people doing it with vuetify 2 but idk if thats still possible with the v3. Could someone help me with this? Thx

Upvotes: -1

Views: 154

Answers (2)

Yue JIN
Yue JIN

Reputation: 2067

The recommended way to change theme color is via useTheme composable.

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

const theme = useTheme()
theme.current.value.colors.primary = 'yourcolor'
</script>

Upvotes: 0

Felix
Felix

Reputation: 19

I figured it out : i exported the const vuetify = createVuetify(...) from main.ts and then imported it in the component where i wanted to change the color from (i think App.vue would be the most recommandable place for that) and did vuetify.theme.themes.value.light.colors.primary = "yourcolor";. Adapt the light with your theme name and primary with your color name.

Upvotes: -1

Related Questions