TechPrufer
Get started
Slack
Slack logoSlack · Feature trail

Dark Mode Implementation

1 post · Sep 2019

What this trail covers

This thread tracks the evolution of Slack's theming capabilities, focusing on the implementation of dark mode across its desktop and browser applications. Initial posts detailed the foundational work of redefining the color system to support multiple themes, including the introduction of foreground/background concepts and nuanced grayscale values. This post details the technical implementation of dark mode, leveraging CSS variables, a LESS plugin to handle transparency functions, and localStorage for theme persistence. It also covers OS integration for automatic theme switching and an inline script for pre-paint theme application to avoid flashes of white. Subsequent posts will likely detail further refinements, broader platform support, and user-facing controls.

All Slack trails
  1. Building Dark Mode on DesktopThis 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.