Slack

Building Dark Mode on Desktop

Sep 24, 2019
Building Dark Mode on Desktop
SummaryAI, from the source post

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.