Skip to main content
Solved

Color variables show wrong preview for dark mode

  • September 24, 2025
  • 7 replies
  • 345 views
Ninaa

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.

Best answer by Jaycee Lewis

Hey all. This one is working as designed, though we completely understand why the preview behavior feels like a bug. A teammate of mine answered an identical setup in another thread with input from engineering:

“When you create a cross-collection alias where both collections define 'light' and 'dark' modes, those modes are disconnected—Figma will always render the default mode of the aliased set, regardless of which mode the token is being picked into. There is no name-matching across collections. We recommend defining only one mode in the primitives/foundations collection and using the semantic collection to determine light/dark mode.” (slight style edit)

So, to translate that into a solution:

  • Keep your foundation/primitive collection in a single mode (raw values only)

  • Define light and dark modes only on the semantic collection that aliases into it

The output is already correct in your setups — this change just makes the swatch preview what you’d expect.

Hope this unblocks you! — Jaycee

    7 replies

    陳又瑄
    • 陳又瑄
    • New Member
    • September 27, 2025

    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!

      antaautumn
      • antaautumn
      • New Member
      • October 2, 2025

      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.

       

      Rebekka_Zorn
      • Rebekka_Zorn
      • New Member
      • October 13, 2025

      Hello everyone,

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

      Base color mapping
      icon color Mode2 shows mode1 color
      ​​​​​​
       

      Thank you very much

      Bram Huisman
      • Bram Huisman
      • New Member
      • March 26, 2026

      Hi there, i’m experiencing the same issue! How can we fix this? It’s really annoying. 

      Brett_Taylor1

      experiencing the same issue. needs to get fixed.

      Jaycee Lewis
      Figmate
      • Jaycee Lewis
      • Figmate
      • Answer
      • May 1, 2026

      Hey all. This one is working as designed, though we completely understand why the preview behavior feels like a bug. A teammate of mine answered an identical setup in another thread with input from engineering:

      “When you create a cross-collection alias where both collections define 'light' and 'dark' modes, those modes are disconnected—Figma will always render the default mode of the aliased set, regardless of which mode the token is being picked into. There is no name-matching across collections. We recommend defining only one mode in the primitives/foundations collection and using the semantic collection to determine light/dark mode.” (slight style edit)

      So, to translate that into a solution:

      • Keep your foundation/primitive collection in a single mode (raw values only)

      • Define light and dark modes only on the semantic collection that aliases into it

      The output is already correct in your setups — this change just makes the swatch preview what you’d expect.

      Hope this unblocks you! — Jaycee

        AlicePackard
        • AlicePackard
        • Power Member
        • May 2, 2026

        This sounds like a similar issue to what I helped another user with in a separate thread: 

         

        The solution described above by ​@Jaycee Lewis  matches my solution I gave in the other thread! Primitives should just have 1 mode. Primitive variables get aliased into collections with more than 1 mode (like a Color Theme collection with Light and Dark)

        I write about building excellent Figma components on my blog: https://alicepackarddesign.com/blog
          Terms & ConditionsAccessibility statement