Hello,
I feel I am so frustratingly close to solving this. I’ve enabled stylesheet.css in my project where I want to declare some color variables to reuse. I don’t have access to the themes or colors css (large organization, I have to stay contained in this project). I’d like to be able to use my variables as we do with theme colors but its just not working.
Here is my stylesheet.css
:root{
--ignition-red:'#DA291C';
}
and when I try to reference it in fields, its just not picking it up.
I’ve tried as many flavors as I can think of, like wrapping it in var(), popping the variable out of :root, etc. and its just not working. I feel like I’m very close.
Any help getting me over the finish line would be much appreciated.
Thanks
Are you testing it in your designer or in a separate browser? Var(—variable) should work, but it will not work in designer. When you save the project and test in a browser it will work correctly.
son-of-ah… I swear I tried that. Its working now. Once I closed designer and reopened it, it also shows in designer. I think I just got so topsy-turvy trying everything. Thank you for your help.
For those that need this later, this css and these implementations work…
:root{
--ignition-red: #DA291C;
}
Pretty sure you have to save changes to the stylesheet before they take effect in designer too, and yes, no quotes around the hex colour (or hsla() colour, if you're human!)
Tip: don't embed colors in your CSS color variable names. I got caught out with that about twenty years ago when I built an orange theme and named all the styles as orRightAligned etc. It was fine until I wanted to change everything to another color.
Instead, name by the purpose of the class. You can see this in practice in Perspective Built-In Themes | Ignition User Manual where the variables are --error and success even though they are red and green in practice.
4 Likes
