Demo

• demo_000 (code)
• demo_100 / dark (code)
• demo_100 / light (code)
• demo_101 (code)
• demo_102 (code)
• demo_103 (code)

Reference

Article

• https://jason-memo.dev/posts/dark-mode-tips/
• https://wcc723.github.io/css/2019/12/22/css-dark-mode/
• https://yodalee.me/2021/03/2021_hugo_decoration/

MDN

• https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
• https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#view_media_rules_for_prefers-color-scheme

Misc

• https://muki.tw/tech/native-css-variables/
• https://ithelp.ithome.com.tw/articles/10228111

dev tool

• https://stackoverflow.com/questions/56401662/firefox-how-to-test-prefers-color-scheme

firefox

open

about:config

set

devtools.inspector.color-scheme-simulation.enabled property true