This is solved added an small inline script in head (darkmode.html). It evaluates whether the scheme key exists in localStorage or the user's preference in their OS configuration, adding the scheme attribute immediately in <html> tag and before downloading and parsing the CSS.
[x] add keyboard shortcut for toggle dark mode scheme
Added the keyboard shortcut Alt+shift D (or Option+Shift D on Mac) to toggle theme schema.
This is caused by the late evaluation of the previous script for dark mode, so emulating the connection in 3G causes FOUC between some views.
See issue in action:
https://user-images.githubusercontent.com/38303370/213938006-acd0429b-3464-4a60-8ba6-71eec4ab4564.mp4
This is solved added an small inline script in head (darkmode.html). It evaluates whether the
scheme
key exists in localStorage or the user's preference in their OS configuration, adding thescheme
attribute immediately in<html>
tag and before downloading and parsing the CSS.Added the keyboard shortcut Alt+shift D (or Option+Shift D on Mac) to toggle theme schema.
https://user-images.githubusercontent.com/38303370/213940805-2887cafe-a3a9-40df-9094-c6ee4282a043.mp4
A system configuration listener that detect the user preference, for accessibility reasons.
https://user-images.githubusercontent.com/38303370/213938740-87edf82e-a571-49e4-9582-21da3c641428.mp4
Show moon on light mode:![light mode](https://user-images.githubusercontent.com/38303370/213944470-fb142678-94e8-4d44-9481-91757e0d690d.jpg)
Show sun on dark mode:![dark mode](https://user-images.githubusercontent.com/38303370/213944471-16d0d01e-3791-4c8c-afd3-4d3b9658f692.jpg)