dark-mode-example

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

dark-mode-example

★ 41 Open GitHub ↗

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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.

dark-mode-example

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README