Nightly.js
A zero dependency Javascript library for enabling dark/night mode in you UI.
Usage
- Include Nightly.js
-
Via
<script/>
tag<!-- Download this repository then use "dist/nightly.min.js" --><!-- Or use CDN --> -
Or if you prefer npm:
npm install --save nightly.js
Then include it
var Nightly = ;
-
In you main Javascript file initiate the object
-
Using default Parameters with persistence disabled:
var Nightly = ; -
Or can customize your parameters
The first parameter is to customize default settings and the second is to enable persistence
var nightModeConfig =body: 'backgorund color' // Default: #282828texts: 'texts color' // Default: #f5f5f5inputs:color: 'text color inside inputs' // Default: #f5f5f5backgroundColor: 'background color' // Default #313131buttons:color: "button's text color" // Default: #f5f5f5backgroundColor: "button's backgournd color" // #757575links: 'links color (normal state)' // Default: #009688classes:// Classes to apply when enabling the dark mode on certain elementsapply: 'my-selected-class' // just the class name (without the .)to: '.my-dark-class-to-the-selected-class .some-nested-class' // uses querySelectorAllapply: 'another-selected-class'to:'.another-dark-class-to-the-selected-class.some-class .some-nested-class';var Nightly = nightModeConfig true; // To disable persistence, set false instead of true
-
-
Call the
darkify()
or thetoggle()
function
// To enable the dark modeNightly; // To disable the dark modeNightly; // Toggle between dark and light modeNightly;
- You can also pass callbacks to
darkify()
,lightify()
. Andtoggle()
takes two callbacks (enableDarkModeCallback, enableLightModeCallback), for example:
var { console;}; var { console;}; // Pass sayGoodMorning() as callback to darkifyNightly; // toggle() takes two callbacks (darkifyCallback, lightifyCallback)Nightly;
Example
In our first example we created a simple page as the following:
Hello, world ! Toggle Please, Click here Your name
Then The result was as the following:
We included nightly.js
just before closing the body
tag, we initiate Nightly object with no arguments,
then we set an event listener to a button to execute our toggle()
method, that switches between darkify()
and lightify()
The result was as the following:
TODO
- Add state persistence: use localstorage
- Add supported browsers section after testing it
- Improve usage section
- Document and refactor the code
- Continue writing tests
- Write plugins for frameworks like Bootstrap - [ ] Bootstrap - [ ] Foundation - [ ] Materialize
License
This project is licensed under the GNU GPL v3.0 License - see the LICENSE file for details