Heart of dark mode: done, and still in progress

Tailscale has successfully implemented dark mode in its admin console, a move driven by user demand and aimed at enhancing the user experience while simultaneously improving the company’s design system. This transition required addressing challenges related to color palettes, layering, and component styling, as well as pushing the team to confront and overcome technical debts by refining their design system through semantic classes and consistent focus styles. Utilizing technologies like React, Radix, and Tailwind, they optimized dark mode by adjusting color scales, shadows, and borders to maintain usability and aesthetics. The process unveiled areas needing improvement, such as opacity hacks and inconsistencies across platforms, and while acknowledging that a design system is always evolving, they successfully shipped a dark mode that users appreciate, reinforcing the system's robustness and adaptability.