Easy Dark Mode For The Web – Midnight.js

Preview:

Description:

Midnight.js is a tiny JavaScript library that enables web developers to quickly add dark mode functionality to sites or web apps with zero coding.

It’s got CSS presets ready to go for all the usual suspects on your page – like text, body, tables, form controls, and more. All you need to do is pop a toggle button on your page, and Midnight takes care of all that for you.

How to use it:

1. Load the midnight.css and midnight.js in the document.

<link rel="stylesheet" href="css/midnight.css" />
<script src="js/midnight.js"></script>

2. Add the dark mode toggle button to the page. That’s it.

<button class="midnight-btn btn">Toggle Dark Mode</button>

3. You can tweak the default styles to match your site’s branding or even create your own custom theme. The possibilities are endless!

/* Dark mode styles */
body.dark-mode {
  background-color: #1e1e1e !important; /* Dark background color */
  color: #dcdcdc !important; /* Light text color */
}
...

Changelog:

03/26/2024

• Update midnight.js