Building Dark Mode on Desktop

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. We wanted to give you a peek under the hood and some background on the process of getting to this point. As is usually the…

Slack logo
Slack
•
Kyle Stetz
•12 min read•intermediate•
--
•View Original
ChefCSSJavaScriptReactRedux

Overview

The article discusses the implementation of dark mode in Slack's desktop application, detailing the challenges and solutions encountered during the process. It emphasizes the importance of a sustainable color system and the integration of user preferences for theme selection.

What You'll Learn

1

How to implement a sustainable color system for dark mode in a large codebase

2

Why using CSS variables is beneficial for theming applications

3

How to manage user preferences for theme settings across multiple workspaces

Prerequisites & Requirements

  • Understanding of CSS and theming concepts
  • Familiarity with LESS and CSS variables(optional)

Key Questions Answered

How did Slack implement dark mode in their desktop application?
Slack implemented dark mode by rewriting their desktop client in React and creating a sophisticated color system using LESS variables. They focused on sustainable theming that allows users to choose between light and dark modes, irrespective of OS settings, using CSS variables and localStorage for preferences.
What challenges did Slack face when introducing dark mode?
The main challenges included updating the existing codebase to support new color variables, ensuring accessibility with contrast requirements, and managing user preferences across multiple workspaces. They also needed to avoid regressions in CSS output during the transition.
Why is a sustainable color system important for dark mode?
A sustainable color system is crucial as it allows for easy maintenance and scalability of theming features. By abstracting color variables around content rather than appearance, it simplifies the implementation of multiple themes and enhances the user experience.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Frontend
React
Used for rewriting the desktop client to support dark mode.
Frontend
Less
Used for managing color variables and styles in the application.

Key Actionable Insights

1
Implement a robust theming system that uses CSS variables to manage colors dynamically.
This approach allows for easier maintenance and scalability when adding new themes or making adjustments, ensuring a consistent user experience across different modes.
2
Utilize localStorage to manage user preferences for themes across multiple workspaces.
By storing theme preferences in localStorage, you can provide users with a seamless experience that persists their settings regardless of the workspace they are using.
3
Conduct thorough QA to ensure that changes to the color system do not introduce regressions.
Running diffs between CSS outputs before and after changes can help catch unintended modifications, maintaining the integrity of the user interface.

Common Pitfalls

1
Failing to consider accessibility when designing color themes can lead to poor user experiences.
It's crucial to ensure that color contrasts meet accessibility standards, as neglecting this can alienate users with visual impairments.

Related Concepts

Theming In Web Applications
CSS Variables
Accessibility In Design