I Built a Lightweight JavaScript Library for Dark/Light Mode - DayniteJs 🌗

suhaib Muhammad Babangda — Wed, 01 Apr 2026 09:41:13 +0000

🚀 I Built a Lightweight JavaScript Library for Dark/Light Mode — DayniteJs 🌗

As a frontend developer, one thing I kept repeating in projects was implementing light/dark mode toggle.

Every time:

I rewrote the same logic
Managed localStorage again
Handled system preferences manually

So I thought…

👉 Why not build a reusable solution?

That’s how DayniteJs was born.

💡 What is DayniteJs?

DayniteJs is a lightweight JavaScript library that helps you easily:

🌗 Toggle between light & dark mode
💾 Save user preference automatically
🖥️ Detect system theme (prefers-color-scheme)
⚡ Use a simple, clean API

📦 Installation

npm install daynitejs

🛠️ Usage

import DayniteJs from 'daynitejs';

const daynite = new DayniteJs();

daynite.toggle();

🎨 CSS Setup

[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #1f2937;
}

[data-theme="dark"] {
  --bg-color: #1f2937;
  --text-color: #f3f4f6;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

🧠 What I Learned

Building this library taught me:

How npm publishing works
Handling real-world bugs after release
Why versioning matters (you can’t overwrite versions 😅)
Writing reusable and maintainable code

⚠️ Challenges I Faced

Fixing bugs after publishing
npm authentication issues
Version conflicts
Making the library work across different environments

🚀 Try It Out

👉 npm: https://www.npmjs.com/package/daynitejs
👉 GitHub: https://github.com/suhaibmuhd01/DayniteJs

💬 I Need Your Feedback

This is my first open-source library.

I’d really appreciate:

Feedback
Suggestions
Contributions

🙌 Final Thoughts

This is just the beginning.

More tools and libraries coming soon 🔥

If you like it, please ⭐ the repo and share!

❓ Question

How do you usually implement dark mode in your projects?

Let’s discuss 👇

Forem: suhaib Muhammad Babangda

I Built a Lightweight JavaScript Library for Dark/Light Mode - DayniteJs 🌗