Minimalist Dark Mode Solution – NocturneShift.js

Category: Color , Javascript | March 27, 2024
Author:BansheeDevelopment
Views Total:26 views
Official Page:Go to website
Last Update:March 27, 2024
License:MIT

Preview:

Minimalist Dark Mode Solution – NocturneShift.js

Description:

NocturneShift is an ultra-light (~1.6kb uncompressed) JS library that implements Dark Mode on your web app with just one HTML element and a single line of JavaScript.

That’s right, no more complex setups or messing around with cookies. The library uses sessionStorage, which is faster and more secure, to store user preferences for Dark Mode during their browsing session.

NocturneShift instantly casts the entire webpage into Dark Mode by applying an invert(1) filter. This transition is not just for the background and text colors but extends to images and icons as well, thanks to predefined classes that maintain the integrity and aesthetic of your website.

How to use it:

1. Download and import the NocturneShift.js script into your document.

<script src="NocturneShift.js"></script>

2. Create a toggle element to switch between Dark Mode and Light Mode on your page. That’s it.

<button class="darkmode_object">
  🌓 Toggle Dark Mode
</button>

You Might Be Interested In:


Leave a Reply