Dark Mode with prefers-color-scheme 🌗

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.

Features

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

MIT license.