Hey I have been troubleshooting this for a while but can't seem to figure it out. To give some context I am creating a dark mode for my site and I am using useDark from the vueuse library which is referenced here: useDark
essentially it checks localStorage then user preferences to find whether they prefer light or dark mode. it then provides a boolean ref that we can use to do whatever. also it applies the class dark to the html documentElement <html class="dark">.
so whats the problem, well i am using tailwindcss to create a toggle button that allows the user to switch between light and dark.
here is a stackblitz example: using ref not useDark
code reference:
<script setup>
import { useDark, useToggle } from '@vueuse/core';
import { ref } from 'vue';
const isDark = ref(true);
// const isDark = useDark();
const toggleDark = useToggle(isDark);
</script>
<template>
<button
class="h-8 w-16 pl-1 rounded-full bg-slate-300"
type="button"
@click="toggleDark()"
>
<div
class="h-7 w-7 rounded-full bg-slate-400 transition-all"
:class="{ 'translate-x-7': isDark }"
/>
</button>
</template>
this essentially does nothing when using a ref and that is intentional to show that the transition of that toggle works fine
the problem i am having is if you comment out the ref and use useDark ref instead there is no smooth transition. I have troubleshooted so much to get to this point and I am absolutely lost as to why.
one thing you can do to force it to work is adding!transition-all to the inner div giving it importance but I dont know if this is the correct fix or if i just worked around it. What I am looking for is why this is happening
I have tried adding the dark class to the documentElement but using only a ref and it seemed to work as well but then I would not be using useDark and also would need to manage my own localStorage and use preferences lookup.
also i have done it using raw css and i get the same incorrect behavior
After digging and creating an issue in the vueuse repo the solution was found below with an explanation.