
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="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.
- Publication date: 11.10.2018
- Source