Dark Mode Guide

Dark mode reduces eye strain in low-light environments and saves battery on OLED screens. Implementation: define all colors as CSS custom properties (:root { --bg: #fff; --text: #000; }), create a dark theme (@media (prefers-color-scheme: dark) { :root { --bg: #0a0a0b; --text: #fafafa; } }), and add a manual toggle that sets a data attribute (document.documentElement.dataset.theme = "dark"). Toolular uses this exact approach — all colors are CSS variables that switch between light and dark themes. Key design principle: dark mode is not just inverting colors. Use slightly desaturated colors, reduce contrast from pure white (#fafafa instead of #ffffff), and ensure sufficient contrast ratios.