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)
- 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