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

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

Preview:

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

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

You Might Be Interested In:


Leave a Reply