Theme Switcher with Nuxt3

[jb-alvarado]

Hello,
I'm very new to vuetify and I wonder how you can add easily a theme switcher in Nuxt3.

The switcher function by it self is not the problem, but I wanted to use the @nuxtjs/color-mode module and load it values on page load/reload and apply that value to vuetify. At the moment when I load and apply the values like:

<script setup lang="ts">
import { useTheme } from 'vuetify'
import { useIndex } from '~/stores/index'

const colorMode = useColorMode()
const indexStore = useIndex()
const theme = useTheme()

onBeforeMount(() => { // <- onMounted() doesn't work to
    nextTick(() => {  // <- without is not working
        if (colorMode.preference === 'dark') {
            indexStore.darkMode = true
            theme.global.name.value = 'dark'
        } else {
            indexStore.darkMode = false
            theme.global.name.value = 'light'
        }
    })
})
</script>

It renders the the page very shortly in light mode (when light is the default theme) and switch then to dark, if dark is saved on localstorage.

Can you give me some hints of how to fix this?