Component Dark mode dropdown showing only light mode colors

[Patrick_Loubet]

Hi,

I am creating my 1st Dark mode and I am facing a visualisation issue. When picking component color in the Dark mode, I see my light mode colors in the dropdown.
The preview once selected is right but it is kind of hard to have to pick something that does not relate in the dropdown. It there a way to change the dropdown preview?

[Junko3]

Hi @Patrick_Loubet, Thank you for getting in touch about this. I appreciate you sharing the screenshot.

It appears that the color variables highlighted in the variables modal are referencing other color variables by creating an alias.

The color variable “300” under the “base/em_danger” in the library picker seems to be the variable referenced as one of the modes of the color variable highlighted in the variables modal. You can find more details on how collections and groups appear in the library picker here: Overview of variables, collections, and modes - Collections and groups

Which one did you select as the component color, the highlighted color variable in the variable modal, or the referenced color variable?

Currently, we don’t have an option to organize variables in the library picker beyond collection and group names.
However, I did a bit of exploration and found a similar request from other community members that you might find interesting: Reorder variable collections list Please take a look at this post.

I hope this provides some clarification. Please let us know if I missed anything. If anyone in our community has additional insights, please feel free to share them here!

Once again, thank you for reaching out.

[Patrick_Loubet]

I am not sure this answer my issue. Here is how I have defined my modes. in the danger case it is the same swatch but inverted. In some other case it is a totally different color swatch. but when defining aliases the picker only show light mode samples even when I am on the dark mode column.

[Junko3]

Hi @Patrick_Loubet, Thank you for your response!

It seems like the tool may not be functioning correctly, but it’s challenging to determine the cause of the issue without reviewing the actual file.

Would you be able to submit a bug report to our support team for further investigation? You can do so by clicking here: https://help.figma.com/hc/en-us/requests/new?ticket_form_id=360001744374
When you fill out the form, please provide the following details:

• Your email address associated with your Figma account
• Direct links to the file where the issue is happening and any related library files, and make sure to add support-share@figma.com as an Editor to those files (this won’t affect your billing)
• Please provide a recording that demonstrates the issue you are experiencing. Ensure that the entire window is visible, including the properties and layers panels, with the relevant layer expanded. (Our support team uses these videos to try and replicate the problem in our own files, so detailed steps are appreciated.)

Thank you for your cooperation!