nickdeny / Darkmode Js
Licence: mit
DarkModeJS helps you to auto detect user's time and switch theme to darkside
Stars: ✭ 328
Programming Languages
javascript
184084 projects - #8 most used programming language
js
455 projects
Projects that are alternatives of or similar to Darkmode Js
bs-breakpoints
A plugin which detect Bootstrap 4 breakpoints and emit when there is a change
Stars: ✭ 22 (-93.29%)
Mutual labels: vanilla-javascript, vanilla-js
vanillajs-hello
Start a VanillaJS website using WebPack in just 30 seconds: HTML,CSS,Babel,SASS,Bootstrap,Prettier,Gitpod
Stars: ✭ 24 (-92.68%)
Mutual labels: vanilla-javascript, vanilla-js
vanilla-js-drawer
A dependency-free Vanilla JS drawer. No dependencies, no automation build tools.
Stars: ✭ 20 (-93.9%)
Mutual labels: vanilla-javascript, vanilla-js
mm-components
Music Markups components
Stars: ✭ 50 (-84.76%)
Mutual labels: vanilla-javascript, vanilla-js
Vanilla Datatables
A lightweight, dependency-free javascript HTML table plugin
Stars: ✭ 314 (-4.27%)
Mutual labels: vanilla-js, vanilla-javascript
tablist
WAI-ARIA tab plugin without dependencies.
Stars: ✭ 21 (-93.6%)
Mutual labels: vanilla-javascript, vanilla-js
spider-covid-19-viz-3d
Speedy access to the latest, local COVID-19 data with a familiar interface: the Globe
Stars: ✭ 19 (-94.21%)
Mutual labels: vanilla-javascript, vanilla-js
LC-switch
Superlight vanilla javascript plugin improving forms look and functionality
Stars: ✭ 31 (-90.55%)
Mutual labels: lightweight, vanilla-javascript
Selectr
A lightweight, vanilla javascript select box replacement. No dependencies.
Stars: ✭ 293 (-10.67%)
Mutual labels: vanilla-js, vanilla-javascript
pAppwords
Vanilla JS plug-in with zero configuration integrate with HaveIBeenPwned API v2
Stars: ✭ 21 (-93.6%)
Mutual labels: vanilla-javascript, vanilla-js
event-driven-web-components-realworld-example-app
Exemplary real world application built with Vanilla JS Web Components in an Event Driven Architecture
Stars: ✭ 55 (-83.23%)
Mutual labels: vanilla-javascript, vanilla-js
Vanillajs Spa
a simple SPA in vanilla js
Stars: ✭ 265 (-19.21%)
Mutual labels: vanilla-js, vanilla-javascript
eins-modal
Simple to use modal / alert / dialog / popup. Created with pure JS. No javascript knowledge required! Works on every browser and device! IE9
Stars: ✭ 30 (-90.85%)
Mutual labels: vanilla-javascript, vanilla-js
periodic-table.io
periodic-table.io
Stars: ✭ 37 (-88.72%)
Mutual labels: vanilla-javascript, vanilla-js
tensorflowjs-remove-background
Remove Background from the picture using WebAssembly & TensorFlow.js
Stars: ✭ 79 (-75.91%)
Mutual labels: vanilla-javascript, vanilla-js
tabbis.js
Pure vanilla javascript tabs with nesting
Stars: ✭ 44 (-86.59%)
Mutual labels: vanilla-javascript, vanilla-js
jpopup
Simple lightweight (<2kB) javascript popup modal plugin
Stars: ✭ 27 (-91.77%)
Mutual labels: lightweight, vanilla-javascript
coding challenge-14
Understanding JavaScript and coding without the help of a library or tool
Stars: ✭ 22 (-93.29%)
Mutual labels: vanilla-javascript, vanilla-js
zoom
Lightweight (8 Kb) ES5 javascript plugin without any dependencies, compatible with desktop and mobile devices.
Stars: ✭ 25 (-92.38%)
Mutual labels: lightweight, vanilla-javascript
Bs Stepper
A stepper for Bootstrap 4.x
Stars: ✭ 261 (-20.43%)
Mutual labels: vanilla-js, vanilla-javascript
DarkModeJS
Lightweight and cross-browser DarkModeJS helps you to auto detect user's time and switch theme to darkside. Also, it's weight only 2.39KB (1.05KB gzipped) and written on pure Javascript, without any plugins and jQuery!
Demo
You can test on: https://nickdeny.github.io/darkmode-js/
Documentation
Just copy-paste this code to end of body tag:
<script src="darkmode.js"></script>
<script>var DarkMode = new DarkMode();</script>
Or use it with options:
<script src="darkmode.js"></script>
<script>
var options = {
light: "light.css",
dark: "dark.css",
startAt: "23:00",
endAt: "06:00",
checkSystemScheme: true,
saveOnToggle: true
};
var DarkMode = new DarkMode(options);
</script>
To display light theme for non-javascript user just copy-paste it to head (if you separate themes into light/dark stylesheets):
<noscript>
<link rel="stylesheet" type="text/css" href="light.css">
</noscript>
Options
Option | Description | Default | Type |
---|---|---|---|
light | Path to light stylesheet | false |
String / Boolean |
dark | Path to dark stylesheet | false |
String / Boolean |
startAt | Time to start Dark theme | "21:00" | String |
endAt | Time to end Dark theme | "06:00" | String |
checkSystemScheme | Check System Scheme | true |
Boolean |
saveOnToggle | Save current Mode on Toggle (Local Storage) | true |
Boolean |
Events
Event | Description |
---|---|
getMode() |
Get current Mode |
setMode("light"/"dark") |
Set Mode |
isModeSaved() |
Check is Mode saved (Local Storage) |
clearSavedMode() |
Remove Mode value (Local Storage), reinit Mode |
toggleMode() |
Toggle current Mode |
getSystemScheme() |
Get System Scheme (Returns light /dark /auto ) |
Author
nickdeny – https://nickdeny.com/
Read us on Telegram[RU] – https://t.me/webdevblog
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].