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

Simple and fun dark-mode detection. JavaScript with a user mode toggle.
https://github.com/ditdot-dev/dark-mode-example

css-filters dark-mode dark-mode-switcher dark-mode-toggle dark-theme example fun javascript prefers-color-scheme star-wars

Last synced: 4 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/ditdot-dev/dark-mode-example
• Owner: ditdot-dev
• License: mit
• Created: 2020-06-29T14:04:41.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-11-17T16:37:32.000Z (almost 3 years ago)
• Last Synced: 2023-03-06T23:08:57.817Z (over 1 year ago)
• Topics: css-filters, dark-mode, dark-mode-switcher, dark-mode-toggle, dark-theme, example, fun, javascript, prefers-color-scheme, star-wars
• Language: CSS
• Homepage:
• Size: 229 KB
• Stars: 28
• Watchers: 3
• Forks: 9
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://www.ditdot.hr/demo/dark-mode-example)

## Clone

Clone this repo to your local machine 

```shell

$ 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](https://www.ditdot.hr/en/dark-mode-website-tutorial)

## Stay in Touch

* [Twitter](https://twitter.com/ditdot_info)

* [DITDOT](https://www.ditdot.hr/en)

## License

[MIT](https://github.com/ditdot-dev/dark-mode-example/blob/master/LICENSE) license.

Copyright (c) 2020 - present, DITDOT Ltd.