Built-in dark mode with automatic theme switching and localStorage persistence
Add the theme CSS and JavaScript to your page:
The theme toggle will automatically:
The theme toggle works out of the box with sensible defaults. No additional setup needed!
Complete dark mode support for all RSL components including navbar, buttons, forms, modals, cards, and more.
User theme preference is saved automatically and restored on subsequent visits.
Respects user's operating system color scheme preference on first visit.
Automatically detects when user changes system theme and updates accordingly (if no manual preference set).
Beautiful glassmorphic cards and components in dark mode with backdrop blur.
WCAG compliant color contrast ratios in both light and dark modes.
When a user first visits your site, the theme toggle:
prefers-color-scheme media queryThe theme is applied by setting a data-theme attribute on the <html> element:
// Light mode
document.documentElement.setAttribute('data-theme', 'light');
// Dark mode
document.documentElement.setAttribute('data-theme', 'dark');All dark mode styles are then applied using CSS attribute selectors:
[data-theme="dark"] body {
background: var(--rsl-dark-bg-primary);
color: var(--rsl-dark-text-primary);
}
[data-theme="dark"] .card {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
}RSL uses CSS custom properties for theming. All components automatically respond to theme changes:
| Variable | Light Mode | Dark Mode | Purpose |
|---|---|---|---|
--rsl-bg-primary |
#ffffff | --rsl-dark-bg-primary | Main background color |
--rsl-bg-secondary |
#f8f9fa | --rsl-dark-bg-secondary | Secondary background |
--rsl-text-primary |
#212529 | --rsl-dark-text-primary | Primary text color |
--rsl-text-secondary |
#6c757d | --rsl-dark-text-secondary | Secondary text color |
--rsl-border |
#e0e0e0 | --rsl-dark-border | Border color |
--rsl-primary |
#6E7BFF | #6E7BFF | Brand primary color |
| Variable | Value | Purpose |
|---|---|---|
--rsl-dark-bg-primary |
#1a1a2e | Dark mode main background |
--rsl-dark-bg-secondary |
#16213e | Dark mode secondary background |
--rsl-dark-bg-tertiary |
#0f3460 | Dark mode tertiary background |
--rsl-dark-text-primary |
#ffffff | Dark mode primary text |
--rsl-dark-text-secondary |
rgba(255, 255, 255, 0.8) | Dark mode secondary text |
--rsl-dark-border |
rgba(255, 255, 255, 0.1) | Dark mode borders |
You can programmatically toggle the theme in your own JavaScript:
// Get current theme
const currentTheme = document.documentElement.getAttribute('data-theme');
// Toggle theme
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', newTheme);
// Save to localStorage
localStorage.setItem('rsl-theme', newTheme);Override the CSS to change the button position:
/* Move to top-right corner */
.rsl-theme-toggle {
top: 2rem;
right: 2rem;
bottom: auto;
}
/* Move to left side */
.rsl-theme-toggle {
left: 2rem;
right: auto;
}Use CSS variables and dark mode selectors for your custom components:
/* Use CSS variables for automatic theme support */
.my-custom-card {
background: var(--rsl-bg-primary);
color: var(--rsl-text-primary);
border: 1px solid var(--rsl-border);
}
/* Or use explicit dark mode rules */
[data-theme="dark"] .my-custom-card {
background: rgba(255, 255, 255, 0.05);
color: var(--rsl-dark-text-primary);
border-color: var(--rsl-dark-border);
}All RSL components fully support dark mode out of the box:
All color combinations in both light and dark modes meet WCAG 2.1 Level AA contrast requirements.
The theme toggle button is fully keyboard accessible:
The button includes proper ARIA labels for screen reader users:
aria-label="Toggle dark mode"