Configurable Night Mode For Webpage - jQuery night.mode.js

Configurable Night Mode For Webpage - jQuery night.mode.js

A lightweight yet fully configurable jQuery plugin to create a Night Shift trigger that allows the visitor to enable dark/night mode on your webpage.

The plugin allows you to adjust the brightness/contrast of the page when switching to night mode, and automatically enables/disables the night mode at specific times of the day.

See also:

How to use it:

1. By default, the plugin uses Font Awesome iconic font for the controls.

<link rel="stylesheet" href="">

2. Include the jQuery night.mode.js plugin's files on the webpage.

<link rel="stylesheet" href="css/night-mode.css">
<script src=""
<script src="js/jquery.night.mode.js"></script>

3. Call the function to generate a sticky Night Shift toggle button on the webpage.

  // settings here

4. All default settings which can be used to customize the night mode.

  // element(s) to keep normal styles
  keepNormal: "button",
  // shows brightness controller
  brightnessControler: true,
  // auto enable night mode at 8 pm to 4 am
  autoEnable: false, 
  // success text
  successText: "Night Mode Successfully Enabled !",
  // adjust text
  adjustText: "Would you like to adjust brightness?"

This awesome jQuery plugin is developed by CodeHimBlog. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 11.10.2018
  • Source