$coloMode.value being change with explicitly doing so?

[jakhsu]

Hi,

I couldn't reproduce the problem so thought I should file a question instead.

I'm following the minimal example provide in doc:

<template>
    <div>
        <p>Color mode: {{ $colorMode.value }}</p>
        <select v-model="$colorMode.preference">
            <option value="system">System</option>
            <option value="light">Light</option>
            <option value="dark">Dark</option>
            <option value="sepia">Sepia</option>
            <option value="lemon">Lemon</option>
        </select>
    </div>
</template>

<script setup>
let colorMode = useColorMode()

console.log(colorMode)

</script>

<style>
body {
    background-color: #fff;
    color: rgba(0, 0, 0, 0.8);
}

.dark-mode body {
    background-color: #091a28;
    color: #ebf4f1;
}

.dark-mode .color-input {
    color: #091a28
}

.sepia-mode body {
    background-color: #f1e7d0;
    color: #433422;
}
</style>

But I get hydration mismatch error:

- Client: Color mode: system
- Server: Color mode: light 

I tried to log the colorMode.value and colorMode.preference and when preference is set to system, value is also system but only for a split second and then will turn into light.

This doesn't happen with other colors, only for system and light. Have no idea what's altering colorMode.value

[jakhsu]

Reading the doc more I realised that (https://color-mode.nuxtjs.org/#configuration) the module is probably detecting my system preference, which I haven't touched so would result in light being injected into colorMode.value. I used the chrome devtool to emulate a dark mode preference and indeed colorMode.value is being set as dark now.

So I suppose $colorMode.value shouldn't be directly set or used in template as it might cause template mismatch? Not sure if the doc example needs to be changed.