Colorful and accessible theming in Trello with CSS custom properties

This 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.