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.
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?