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

Category: Javascript | April 14, 2020
Author: Fcmam5
Views Total: 705 views
Official Page: Go to website
Last Update: April 14, 2020
License: MIT


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


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 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.


Toggle between night mode and normal style.

// disable the dark mode

// toggle between dark and normal mode

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


v2.0.0 (04/14/2020)

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


  • v1.1.0: Changed parameters order in constructor


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

You Might Be Interested In:

Leave a Reply