Hi, we were setting up our color variables for light and dark mode and noticed that the preview of the colors in dark mode do not represent the actual value behind it. Anyone has any idea why this happens and how to fix it?
A little backstory, we have set up core, base and applied tokens in the variables window. The base level is where we set up theming. However, in our applied level we sometimes overwrite a color for a specific token in dark mode. However, when we do this, the preview seems to show the colors as presented in light mode instead of dark mode. When we actually apply the token, it all works properly, it is just the preview in the variables window that shows the wrong color.
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!
