• General info
• Technologies
• Demo
• Resources

In people with normal vision (or corrected-to-normal vision), visual performance tends to be better with light mode, whereas some people with cataract and related disorders may perform better with dark mode.

Definition: Contrast polarity is a term used to describe the contrast between the text and the background:

Positive contrast polarity (light mode) refers to dark-font text on light background. Negative contrast polarity (dark mode) denotes the combination of light (e.g., white) text on dark (e.g., black) background.

Dark-mode displays emit less light than light-mode ones (and, because of that, they might extend battery life). But the amount of light in the environment influences not only power consumption, but also our perception.

I made a small project that shows the possibility to switch from light to dark mode and vice versa. I learned a lot and found out that you can use the default settings in the operating system to display the preferred mode in the browser with prefers-color-scheme.

• HTML5
• CSS3 (prefers-color-scheme)
• JavaScript (ES6+, LocalStorage)

• see here

• Wikipedia: Light-on-dark color scheme
• MDN: prefers-color-scheme
• web.dev: prefers-color-scheme: Hello darkness, my old friend
• CanIUse: prefers-color-scheme
• How to create a custom Toggle Switch using CSS
• CSS Tricks: A Complete Guide to Dark Mode on the Web
• Dark Mode vs. Light Mode: Which Is Better?
• Adding Dark Mode Toggle To Your Website
• Set your Web App to Dark/Light Mode based on User System Settings
• academind: Adding Dark Mode with CSS & JavaScript
• codyhouse: How to create a dark\light mode switch in CSS and Javascript
• Coding Artist: Dark & Light Mode Toggle | HTML, CSS & Javascript
• Florin Pop: Light/Dark Theme Toggle with CSS and JavaScript
• Dark Theme z localStorage i CSS variables! 🌓 Tutorial HTML CSS i Javascript dla początkujących!
• Web Dev Simplified: How To Build An Advanced Light/Dark Theme Toggle
• Kevin Powell: Dark Mode JavaScript toggle using localStorage
• Online Tutorials: CSS Custom Checkbox | Day Night Mode
• Angela Delise: Dark Mode Toggle | HTML CSS JS Tutorial