Description#
A couple of days ago, while writing a homepage in Vue, I thought about using useDark to implement dark mode. However, I encountered an interesting issue: when using the slider switch to control dark mode, I found that the transition effect of the slider switch was not working. Why is that? Because the transition was disabled, there was no transition effect.
Cause/Solution#
You can click here to check the source code.
After some searching, I found the cause of the issue in this Issues. The issue occurred because userColorMode disables the transition when handling changes and then re-enables it. When creating useDark, the disableTransition option in the options is set to disable the transition, and its default value is true, which leads to the absence of transition animations. Therefore, simply passing in disableTransition as false by default will resolve the issue.
const isDark = useDark({ disableTransition: false })
You can use it like this in your project:
Alright, mission accomplished. See you next time!