Oxygen Global Colors And SCSS

Tagged: ,

Author Posts

diywm

Hi Sebastian

When I set up Oxygen global colours I end up with something like this in Oxygen.
Global Colours in Oxygen

I can refer to the first colour, $brand1, in Oxygen’s various CSS locations as color(1) so for example I can write in CSS background-color: color(1);

But in Microthemer I use SCSS and even though Microthemer itself does not object to the above CSS, it does not work on the web page which ignores the CSS as color(1) is not being translated. It is inserted into the page as background-color: color(10); which is invalid.

How can I refer to a colour in the global list of colours within microthemer’s SCSS code window, by name, and have it work?


Sebastian

Hey,

I would need to see how Oxygen is managing global colors, and review your setup. I might be able to figure this out by checking the page you’ve tried to set color(1) on. Could you post a link? Or if you don’t mind, send access details for the site via our secure contact form?

Thanks,
Sebastian


diywm

Hi Sebastian

I have set up a test site for you – I will send details in the contact form.

regards
Liz


Sebastian

Hey Liz,

Thanks for setting up the demo and explaining things clearly in the video.

I can see from inspecting the page that Oxygen adds static colors to the CSS stylesheet. So it must internally replace variables before applying the CSS. color(1) etc is custom Oxygen syntax, rather than being CSS or SCSS syntax. So Microthemer can’t make use of these variables, as they only have meaning within Oxygen’s internal system.

MT could make use of regular CSS variables however, and these can be defined in Oxygen using the Agency Tools plugin. So you would setup your variables using Agency tools, and then you can apply them via the Oxygen interface and in Microthemer by referencing the variable name using the following syntax:

background-color: var(--your-var-name);

Does that seem like a good option?

Thanks,
Sebastian

You must login or register to reply to this topic.