A zero dependency Javascript library for enabling dark/night mode in you UI.
- 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/[email protected]/dist/nightly.min.js'></script>
-
Or if you prefer npm:
npm install --save nightly.js
Then include it
var Nightly = require('nightly.js');
-
In you main Javascript file initiate the object
-
Using default Parameters with persistence disabled:
var Nightly = new Nightly();
-
Or can customize your parameters
The first parameter is to enable persistence and the second is to customize default settings
// To disable persistence, set false instead of true var Nightly = new Nightly(true, { body: "backgorund 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', to: 'my-dark-class-to-the-selected-class', }, { apply: 'another-selected-class', to: 'another-dark-class-to-the-selected-class', } ] } );
-
-
Call the
darkify()
or thetoggle()
function
// To enable the dark mode
Nightly.darkify();
// To disable the dark mode
Nightly.lightify();
// Toggle between dark and light mode
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);
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 the following:
We included nightly.js
just before closing the body
tag, we initiate Nightly object with no arguments,
then we 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 the following:
- 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
This project is licensed under the GNU GPL v3.0 License - see the LICENSE file for details