A zero dependency JS library that enables the night mode for your UI

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 :

  npm install --save nightly.js

  Then include it

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

1. In you main Javascript file initiate the object

• Using default Parameters:

  var Nightly = new Nightly();

• Or can costumize your parameters

  var Nightly = new Nightly({
            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
            isTwbs3: 'boolean: are you working with Bootstrap3 ?', //Default false
            classes: [{ // Classes to apply when enabling the dark mode on certain elements
              light: 'price-tag-light',
              dark: 'price-tag-dark'
            }],
            classes: [
              {
                apply: 'my-selected-class',
                to: 'my-dark-class-to-the-selected-class',
              },
              {
                apply: 'another-selected-class',
                to: 'another-dark-class-to-the-selected-class',
              }
            ]
          }
        );

1. Call the darkify() or the toggle() 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() . 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 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">
  var Nightly = new Nightly();
  document.getElementById("btn").addEventListener("click", function(){
    Nightly.toggle();
  });

</script>
</body>

The result was as the following:

TODO

• Continue working on bootstrap twbs3Darkify() function (suggestion: darkly theme), or better: Make it a separated plugin for Nightly.js
• Add supported browsers section after testing it
• Improvesection
• Document and refactor the code
• Write tests

License

This project is licensed under the GNU GPL v3.0 License - see the LICENSE file for details