/dark-mode-example

Simple and fun dark-mode detection. JavaScript with a user mode toggle.

Primary LanguageCSSMIT LicenseMIT

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.

Dark Mode Screenshot

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

Stay in Touch

License

MIT license.

Copyright (c) 2020 - present, DITDOT Ltd.