Why Separating Themes from Modes Transforms Your Design System

Back in 2022, while building out the start of this website's redesign (it took a while), I wanted to use this new fangled CSS color-mix() function to generate an analogous colour palette, one that would be easy to switch between and work in both light and dark modes. But I needed to think about how I'd approach it. I couldn't handle "themes" and "modes" as a single system. They needed separate,…