Smooth Dark & Light Mode Toggling Library for Web App - DayniteJS

AuthorSuhaibmuhd01

Last UpdateMarch 28, 2026

LicenseMIT

Features:

Custom Theme: Extends beyond basic light/dark modes with custom styling options.
CSS Variable: Dynamically injects CSS custom properties.
Event-Driven: Provides callback functions for theme change events.
Tailwind CSS Compatible: Works perfectly with utility-first CSS frameworks.
Zero Dependencies: Lightweight implementation with no external dependencies.

How to use it:

1. Install daynitejs and import it into your project.

# NPM
$ npm install daynitejs

2. Create a button to toggle between dark and light modes.

<button id="theme-toggle">Dark/Light Modes</button>

3. Initialize daynitejs with default settings.

const daynite = new DayniteJs();

4. Define your theme colors using CSS variables tied to a data-theme attribute. This is the core of how the theming works. The library will add data-theme="light" or data-theme="dark" to your <html> element.

/* Define variables for each theme */
[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #222222;
}
[data-theme="dark"] {
  --bg-color: #222222;
  --text-color: #fffff;
}
/* Apply the variables */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}
/* Optional: Add smooth transitions */
.DayniteJs-transition,
.DayniteJs-transition * {
  transition: background-color 0.5s ease, color 0.5s ease;
}

4. Enable the button to toggle between dark and light modes.

const toggleButton = document.getElementById('theme-toggle');
toggleButton.addEventListener('click', () => {
  daynite.toggle();
});

// You can also listen for changes
daynite.onThemeChange(theme => {
  console.log(`Theme changed to: ${theme}`);
  // Maybe you want to update an icon in the button
  toggleButton.textContent = `Switch to ${theme === 'light' ? 'Dark' : 'Light'}`;
});

5. Available options.

themes: An array of your theme names.
defaultTheme: The theme to use if no preference is found in localStorage or the system.
storageKey: The key used for localStorage.
customStyles: An object where you can define CSS variables directly in JS, though we recommend the CSS approach for better separation of concerns.

const daynite = new DayniteJs({
  themes: ['light', 'dark']).
  defaultTheme: 'light').
  storageKey: 'DayniteJs-theme').
  customStyles: {},
});

6. API methods.

daynite.toggle(): Cycles to the next theme in your themes array.
daynite.setTheme('theme-name'): Directly sets a specific theme.
daynite.getTheme(): Returns the name of the currently active theme.
daynite.reset(): Clears the localStorage setting and reverts to the system or default theme.
daynite.onThemeChange(callback): Subscribes a function to run whenever the theme changes.
daynite.destroy(): Destroy the instance.

FAQs:

Q: Can I use more than two themes with DayniteJS?
A: Absolutely. The library supports unlimited custom themes through the themes array. Each theme can have its own CSS variables and styling rules defined in your configuration.

Q: How does DayniteJS handle users who disable JavaScript?
A: Without JavaScript, the library cannot function, but you can provide fallback styling using CSS media queries. Consider implementing a <noscript> section with basic dark mode support for accessibility.

Q: What happens if localStorage is disabled or unavailable?
A: DayniteJS gracefully handles localStorage errors by falling back to session-only storage. Theme preferences will reset on page reload, but functionality remains intact throughout the session.

Changelog:

v1.1.0 (03/28/2026)

Improved stability and performance.
Added .destroy() method to easily clean up matchMedia event listeners and avoid memory leaks.
Added data-daynitejs-auto support for zero-config script initializations right from the DOM.
Fixed bugs.

Smooth Dark & Light Mode Toggling Library for Web App – DayniteJS

Features:

How to use it:

FAQs:

Changelog:

See Also:

You Might Be Interested In:

Leave a ReplyCancel reply