feat: vitepress style switch implementation

[sandros94]

So, while I'm switching from TailwindCSS-HeadlessUI to UnoCSS-Anu, I was reading the latter's docs and fell in love with the native VitePress toggle to switch to the dark/light mode.

Skipping this inconvenient and styling, I've found that creating such a toggle is super simple:

<input v-model="colorMode.preference" true-value="dark" false-value="light" type="checkbox" />

Now, the problem I'm getting is that if I use colorMode.preference as the v-model, and System is set as the preference, the toggle will not respect either light/dark state. But if I use colorMode.value as v-model I will get the right true state but I lose the ability to save the preference cookie in the browser.
How should I approach this?

I hope not to offend anyone, since my knowledge in javascript is only a few months old, but I'm loving the fact that most of the Vue/Nuxt components let me skip most of the js coding.

[sandros94]

To update on this:

Currently, when colorMode.preference is not set to 'system' and it's equal to colorMode.value I cannot know what the device is currently using.

To make an example:

<template>
    <ClientOnly>
        <template #fallback>
            <ASwitch v-model="off" off-icon="i-svg-spinners:clock"/>
        </template>
        <ASwitch v-model="switchTheme" off-icon="i-ph:sun" on-icon="i-ph:moon"/>
    </ClientOnly>
</template>

<script setup>
const colorMode = useColorMode();
const off = ref(false)
const switchTheme = computed({
    get: () => colorMode.value === 'dark',
    set: (value) => {
        if (colorMode.preference === 'system') {
            // Set the opposite of the current system value
            colorMode.preference = value ? 'dark' : 'light';
        } else {
            // Set the preference back to 'system'
            colorMode.preference = 'system';
        }
    }
});
</script>

The ASwitch component works on a true/false state, and the computed above lets me switch between system and non-system. But in the case that someone would manually switch to the non-system theme and later his/her device system theme switches to that same theme, we currently don't have a way to know it. Am I right?

P.S.: I'm not using ColorScheme so that I can load either a dummy switch (like I did) or just an icon using UnoCSS), but this implementation should be achieving the same if I understood it correctly.