Skip to content

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

License

Notifications You must be signed in to change notification settings

ditdot-dev/dark-mode-example

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.