Skip to main content

I’m working on setting up variables for a dark mode/light mode toggle, but I’m struggling with naming conventions.


Currently, I have a variable named “White” that is set to #000 for Dark Mode and #fff for Light Mode. Conversely, I have “Black” that is set to #fff for Dark Mode and #000 for Light Mode. However, this naming causes confusion. For instance, in Light Mode, using the “White” variable actually gives me a black color.


I’ve attached a screenshot of my variables panel for reference.


Screenshot 2023-08-21 at 19.05.16


I’ve considered names like “Background” or “Typography”, but they don’t quite work because a color like Black might be used in various elements, such as buttons, backgrounds, badges, and more.


Any suggestions for more intuitive variable names?

Hello, the way I solved this issue in my own file is as follows:


Screenshot 2023-10-17 at 11.26.42


I only use the names black and white when I want black and white to remain the same in all modes. However, when I want them to change inversely, I prefer to use gray, which is the common tone of both, instead of using the names white and black that cause confusion.

I’ve been messing around with this as well. Ultimately it should align with how engineers are building it, but if we’re just talking about Figma files in isolation here is an idea…


Name the colors semantically based on how they are used (text, background, etc) along with the contrast of the element. Since a high-contrast element may be black in light mode and white in dark mode, using something like text-max tells the designer/engineer that this text has the highest level of contrast, but the name does not reference the actual color of the element. When it comes to color variables that can be used on buttons, backgrounds, etc. you could use primary-max, primary-high, primary-low, etc.


I’m trying this now and it works ok. I’m sure there is something better…

Reply


Terms & ConditionsCookie settings