Skip to main content

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?

Hi, Ze_Tan.


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

image

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.

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

you helped solve my issue, thx!

Reply


Terms & ConditionsCookie settings