A zero dependency javascript library that enables the night mode in your website easily
GPL-3.0 License
A zero dependency Javascript library for enabling dark/night mode in you UI.
Via <script>
tag
<!-- Download this repository then use "dist/nightly.min.js" -->
<script src="nightly.min.js"></script>
<!-- Or use CDN -->
<script src="https://cdn.jsdelivr.net/gh/fcmam5/[email protected]/dist/nightly.min.js"></script>
Or if you prefer npm, run following command at you project's directory:
npm install --save nightly.js
Then include it
var Nightly = require('nightly.js');
In your main JavaScript file initiate the object
Using default Parameters with persistence disabled:
var Nightly = new Nightly();
Or customize parameters yourself
The first parameter is to customize default settings and the second is to enable persistence
var nightModeConfig = {
body: 'background color', // Default: #282828
texts: 'texts color', // Default: #f5f5f5
inputs: {
color: 'text color inside inputs', // Default: #f5f5f5
backgroundColor: 'background color', // Default #313131
},
buttons: {
color: "button's text color", // Default: #f5f5f5
backgroundColor: "button's backgournd color", // #757575
},
links: 'links color (normal state)', // Default: #009688
classes: [
// Classes to apply when enabling the dark mode on certain elements
{
apply: 'my-selected-class', // just the class name (without the .)
to: '.my-dark-class-to-the-selected-class .some-nested-class', // uses querySelectorAll
},
{
apply: 'another-selected-class',
to:
'.another-dark-class-to-the-selected-class.some-class .some-nested-class',
},
],
};
var Nightly = new Nightly(nightModeConfig, true); // To disable persistence, set false instead of true
Call the darkify()
or the toggle()
function
// To enable the dark mode
Nightly.darkify();
// To disable the dark mode
Nightly.lightify();
// To toggle between dark and light modes
Nightly.toggle();
darkify()
, lightify()
. And toggle()
takes two callbacks (enableDarkModeCallback, enableLightModeCallback), for example:var sayGoodMorning = function () {
console.log('Good morning !');
};
var sayGoodNight = function () {
console.log('Good night!');
};
// Pass sayGoodMorning() as callback to darkify
Nightly.darkify(sayGoodMorning);
// toggle() takes two callbacks (darkifyCallback, lightifyCallback)
Nightly.toggle(sayGoodNight, sayGoodMorning);
In our first example we created a simple page as the following:
<style media="screen">
body {
padding: 50px;
}
#btn {
height: 50px;
width: 150px;
}
.red-text {
color: #d32f2f;
}
</style>
<h1>
Hello, world <span class="red-text">!</span>
<button type="button" name="button" id="btn">Toggle</button>
</h1>
<p>Please, <a href="#">Click here</a></p>
<div id="form-container">
<form>
<label for="name">Your name</label>
<input type="text" name="name" value="Hello world" placeholder="name" />
</form>
</div>
Then the result was as following:
We included nightly.js
just before closing the body
tag, initiated Nightly object with no arguments,
then set an event listener to a button to execute our toggle()
method, that switches between darkify()
and lightify()
<script src="../src/nightly.js" charset="utf-8"></script>
<script type="text/javascript">
// Persistence disabled
var Nightly = new Nightly();
document.getElementById("btn").addEventListener("click", function(){
Nightly.toggle();
});
</script>
</body>
The result was as following:
This project is licensed under the GNU GPL v3.0 License - see the LICENSE file for details