TechPrufer
Get started
Atlassian
Atlassian logoAtlassian · Feature trail

Trello Theming with CSS Custom Properties

1 post · Jul 2022

What this trail covers

Trello has implemented a new theming system for its UI components, allowing for dynamic and accessible color schemes. This system leverages CSS custom properties to adapt themes based on the dominant color and brightness of user-selected board backgrounds. The architecture involves an image processing service to extract color data, which is then stored and retrieved via the Trello API and cached by Apollo Client. This data is used to dynamically set CSS custom properties, enabling consistent theming across different UI components and technical stacks within Trello.

All Atlassian trails
  1. Colorful and accessible theming in Trello with CSS custom propertiesThis post details the implementation of a dynamic theming system in Trello using CSS custom properties. It explains the architecture for extracting dominant color and brightness from board background images, the decision to use CSS custom properties over React Context or CSS-in-JS due to Trello's mixed technology stack (Backbone.js and React), and the development of a `useTheme` custom hook to dynamically set CSS variables. It also demonstrates how the `useBoardBackground` hook can be used to adapt UI elements like icons and buttons based on background brightness, ensuring accessibility and visual consistency.