Nightly.js
A zero dependency Javascript library for enabling dark/night mode in you UI.
Usage
- Include Nightly.js
-
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/nightly.js@v1.0/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 thetoggle()
function
// To enable the dark mode
Nightly.darkify();
// To disable the dark mode
Nightly.lightify();
// To toggle between dark and light modes
Nightly.toggle();
- You can also pass callbacks to
darkify()
,lightify()
. Andtoggle()
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);
Example
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:
TODO
- Add state persistence: use localstorage
- Add supported browsers section after testing it
- Improve usage section
- Document and refactor the code
- Continue writing tests
- Write plugins for frameworks like Bootstrap:
- Bootstrap
- Foundation
- Materialize
License
This project is licensed under the GNU GPL v3.0 License - see the LICENSE file for details