Hello,
I've set up a two-collection system to achieve independent Brand and Theme Mode switching, but I'm struggling with a specific conditional requirement for neutral colors.
My variables are separated into two collections:
1. Collection: Brand (The Primary Color Picker)
This collection defines the primary brand color and default text color for all themes and I apply this in my sections of the page
| Variable Name | Pink Brand | Green Brand | ... | Black Brand | White Brand |
bg | #E8308A | #95C11F | ... | #141414 | #FFFFFF |
text | #FFFFFF | #000000 | ... | #FFFFFF | #000000 |
2. Collection: Mode (The Dark/Light Logic)
This collection defines the theme state logic by referencing the Brand collection, this I apply to the page itself
| Variable Name | Color Mode | Dark Mode | Light Mode |
bg | [Brand/bg] | #1A1A1A | #E0E0E0 |
text | [Brand/text] | #FFFFFF | #000000 |
When using the Black Brand or White Brand mode, I need the Dark Mode resolution to slightly adjust the background color to provide visual contrast against the brand colors
-
The Required Exception:
-
IF the Brand theme of a section is Black (
#141414), -
THEN the Dark Mode value for
mode/bgmust resolve to#141414. -
ELSE (If the brand is Pink, Green, etc.),
mode/bgresolves to#1A1A1A.
-
Here is a Codepen demo that may better illustrate what I want to achieve in Figma.
