Building Dark Mode on Desktop
Sep 24, 2019

Summary
This post details the technical implementation of dark mode for Slack's desktop and browser applications. Key contributions include: redefining the color system with foreground/background concepts and nuanced grayscale variables; implementing CSS variables for theming; developing a LESS plugin to override the `fade` function and handle transparency with CSS variables; using `localStorage` for theme persistence and OS sync settings; integrating with `window.matchMedia` for OS theme changes; and employing an inline script in the static HTML to apply the correct theme before the first paint, preventing flashes of white. It also highlights the seamless integration of dark mode into other single-page apps built with Slack Kit and Gantry.