Nightly.js

A zero dependency Javascript library for enabling dark/night mode in you UI.

Usage

1. 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, run following command at you project's directory:

  npm install --save nightly.js
  

  Then include it

  var Nightly = require('nightly.js');

2. 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

3. 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();

• You can also pass callbacks to 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);

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