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.
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.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.
Apple is kicking off March with a flurry of product announcements ahead of a “special…
Google is moving its Chrome browser to a two-week release cycle, instead of the current…
Microsoft is moving its annual Build developer conference from Seattle back to San Francisco and…
Since 1988 the Game Developers Conference has been a place where the people that make…
Dungeons & Dragons is taking a page out of the live-service video game play book…
Outlander Season 8 premieres Friday, March 6 on STARZ. New episodes drop weekly on Fridays.After…
This website uses cookies.