GitHub - Fcmam5/nightly.js: A zero dependency javascript library that enables the night mode in your website easily

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