## The Dark Side Dark mode is no longer a "nice to have"; it's a user expectation. It saves battery life on OLED screens and reduces eye strain in low-light environments. However, designing for dark mode requires more than just `background-color: black`. ### Rule #1: Avoid Pure Black Never use `#000000`. Pure black creates a high contrast that can cause "smearing" (ghosting) on mobile screens when scrolling. It can also cause eye strain when paired with bright white text. * **Better:** Use a dark gray like `#121212` or `#1F1F1F`. ### Rule #2: Desaturate Colors Bright, saturated colors that look great on white backgrounds vibrate against dark backgrounds, making them hard to read. * If your primary blue is `#007AFF`, in dark mode, you might want to lighten and desaturate it to `#409CFF` to ensure it passes accessibility contrast ratios. ### Rule #3: Elevation through Light In light mode, we use shadows to show depth (cards floating on a background). In dark mode, shadows are invisible. Instead, use lighter shades of gray to indicate elevation. The "closer" the element is to the user, the lighter the gray should be.