We changed our link and menu highlight colors to variations on since they all change slightly in dark mode, but in general we didn’t have to modify our existing rainbow of color values except where they didn’t meet accessible contrast requirements. Using this foreground/background concept we renamed our color system. If we orient the variable names around the content rather than the appearance, we get something easier to parse: // Color assignments in light #fff // Color assignments in dark #111 Not great! Beyond being a confusing reversal, using the terms black and white bias us towards thinking about the traditional light mode experience when what we really want is an abstraction that lets us think about it in any mode. Our text color variable used to be called and our background color Dark mode is essentially an inversion of the color system, so let’s go ahead and flip those: // Color assignments in light #fff // Color assignments in dark #111 We maintain a set of LESS variables representing our colors and we’ve always known that this would serve as a great entry point to a dark mode implementation - but before we could think about what to build we had to develop a more sophisticated color system that could handle multiple themes. We took advantage of the momentum we had toward a design system and formalized Slack Kit, our UI component library, and along with it some new standards for writing CSS. Over the last 18 months, we did a complete rewrite of the desktop client in React. The overarching question for this project was: how can we build sustainable and maintainable support for themes? Background Working in a large engineering organization - especially within a rapidly growing company - means that every change needs to consider the momentum and roadmaps of many other teams. We wanted to give you a peek under the hood and some background on the process of getting to this point.Īs is usually the case with large codebases, finding an implementation that works is only half the battle gracefully changing infrastructural code and educating engineers on how to use new tools accounts for much of what we do when working on new capabilities of the product. If you’re a dark mode user you might have seen the news: two weeks ago we flipped the switch and gave users dark mode across the desktop app and the browser.

Black slack