A zero dependency Javascript library for enabling dark/night mode in you UI.
## Usage
1. Include Nightly.js
- Via `` tag
```html
```
- Or if you prefer [npm](https://www.npmjs.com/package/nightly.js):
```
npm install --save nightly.js
```
Then include it
```javascript
var Nightly = require('nightly.js');
```
2. In you main Javascript file initiate the object
- Using default Parameters with persistence disabled:
```javascript
var Nightly = new Nightly();
```
- Or can customize your parameters
_The first parameter is to customize default settings and the second is to enable persistence_
```javascript
var nightModeConfig = {
body: 'backgorund color', // Default: #282828
texts: 'texts color', // Default: #f5f5f5
inputs: {
color: 'text color inside inputs', // Default: #f5f5f5
backgroundColor: 'background color', // Default #313131
},
buttons: {
color: "button's text color", // Default: #f5f5f5
backgroundColor: "button's backgournd color", // #757575
},
links: 'links color (normal state)', // Default: #009688
classes: [
// Classes to apply when enabling the dark mode on certain elements
{
apply: 'my-selected-class', // just the class name (without the .)
to: '.my-dark-class-to-the-selected-class .some-nested-class', // uses querySelectorAll
},
{
apply: 'another-selected-class',
to:
'.another-dark-class-to-the-selected-class.some-class .some-nested-class',
},
],
};
var Nightly = new Nightly(nightModeConfig, true); // To disable persistence, set false instead of true
```
3. Call the `darkify()` or the `toggle()` function
```javascript
// To enable the dark mode
Nightly.darkify();
// To disable the dark mode
Nightly.lightify();
// Toggle between dark and light mode
Nightly.toggle();
```
- You can also pass callbacks to `darkify()`, `lightify()`.
And `toggle()` takes two callbacks (enableDarkModeCallback, enableLightModeCallback), for example:
```javascript
var sayGoodMorning = function () {
console.log('Good morning !');
};
var sayGoodNight = function () {
console.log('Good night!');
};
// Pass sayGoodMorning() as callback to darkify
Nightly.darkify(sayGoodMorning);
// toggle() takes two callbacks (darkifyCallback, lightifyCallback)
Nightly.toggle(sayGoodNight, sayGoodMorning);
```
### Example
In our [first example](./examples/plain-markup.html) we created a simple page as the following:
```html
```
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()`
```html
```
The result was as the following:
## TODO
- [x] Add state persistence: use localstorage
- [ ] Add supported browsers section after testing it
- [ ] Improve [usage](#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](./LICENSE) file for details
---
_Source: https://npm.io/package/nightly.js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
