In my design library, I’ve created a component a component with a light transparent image background, I want it to switch to a dark transparent image background if in dark mode - This seemed the only way to add transparency that didn’t apply to the child elements inside of the component.
This usually works fine for most elements using local color variables in this design library… but I can’t make an image a variable.
How have others solved this challenge? I don’t want to do this with interaction triggers, because this is a library element, and I don’t want to create a variant, because that defeats the purpose of having a mode.
Question
Transparent background on component & variables
I don’t quite understand the issue. You can make the background transparent in components without affecting its children.
Ah… I figured it out mostly. I might’ve selected a wrong place to change opacity and thought it was affecting the entire box.
But separately, My variables were referencing other base-level variables, and that doesn’t show a percentage option in the variable collection - I only get an opacity percentage if I choose a color instead of referencing another variable, it seems.
Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.