SCSS Global variables

Question

I am wanting to have a global asset path for a light mode and dark mode.

$asset-path: "/assets/LightMode/PNGs" !default;

when the body has the class .dark, this needs to change to:

$asset-path: "/assets/DarkMode/PNGs";

This $asset-path is being used by quite a few elements down the line, but there are a few problems with getting this working:

• I can't use CSS variables eg var(--name) because they don't get interpreted before the URL is read so it tries to access the URL var(--name)/asset
• I am using Angular as a framework and I need to use these variables in a local CSS file so I can't access the body element.
• Using $asset-path: "/assets/DarkMode/PNGs" !global; inside body.dark sets the theme regardless of whether the body actually has that class or not

So how do I set global SCSS variables if the body has a class of dark? Is there a better way of doing this that I have not thought of?