search

remotemobprogramming / timer

A team timer for mob.sh.
https://timer.mob.sh
MIT License
23 stars 4 forks source link

White background flashes before dark one #34

Closed mightyiam closed 1 year ago

mightyiam commented 1 year ago

Something I noticed and did not confirm or look into further.

Could be that if the stylesheet is loaded synchronously prior to the content, this would possibly be prevented.

hollesse commented 1 year ago

This happens because the JavaScript which checks what color mode is used is at the end of the body. We could change that, but it could lead to longer loading time.

mightyiam commented 1 year ago

In theory, JavaScript is not necessary. Can be purely CSS.

https://css-tricks.com/dark-modes-with-css/ https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

hollesse commented 1 year ago

Correct in theory this works. As we use standard bootstrap this is not that easy. Bootstraps triggers the dark mode with a data attribute and as I understood it you need to set this attribute according to the mode you would like. At the moment we use the JavaScript of bootstrap to set this mode by the preferred color mode, but this also allows you to implement a button to change the mode manually.

mightyiam commented 1 year ago

Then I would load that JavaScript synchronously in the HEAD element. According to what you're describing I would expect that to be the recommendation.

hollesse commented 1 year ago

You are right. I just looked at the source code of the bootstrap docs. There you can find the script in the head of the page. See line 17 view-source:https://getbootstrap.com/docs/5.3/customize/color-modes/#sass-usage

hollesse commented 1 year ago

fixed in d9bcf84