Skip to main content
Question

Figma Variables: Implementing Conditional Logic for black white themes

  • November 28, 2025
  • 0 replies
  • 9 views

Gregor Voinov

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/bg must resolve to #141414 .

    • ELSE (If the brand is Pink, Green, etc.), mode/bg resolves to #1A1A1A.

 


Here is a Codepen demo that may better illustrate what I want to achieve in Figma.