/js-light-dark-theme-toggle

Small project that shows the possibility to switch from light to dark mode and vice versa.

Primary LanguageCSS

Light Dark Theme Toggle

Table of contents

General info

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.

Technologies

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

Demo

Resources