I currently have several html elements embedded within my webpage, such as:
<section id="top-bar">
<!-- html content -->
</section>
<section id="header">
<!-- html content -->
</section>
<div id="left">
<!-- html content -->
</div>
<section id="footer">
<!-- html content -->
</section>
The style attributes for these sections, such as background-color and text-color, are predetermined in the Joomla 3.x Template settings under 'Brand Color' - view the image provided below.
https://i.stack.imgur.com/7aA4x.png
When I choose Preset 1, the corresponding preset1.css is loaded on the front end of the website. The same goes for selecting Preset 2, which then loads preset2.css, and so forth.
However, a dilemma arises with other custom elements present on the page (e.g. <div id="left"> in the aforementioned code). These elements do not adhere to the template settings and require manual configuration in a separate custom.css file. This method works but necessitates changing the custom.css file every time the 'Brand Color' is modified.
Essentially, I am seeking a solution where my custom elements automatically inherit the specified 'Brand Colors' from the template configuration without constant updates to the custom.css file.
In essence, the background-color and text-color for <div id="left"> should mirror those of <section id="top-bar">.
Is there a way to dynamically assign CSS properties using JavaScript or a similar approach?
Thank you.