Switch Page Between Night Mode And Normal Style – Nightly.js

Preview:

Description:

Nightly.js is a simple, plain JavaScript plugin which applies night mode to your webpage to improve the readability of articles and videos while reading/watching at night.

How to use it:

Install the Nightly.js with NPM.

# NPM
$ npm install nightly.js --save

Import & Include the Nightly.js.

// ES 6
import Nightly from 'nightly.js';
// CommonJS:
const Nightly = require('nightly.js');

<script src='nightly.min.js'></script>

Initialize the nightly.js with default settings.

// with default parameter
var Nightly = new Nightly();
// disable persistence, set false instead of true
var Nightly = new Nightly(nightModeConfig, true);

Enable the night mode on the page.

Nightly.darkify();

Toggle between night mode and normal style.

// disable the dark mode
Nightly.lightify();
// toggle between dark and normal mode
Nightly.toggle();

Available callback functions.

Nightly.toggle(darkifyCallback, lightifyCallback);

The default CSS styles for the night mode.

var nightModeConfig = {
  body: "#282828",
  texts: "#f5f5f5",
  inputs: { color: '#f5f5f5', backgroundColor: "#313131" },
  buttons: { color: "#f5f5f5", backgroundColor: "#757575" },
  textareas: { color: '#f5f5f5', backgroundColor: "#313131" },
  links: "#009688",
  classes: [],
  isTwbs3: false
},

Changelog:

v2.0.0 (04/14/2020)

• Use querySelectorAll instead of getElementsByClassName.
• Swap Nightly.js constructor parameters

09/04/2018

• v1.1.0: Changed parameters order in constructor

08/19/2018

• refactor: remove twbs3Darkify(), it will be on a separated plugin