Color variables show wrong preview for dark mode

Hi Figma Team,

I hope you’re doing well. I’ve encountered a display issue concerning color variable previews in the dark mode column, and I’m writing to report this as it significantly impacts design workflows.

Issue Description

In my design system, I use color variables with separate values for Light and Dark modes. In the “Dark Mode” column (or when referencing from a dark mode context), the color thumbnail / swatch preview still shows the Light mode color instead of the correct Dark mode color. However, when the variable is actually applied to components (in dark mode), the correct dark mode color is rendered. In other words:

Preview / swatch in variables UI is incorrect (shows light color)

Applied result in components is correct (dark mode color)

Why it’s a problem

It’s confusing and misleading to designers — when selecting or auditing variables, the preview should match what is actually applied.

It slows down design system maintenance and review, because you cannot reliably trust the swatch previews.

It can introduce mistakes when designers assume the preview is accurate.

Steps to Reproduce 

Create a color variable with separate Light / Dark mode values.

In the Variables panel (or wherever the variables are referenced) switch to dark mode context / column.

Observe that the color preview thumbnail still shows the light mode value, despite the variable having a different dark mode value.

Apply the variable to a component/frame in dark mode — the component renders the correct dark mode color.

Additional Information

Sample file or recording (if possible) can be shared for reproduction

This issue is similar to reports in the community (“Color variables show wrong preview for dark mode”) forum.figma.com

I kindly request that this be investigated and addressed in a future update, as consistent and accurate previews for dark / light mode variables are critical for maintaining design system integrity.

Thank you for your time and for building such an essential tool for design workflows.

Looking forward to a fix!

Hi, facing a similar issue, but with the swatches preview. Suddenly all modes are displaying the same swatches in the previews, yet, if you unlink them, then the correct hex value are displayed.

I am working on a white label product, so we use modes in our team with the purpose of rebranding the product per customer. Mode switching works well for now, but it is very difficult for the team to actually design.

It seems that all modes switch to the default colour, because the 1st mode is the default (purple). If I switch the second mode to default, then the colour swatches change to orange.

Hello everyone,

I am having the same Problem.
This makes working with modi really hard. Please have a look at this:
 

Thank you very much