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

Clone this repo to your local machine

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

Full Dark Mode Tutorial and More Examples

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

Stay in Touch

• Twitter
• DITDOT

License

MIT license.

Copyright (c) 2020 - present, DITDOT Ltd.