color-mode
color-mode copied to clipboard
nuxt-modules
Hooks for when color scheme changes
I want to be able to apply a css transition when the color mode changes, but there doesn't seem to be an easy way to do that without forking the color mode module. I have already considered doing the css transitions in the button that changes the color mode, but then it will not transition if the system theme changes.
I think it would be nice if there was some way of running code before the color scheme changes.
Let me clarify what I want to do. I currently have something like this in my global css:
* {
transition: background-color 0.5s;
}
.preload * {
transition: none !important;
}
The preload class is given to <body> on ssr, then removed after the client mounts.
This isn't really ideal, since if I don't want an element to have a background transition then I have to explicitly specify that, or if I want an element to have a transition when the page is mounting (ie a loader/transition) then I have to override the !important, which soon becomes a mess.
It would be nice if I could apply a transition class to <body> only when the color mode changes and remove it after the transition is finished.
A way I could do this is by applying the class when someone clicks on the button to change the scheme, but then you don't get a transition when the color mode is system, and the user changes their default color mode.
I am using a transition for the example and does not have any issue:
https://codesandbox.io/s/github/nuxt-community/color-mode-module?file=/example/assets/main.css:657-693
You can create a plugin colorMode.client.js and use $colorMode.watch if you want advanced usage:
export default function ({ $colorMode }) {
$colorMode.$watch("value", (c) => {
console.log("$colorMode.value is", c);
});
}