Night Mode jQuery Plugin

Let's users to enable/disable night mode with brightness control feature.

Written in: HTML5, CSS3, JS
Frameworks: jQuery 3.3.1 & Font Awesome 4.0

Fork on GiHub Download

Why Night Mode

Sometimes, user feels uncomfortable while reading or browsing website/app contents at night. Due to light based UI designs and colorful interface, user often fed up.

For the best user experience, this lightweight plugin helps you to create an awesome "Night Mode" feature (with brightness control) in your website/app.

Main Features

Note: No need any extra css coding, it will convert your existing css into night mode.

You have to create nothing in HTML for this plugin, it will automatically create all necessary elements.

How to Implement

You have to create nothing in HTML document to get it working. Just attach nightMode() with body in DOM ready function, the statement:

$(document).ready(function(){
    $("body").nightMode();

});

To automatically enable night mode (from 8:00 PM to 4:00 AM), update the following option.

$("body").nightMode({
    autoEnable: true, 
});

If you don't want to apply night mode effect on specific container, div, section or selector, use the keepNormal option to keep something normal.

$("body").nightMode({
    keepNormal: "a, pre, .className, #id", 
});

By default, this plugin provide best UI to control brightness, if you want to turn it off, update the following setting.

$("body").nightMode({
    brightnessControler: false, 
});

To customize text, that will appear in popup when night mode activated.

$("body").nightMode({
    successText: "Night Mode Successfully Enabled !",
    adjustText: "Would you like to adjust brightness?",
});