Dark-Mode Done Right: A11y & Brand Consistency Guide

:root { /* Light mode variables */ –custom-bg-primary: #ffffff; –custom-bg-secondary: #f8f9fa; –custom-text-primary: #212529; –custom-text-secondary: #6c757d; –custom-border-color: #dee2e6; –custom-brand-primary: #007bff; } [data-theme=”dark”] { /* Dark mode overrides */ –custom-bg-primary: #121212; –custom-bg-secondary: #1e1e1e; –custom-text-primary: #e9ecef; –custom-text-secondary: #adb5bd; –custom-border-color: #495057; –custom-brand-primary: #64b5f6; }

// Theme management utility class CustomThemeManager { constructor() { this.currentTheme = this.getStoredTheme() || this.getSystemTheme(); this.applyTheme(this.currentTheme); this.setupEventListeners(); } getSystemTheme() { return window.matchMedia(‘(prefers-color-scheme: dark)’).matches ? ‘dark’ : ‘light’; } getStoredTheme() { return localStorage.getItem(‘custom-theme’); } applyTheme(theme) { document.documentElement.setAttribute(‘data-theme’, theme); localStorage.setItem(‘custom-theme’, theme); this.currentTheme = theme; } toggleTheme() { const newTheme = this.currentTheme === ‘light’ ? ‘dark’ : ‘light’; this.applyTheme(newTheme); } setupEventListeners() { // Listen for system theme changes window.matchMedia(‘(prefers-color-scheme: dark)’) .addEventListener(‘change’, (e) => { // Only update if user hasn’t explicitly chosen a theme if (!this.getStoredTheme()) { this.applyTheme(e.matches ? ‘dark’ : ‘light’); } }); } } // Initialize theme manager const customThemeManager = new CustomThemeManager(); // Toggle button event listener document.getElementById(‘custom-theme-toggle’).addEventListener(‘click’, () => { customThemeManager.toggleTheme(); });

🌙 Dark Mode

// Enhanced theme detection with transition support function customInitializeTheme() { const storedTheme = localStorage.getItem(‘custom-theme’); const systemPrefersDark = window.matchMedia(‘(prefers-color-scheme: dark)’).matches; // Determine initial theme let initialTheme = ‘light’; if (storedTheme) { initialTheme = storedTheme; } else if (systemPrefersDark) { initialTheme = ‘dark’; } // Apply theme without transition to prevent flash document.documentElement.classList.add(‘custom-theme-transition-disabled’); document.documentElement.setAttribute(‘data-theme’, initialTheme); // Re-enable transitions after initial load setTimeout(() => { document.documentElement.classList.remove(‘custom-theme-transition-disabled’); }, 100); } // CSS for smooth transitions .custom-theme-transition-disabled * { transition: none !important; } [data-theme] * { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }