midudev / midu.dev

midu.dev blog 📝
https://midu.dev
GNU General Public License v3.0
385 stars 160 forks source link

feat: darkmode improvements #122

Closed felixicaza closed 1 year ago

felixicaza commented 1 year ago

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 the scheme 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

Show sun on dark mode: dark mode

vercel[bot] commented 1 year ago

@Felix-Icaza is attempting to deploy a commit to the midudev pro Team on Vercel.

A member of the Team first needs to authorize it.