Enable Dark Mode with prefers-color-scheme media query in JavaScript. Includes a switch to override the mode.

Animated example of dark mode feature implemented with prefers-color-scheme and checked programatically with window.matchMedia() JavaScript method.

• detects the preferred mode based on the color scheme preference set at the system level using JavaScript
• colors are inverted with filter: invert(100%)
• mode switch overrides the preference set in the system
• activation of dark mode triggers the animation
• Live Demo

Clone this repo to your local machine

$ git clone https://github.com/ditdot-dev/dark-mode-example.git

• Dark Mode - The prefers-color-scheme Website Tutorial

• Twitter
• DITDOT

MIT license.

Copyright (c) 2020 - present, DITDOT Ltd.