Reference / Reuse Backend defined Theme Colors in CSS

Hi,

I am currently working on a generic enfold-child-theme that I can reuse in my projects. It contains styles which I use in almost every enfold project.

Is there a way to reuse the colors I defined in the backend? Currently, I am working with css variables like this:

:root {
  --main-content-background-color: #f8f8f8;
  --main-content-primary-color: #f05a1a;
  --main-content-font-color: #8d8d8d;
  --main-content-heading-color: #f05a1a;
  --main-content-alternate-background-color: #ffffff;
  --main-content-highlight-color: #f05a1a;
  --main-content-secondary-font-color: #666666;
  --main-content-border-colors: #e1e1e1;
}

tag.some-class{
  color: var(--main-content-highlight-color);
}

With this solution, I can reference the theme colors everywhere. But changes have to be made not only in the backend but also in the child theme style sheet. I was wondering if there is some globally defined variable, which lets me reuse the colors, predefined in the theme dashboard without the need to redefine them in my own stylesheet.

Thank you :)

• This topic was modified 5 years, 9 months ago by The Shadow.