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:

• 'Turn off The light' When Playing Videos - lightsoff
• Fade The Background To Dark When Playing A Video - Allofthelights.js
• Switch Page Between Night Mode And Normal Style – Nightly.js

How to use it:

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

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

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

<link rel="stylesheet" href="css/night-mode.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="js/jquery.night.mode.js"></script>

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

$("body").nightMode({
  // settings here
});

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

$("body").nightMode({

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