Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Fcmam5/nightly.js
A zero dependency javascript library that enables the night mode in your website easily
https://github.com/Fcmam5/nightly.js
darkmode frontend html javascript
Last synced: 15 days ago
JSON representation
A zero dependency javascript library that enables the night mode in your website easily
- Host: GitHub
- URL: https://github.com/Fcmam5/nightly.js
- Owner: Fcmam5
- License: gpl-3.0
- Created: 2018-04-11T11:53:33.000Z (over 6 years ago)
- Default Branch: develop
- Last Pushed: 2023-03-03T12:58:42.000Z (over 1 year ago)
- Last Synced: 2024-10-04T10:46:39.250Z (about 1 month ago)
- Topics: darkmode, frontend, html, javascript
- Language: JavaScript
- Homepage:
- Size: 1.28 MB
- Stars: 161
- Watchers: 6
- Forks: 15
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Contributing: docs/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-algeria - Nightly.js - A zero dependency JavaScript library for enabling the Dark mode in your UI (Libraries and Frameworks)
- awesome-list - nightly.js
README
# Nightly.js
[](https://github.com/Fcmam5/nightly.js/blob/master/LICENSE)
[](https://github.com/Fcmam5/nightly.js)
[](https://www.npmjs.com/package/nightly.js)
[](https://www.codetriage.com/fcmam5/nightly.js)
A zero dependency Javascript library for enabling dark/night mode in you UI.
## Usage
1. Include Nightly.js
- Via `` tag
```html
<!-- Download this repository then use "dist/nightly.min.js" -->
<script src="nightly.min.js">
```
- Or if you prefer [npm](https://www.npmjs.com/package/nightly.js), run following command at you project's directory:
```
npm install --save nightly.js
```
Then include it
```javascript
var Nightly = require('nightly.js');
```
2. In your main JavaScript file initiate the object
- Using default Parameters with persistence disabled:
```javascript
var Nightly = new Nightly();
```
- Or customize parameters yourself
_The first parameter is to customize default settings and the second is to enable persistence_
```javascript
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
```javascript
// 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:
```javascript
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](./examples/plain-markup.html) we created a simple page as the following:
```html
body {
padding: 50px;
}
#btn {
height: 50px;
width: 150px;
}
.red-text {
color: #d32f2f;
}
Hello, world !
Toggle
Please, Click here
Your name
```
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()`
```html
// Persistence disabled
var Nightly = new Nightly();
document.getElementById("btn").addEventListener("click", function(){
Nightly.toggle();
});