Visual glitches when switching between the color themes

Blind4Basics commented 2 years ago

I don't know how css animations work so I'll just make some guesses...

Kyu/rank badges

When switching beetween the two modes, it looks (to me) like the inner background color of this div is animated while its before and after sections aren't. This is causing a weird looking animation involving an inner rectangle whose the bkg color is animated while the bkg color of the "hex" thing is changed "one shot".

Other unanimated parts in the dashboard:

the slider on the right isn't animated and is changing of color very arbuptly at the end of the... "global animation", let's say
the text of the TRAIN button isn't animated while everything around is (edit: I just realized that's the "normal" behaviour for text... that still looks a bit weird with the skip button just after it). About that one, I have a suggestion: using a transparent color for the text, so that it evolves with the color of the animated bkg
EDIT: the fork button, in kumites is subject to the same "problem":

In the kata search page:

I couldn't spot what tag/css class is involved in this one... I believe it's directly on the body tag, but not sure: The animation when switching from one mode to the other (both ways) is ending on a wrong grayish color, then is updated after the end of the animation to the actual true bkg color (which is very different x) ).

Side question: is that normal that the vertical menu bar stays in dark mode when the user is in light mode?

┆Issue is synchronized with this Clickup by Unito

kazk commented 2 years ago

The theme transition is done with:

html.theme-transition,
html.theme-transition *,
html.theme-transition *:before,
html.theme-transition *:after {
  transition: background 500ms !important;
  transition-delay: 0 !important;
}

and some JS that toggles that class when switching themes. I don't think it's possible to fine tune this. It also seems to be browser-dependent.

Kyu/rank badges

Yeah, I don't like how it's done with CSS to begin with. It breaks if you zoom too. I'd replace with an SVG eventually.

Side question: is that normal that the vertical menu bar stays in dark mode when the user is in light mode?

It's normal. Uses a different color too. It's pretty common for light theme to have main app menu with dark background (e.g., GitHub). I don't think the sidebar looks good with a significantly lighter background, but if you have suggestions, you can open a new issue about it.

Blind4Basics commented 2 years ago

Yeah, I don't like how it's done with CSS to begin with. It breaks if you zoom too. I'd replace with and SVG eventually.

oops, I just filled another issue about that, yeah x)

It's normal.

:+1:

codewars / codewars.com