Mikulew / js-light-dark-theme-toggle

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

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

About

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


Languages

Language:CSS 54.5%Language:HTML 33.6%Language:JavaScript 11.9%