By rssfeeds-admin 
It manages the theme state by automatically detecting a user’s system-level preference (prefers-color-scheme), and then saving their choice in localStorage for future visits.
This gives you a fast, framework-agnostic way to add dark & light mode switching to any website with minimal setup.
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 inlocalStorageor the system.storageKey: The key used forlocalStorage.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 yourthemesarray.daynite.setTheme('theme-name'): Directly sets a specific theme.daynite.getTheme(): Returns the name of the currently active theme.daynite.reset(): Clears thelocalStoragesetting and reverts to the system or default theme.daynite.onThemeChange(callback): Subscribes a function to run whenever the theme changes.
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.
The post Smooth Dark & Light Mode Toggling Library for Web App – DayniteJS appeared first on CSS Script.
Discover more from RSS Feeds Cloud
Subscribe to get the latest posts sent to your email.