GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → ditdot-dev → dark-mode-example

ditdot-dev / dark-mode-example

Licence: MIT license
Simple and fun dark-mode detection. JavaScript with a user mode toggle.

Programming Languages

CSS
56736 projects
HTML
75241 projects
javascript
184084 projects - #8 most used programming language

Labels

funstar-warsdark-themeexamplecss-filtersdark-modeprefers-color-schemedark-mode-switcherdark-mode-toggle

Projects that are alternatives of or similar to dark-mode-example

Deep-DarkFantasy
Global Dark Mode for ALL apps on ANY platforms.
Stars: ✭ 16 (-40.74%)
Mutual labels:  dark-theme, dark-mode, dark-mode-toggle
bulma-prefers-dark
Bulma prefers dark theme
Stars: ✭ 169 (+525.93%)
Mutual labels:  dark-theme, prefers-color-scheme
dark
🌛 Dark themes / mode for Rambox, Franz or Ferdi messaging services
Stars: ✭ 93 (+244.44%)
Mutual labels:  dark-theme, dark-mode
Darkreader
Dark Reader Chrome and Firefox extension
Stars: ✭ 12,052 (+44537.04%)
Mutual labels:  dark-theme, dark-mode
llDark
适用于iOS深色模式的令人愉快的主题框架
Stars: ✭ 75 (+177.78%)
Mutual labels:  dark-theme, dark-mode
tailwind-theme-switcher
Basic demo on how to switch styles with Tailwind, handy for dark mode type purposes.
Stars: ✭ 164 (+507.41%)
Mutual labels:  dark-theme, dark-mode
mantine
React components library with native dark theme support
Stars: ✭ 4,390 (+16159.26%)
Mutual labels:  dark-theme, dark-mode
hash-dark-vscode
A minimal dark vscode theme inspired by Hashnode blog syntax highlighting.
Stars: ✭ 12 (-55.56%)
Mutual labels:  dark-theme, dark-mode
StarWarsArrays.jl
Arrays indexed as the order of Star Wars movies
Stars: ✭ 93 (+244.44%)
Mutual labels:  fun, star-wars
vue-dark-mode
A component that helps to implement dark mode and other color modes in your Vue application.
Stars: ✭ 48 (+77.78%)
Mutual labels:  dark-mode, prefers-color-scheme
charmed-dark-xcode-theme
A charming and colorful dark theme for Xcode 🌈.
Stars: ✭ 172 (+537.04%)
Mutual labels:  dark-theme, dark-mode
Turn-Off-the-Lights-Firefox-extension-WebExtensions
Firefox extension (WebExtensions)
Stars: ✭ 19 (-29.63%)
Mutual labels:  dark-theme, dark-mode
sketch-dark-mode
Generate a dark mode version of any Sketch document, the right way.
Stars: ✭ 58 (+114.81%)
Mutual labels:  dark-theme, dark-mode
DarkModeSplashScreen
A sample app for iOS and Android written in Xamarin.Forms showing how to implement a Splash Page for Dark Mode
Stars: ✭ 28 (+3.7%)
Mutual labels:  dark-theme, dark-mode
vuepress-theme-default-prefers-color-scheme
add prefers-color-scheme for vuepress default theme
Stars: ✭ 51 (+88.89%)
Mutual labels:  dark-theme, prefers-color-scheme
react-native-with-style
A styling package for easily adding themes to your React Native projects.
Stars: ✭ 17 (-37.04%)
Mutual labels:  dark-theme, dark-mode
Nozha-rtl-Dashboard
Nozha is a rtl / ltr Admin Panel with Dark Mode
Stars: ✭ 31 (+14.81%)
Mutual labels:  dark-theme, dark-mode
CustomTkinter
A modern and customizable python UI-library based on Tkinter
Stars: ✭ 1,626 (+5922.22%)
Mutual labels:  dark-theme, dark-mode
Halfmoon
Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and tools.
Stars: ✭ 2,583 (+9466.67%)
Mutual labels:  dark-theme, dark-mode
wluma
Automatic brightness adjustment based on screen contents and ALS
Stars: ✭ 290 (+974.07%)
Mutual labels:  dark-theme, dark-mode
View All Similar Projects ➔

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].