Changing color modes happens in steps

[Ragura]

It seems that changing from dark to light mode or vice versa happens in two or three steps, making the process a little jarring for visitors. First the background changes, then once that's finished we can see the text gradually change to the fitting colors in a cascade of transitions. Perhaps a problem with chaining animations or a variable changing only after the background has transitioned?

[mrcrmn]

This only seems to be an issue on Chrome. On Firefox the animation works as intended. I wan't able to figure out the reason for it yet though. But I'll look into it.

[Ragura]

Happens to me on Safari as well though. Just tested in Firefox Developer Edition and you're right, the issue doesn't exist there. Oh boy, fun one to debug. Still, the jarring transition is a turn-off for dark mode right now.

[brandonpittman]

It would seem Chrome requires the properties being transitioned to be declared on the element itself when using a duration.

Check out this demo:

https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_animate1

Change the button color on hover → everything's delayed. Change the button's span and the after color at the bottom of the style block, and the transitions are smooth and in sync.

So doing:

* {
    transition-duration: 200ms;
}

Just won't work. You'll need to declare the transitioning properties on each element. By this, I mean:

<h1 class="text-4xl text-center text-ui-typo lg:text-5xl">
    Great Documentation starts here.
</h1>

With the text-ui-typo class on each text element. Otherwise, the durations will cascade down in a staggered fashion.

[mrcrmn]

Very interesting. Thanks for contributing! :)