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
- Chrome, Safari, Firefox, Opera, IE7+, IOS, Android and windows phone supported.
- Fully customizable with CSS.
- Built-in Brightness Controler with Spinner Loader.
- Automatically Enable at 8:00 PM and Disable at Morning 4:00 AM. (optional)
- Can be Apply "Night Effect" to Specific Selected Item (i.e section or div).
- CSS3 and jQuery Animations Enabled.
- Font Awesome icons Installed.
- User Friendly and Easy to Implement.
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?", });