Skip to main content
Solved

Variables shows a mixed default mode in components

  • February 14, 2024
  • 4 replies
  • 475 views
Ze_Tan

I created two modes (Light and Dark) with semantic tokens in my library and applied them to all the components. According to the Figma documentation, the most left column of the Variables settings page is the default mode. https://help.figma.com/hc/en-us/articles/15343816063383-Modes-for-variables#h_01HMD3VBSV4SD76PH8BVZY8Z13

But in my library some components show light mode by default and some components show dark mode by default. How to solve the problem and make the all default mode as light?

Best answer by Ze_Tan

Thank for providing the solutions, but I checked all nested components and everything looks good.

I finally found the reason!!

Figma provides two ways to change the mode of variables. One is to apply different modes across the entire page and the other is to apply them on individual layers. I changed the page mode to “Dark” so all layers on the page have Dark mode overridden as the default mode. What I need to do is to make sure the Page and Layers are all set to light mode.

image

View original
Luke34
J
Vivien_Ng
6 people like this
  • Luke34
    Luke34
  • J
    Jessica_Brush
  • Vivien_Ng
    Vivien_Ng
  • Alina_Khazanova1
    Alina_Khazanova1
  • Hamid_B
    Hamid_B
  • diana.iacomi1
    diana.iacomi1
This topic has been closed for replies.

4 replies

Raphael_M
  • Raphael_M
  • Power Member
  • 394 replies
  • February 15, 2024

Hi, Ze_Tan.

Have you checked the layers if it is set to auto by default?
image

Shrivathsan_G_R

Here are two viewpoints to consider:

  1. Possibilities that there could be a manual override of the theme selection on components accidentally from light mode to dark mode
  2. Another perspective suggests that there might be two design system variables at play: one could be a published token applied from an external source, while the other might be using locally declared variables within the same file.
Ze_Tan
  • Ze_Tan
  • Author
  • 1 reply
  • Answer
  • February 15, 2024

Thank for providing the solutions, but I checked all nested components and everything looks good.

I finally found the reason!!

Figma provides two ways to change the mode of variables. One is to apply different modes across the entire page and the other is to apply them on individual layers. I changed the page mode to “Dark” so all layers on the page have Dark mode overridden as the default mode. What I need to do is to make sure the Page and Layers are all set to light mode.

image

Amanda2
1 person likes this
  • Amanda2
    Amanda2
Amanda2
  • Amanda2
  • New Participant
  • 6 replies
  • May 31, 2024

you helped solve my issue, thx!

djv
1 person likes this
  • djv
    djv
Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings