You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Currently, the dark mode is initiated by setting the data-bs-theme attribute on the html tag via some Javascript code.
Due to[1] latency in the execution of JS, this causes a flash.
Workaround
Hard-coding the dark theme as a default before the actual one is loaded would be a workaround, because a dark-then-bright flash is more bearable than a light-then-dark flash.
Better fix
To change bootstrap's behavior to use media queries instead of the data-bs-theme attribute, we need to set the sass attribute$color-mode-type: media-query;. That requires including a sass step in our webpack toolchain.
TODOs
workaround: set data-bs-theme="dark", check whether the rest works correctly
include sass in our webpack toolchain
set the attribute
remove the JS code (however, leave some code ensuring the local storage entries we used are deleted)
[1] unnecessarily high, but be that as it may
The text was updated successfully, but these errors were encountered:
lukasjuhrich
added
bug
🔨 web/ui
Things relating to Flask routes and Jinja templates
🔨 js
Things relating to javascript/typescript code (overlaps with component:ui)
labels
Aug 17, 2023
Currently, the dark mode is initiated by setting the
data-bs-theme
attribute on thehtml
tag via some Javascript code.Due to[1] latency in the execution of JS, this causes a flash.
Workaround
Hard-coding the dark theme as a default before the actual one is loaded would be a workaround, because a dark-then-bright flash is more bearable than a light-then-dark flash.
Better fix
To change bootstrap's behavior to use media queries instead of the
data-bs-theme
attribute, we need to set the sass attribute$color-mode-type: media-query;
. That requires including asass
step in our webpack toolchain.TODOs
data-bs-theme="dark"
, check whether the rest works correctly[1] unnecessarily high, but be that as it may
The text was updated successfully, but these errors were encountered: