Dark mode transition speed

Radzen.Blazor Components
1

When using the RadzenAppearanceToggle component to transition to/from dark mode, the default transition speed is very fast and can be rather jarring for people. Is there a recommended approach that the Radzen community can recommend to make the color changes from dark mode to light mode a little slower?

2

Hi @MikeTheSnowman,

Changing the theme is just replacing one <link> element with another <link> element. As far as I know there isn't a way to make that slower.

3

Thanks for your speedy reply @korchev .
I tried adding the following CSS, and I'm able to get a result that is mostly successful:
body * { transition: background-color 1.0s ease, color 1.0s ease !important; }

As I said, this mostly works, but one issue I found is that the color of text/font appear to transition as a much slower speed compared to the background color... So far I haven't been able to figure out why this happens. Any ideas on this would be welcomed!

Here's what the transition from dark mode to light mode looks like with my CSS update:
After Updating CSS

4

Okay, after a lot of fiddling, I think I've figured it out, though I'm sure that there is someone out there who can point out a better way of doing this.

In my site.css file, I've added the following lines of css which have been able to accomplish almost everything that I've been wanting to do:

body * {
    transition: background-color 1.5s ease !important;
}

h1, h2, h3, h4, h5, h6, p, span, i, th, tr {
    transition: color 1.5s ease !important;
}

While not perfect, the end result looks like this for me:
After Updating CSS - Better