Skip to content

Latest commit

 

History

History
41 lines (25 loc) · 1.31 KB

README.md

File metadata and controls

41 lines (25 loc) · 1.31 KB

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.