Question

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

Answer 1

After digging and creating an issue in the vueuse repo the solution was found below with an explanation.

https://github.com/vueuse/vueuse/issues/3233

Answer 2

What you need is a watch to watch the state of prefrence of user. It s a good idea to implement a watch to track the user s preference. By doing this, you can control the timing and order of operations when the preference changes, which will help address the issue with the transition not occurring smoothly.

Here s an example of how you might update your script:

<script setup>
import { useDark, useToggle } from  @vueuse/core ;
import { watch } from  vue ;

const isDark = useDark();

const toggleDark = useToggle(isDark);

// watch the isDark ref to manage transitions
watch(isDark, (newVal) => {
  // toggle the  dark  class on the documentElement after a delay
  setTimeout(() => {
    document.documentElement.classList.toggle( dark , newVal);
  }, 150);  
});
</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>

When isDark changes (i.e., when the user toggles the button), it triggers a function that waits for a short delay before toggling the dark class on the document. This delay ensures that the transition classes have been applied before the dark class is toggled, creating a smooth transition effect.

Hope this helps! ?

友情链接