I’m creating a design system with a light and dark mode using a standard 3-tiered token system: Core, Semantic, and Component. Each of these is a different variable collection.
On a previous project, I used a single mode on the Core collection with all of my colors (e.g., red-100, red-200, …, red-900) and created a light and dark mode on the Semantic collection that references the Core tokens. This was nice because I only needed to manage a single set of dark mode assignments on the Semantic layer.
On this project, I need to create a custom palette for dark mode with lower contrast and saturation.
My current approach is to create a light and dark mode on both the Core and Semantic collections.
Global Collection
Semantic Collection
This approach works with the following drawbacks:
Drawback 1: Displaying dark mode is a pain. I need to assign two variable modes (Core, Semantic) to display the dark mode colors.
Drawback 2: Editing Semantic colors is a pain. Dark mode values are not available for selection in the Semantic collection unless I have a layer selected on the canvas that has the dark mode assigned.
Drawback 3: When I close and re-open the variables window, it displays the light mode colors from the Core collection. What’s strange is that the component on the canvas displays the correct dark mode colors.
Has anyone experienced the same issues? Is there a more efficient way to set up a custom color palette for dark mode that allows me to assign a single mode to the layer and avoids these drawbacks?
One solution I thought of is to have a single collection called Theme with groups for Core, Semantic, and Component tokens. That would allow me to assign one variable mode and see the light and dark mode colors side by side.
