ASwitch to toggle dark mode

[Sandros94]

I would like to say that I'm still quite new to Nuxt, Vue and javascript in general, so I hope to not offend anyone.

Inspired by this little switch built-in vitepress

I wanted to create my own using my current config: Nuxt, UnoCSS, Anu and Color Mode (the latter to automatically add a dark class to the html while using classSuffix: '',). And here the trouble began 5 hours ago...

While testing a simple ARadial everything worked fine:

<template>
  <div class="flex flex-wrap gap-4">
    <ARadio v-model="colorMode.preference" value="system" label="System"/>
    <ARadio v-model="colorMode.preference" value="light" label="Light"/>
    <ARadio v-model="colorMode.preference" value="dark" label="Dark"/>
  </div>
</template>

<script setup>
const colorMode = useColorMode()
</script>

But for the ASwitch, maybe since it has only a boolean v-model, nothing worked:

<template>
  <div>
    <ASwitch v-model="toggle"/>
  </div>
</template>

<script setup>
const colorMode = useColorMode()
let toggle = ref(colorMode.value === "dark" ? true : false)
colorMode.preference = (toggle === true) ? "dark" : "light"
</script>

As you can see I would like to read the colorMode.value first, so I can easily set the switch to an active state if needed and then use colorMode.preference to set it either to dark or to light (ideally I would like to default the switch to a system state, that has a fallback to light, and switch to the non used one, if it makes sense).

[Sandros94]

I'm realizing only now how much I still need to learn about javascript. While looking at others people code about similar tools I've been able to at least make the switch work with:

<template>
  <div>
    <ASwitch v-model="themeToggle" />
  </div>
</template>

<script>
export default {
	data() {
		return {
			colorMode: useColorMode()
			themeToggle: false,
		}
	},
	watch: {
		themeToggle(newValue) {
			this.colorMode.preference = newValue ? 'dark' : 'light';
		}
	},
}
</script>

But since I'm using Nuxt mainly for smaller boilerplates (and more battery-included) I've managed somehow to shrink it down like this:

<template>
  <div>
    <ASwitch v-model="themeToggle" />
  </div>
</template>

<script setup>
const colorMode = useColorMode()
const themeToggle = ref(false)

watch(themeToggle, (newValue) => {
	colorMode.preference = newValue ? 'dark' : 'light'
})
</script>

Now, I firstly need to figure out a way to give the default position of the switch from colorMode.value and then to prevent colorMode.preference to be set to dark while system is already in dark.

[Sandros94]

So, this is a strange one... if I set const themeToggle = ref(colorMode.value === 'dark'); as below

I get the ASwitch visibly disabled, but actually it's value is enabled so at first click it correctly switches me to the Light theme (since I'm already in the dark one).
The only way I've seen the ASwitch become visibly active (on page load) is by defining it with ref(true)

[Sandros94]

Ok no, maybe the inconvenience is something else, cuz on page load the colorMode.value is system

[Sandros94]

Ok looks like I was reinventing the wheel.
Vue does provide a built in feature to bind a checkbox to specific string for when it's true or false, but ASwitch (nor ACheckbox) doesn't take advantage of it.

Checkbox

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no" />

true-value and false-value are Vue-specific attributes that only work with v-model. Here the toggle property's value will be set to 'yes' when the box is checked, and set to 'no' when unchecked. You can also bind them to dynamic values using v-bind:

<input
  type="checkbox"
  v-model="toggle"
  :true-value="dynamicTrueValue"
  :false-value="dynamicFalseValue" />