Search code examples
vue.jsvuejs3vuetify.js

How to change theme colors in vuetify3 dynamically?

In vue2 you were able to change theme colors like this:

// Light theme
this.$vuetify.theme.themes.light.primary = '#4caf50'

// Dark theme
this.$vuetify.theme.themes.dark.primary = '#4caf50'

https://v2.vuetifyjs.com/en/features/theme/#customizing

How to achieve this inside of vue3? I am looking / trying since 2 hours but nothing works. I can't find a way to access the vuetify instance and I also can't find a way to access the themes.

The use case is that a user is logging in, then his branding information is retrieved and then theme is set (that would be my other option, register a theme after the fact) / updated (primary and secondary color update).

Solution

  • You can use the useTheme composable to change your theme :

    <script setup>
import { useTheme } from 'vuetify'

const theme = useTheme()

// then in a function or a lifecycle hook do :

theme.themes.value.light.colors.primary = '#4caf50'

</script>

    Online demo