Great question, I tried this and noticed that we didn’t properly support using background images or theme variables in the special color definitions stylesheet. So I made some fixes in core, and you should be able to do this now (make sure you pull the latest core).
So, if you have two images in your theme or theme component, with SCSS vars of $bg-light
and $bg-dark
respectively, you can add this to your color_definitions.scss
stylesheet:
$bg: url(dark-light-choose($bg-light, $bg-dark));
:root {
--custom-bg: #{$bg};
}
And then you can use var(--custom-bg)
in your regular stylesheet.