Skip to content

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

Notifications You must be signed in to change notification settings

Mikulew/js-light-dark-theme-toggle

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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