Avoid theme flicker if system setting is dark #1449
Conversation
|
I'm not a CSS guru, if somebody knows a better way to reuse the dark theme variables inside and outside the media query block, that would be nice. |
|
I don't think this is the right approach. Also, I think it was fixed in #1443. |
|
Why don't you think it's the right approach? #1443 didn't fix the issue completely, this does. |
|
The problem is very likely coming from JS, not from CSS. If the JS changes the theme before the page content rendering starts (like we do in rustdoc for example), then no more flickering. Also, no clue if the website new code was deployed or not. |
I checked locally, there is still flickering on master. I don't know how rustdoc does it, might have to look into it. |
Previously, `@media (prefers-color-scheme: dark)` was only used in the `noscript` stylesheet, but that's the best way to immediately set the dark theme without any flickering. That is now integrated into the the main stylesheet. The flickering is still present if the user has a default system setting of light mode but explicitly set it to dark. Actually, this introduces flickering from dark to light if the user has a system setting of dark but an explicit override of light. So it goes both ways. I think this is a good tradeoff, most users will want the website to just follow the system setting. The `theme-switch.js` can also be simplified a little, since it's not necessary anymore to set the `data-theme` attribute if there is no explicit override.
senekor
force-pushed
the
senekor/wrkqsmkoytlk
branch
from
8db178d to
2590e94
Compare
|
JS could be simplified as well, which has the additional side effect that the page immediately reacts to changed system preferences without a page reload. (not saying that's an important use case) |
|
Yeah rustdoc seems to handle it very well. Gonna try to copy that. Edit: rustdoc does some pretty sophisticated stuff, e.g. sending events to other windows... imo overkill for the blog. |
|
superseded by #1450 |
Previously
@media (prefers-color-scheme: dark)was only used in thenoscriptstylesheet, but that's the best way to immediately set the dark theme without any flickering. That is now integrated into the the main stylesheet.The flickering is still present if the user has a default system setting of light mode but explicitly set it to dark. Actually, this introduces flickering from dark to light if the user has a system setting of dark but an explicit override of light. So it goes both ways. I think this is a good tradeoff, most users will want the website to just follow the system setting.