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

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