CSS Set Colour Depending on Another Element

Question

I have a number of html elements on my page, for example;

<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 CSS background-colour and text-colour for these sections are set in the Joomla 3.x Template settings, this is my 'Brand Colour' - see the image below.

If I choose Preset 1 in the template settings then preset1.css is loaded in the website front end, if I select Preset 2 then preset2.css is loaded in the website front end etc.

My issue is that I have other custom elements on the page (e.g. <div id="left"> in the code above). The background colour and text colour for these elements aren't set or controlled via the template settings, instead I have to manually set these in a custom.css file, which works, however I have to change this custom.css file to every time I change my 'Brand Colour'.

Basically, I'd like my custom elements to take on the same 'Brand Colours' that I specify in the template configuration. WIthout me having to change the custom.css file all the time.

So, <div id="left"> background-colour and text-colour should match <section id="top-bar"> background-colour and text-colour.

Is it possible to dynamically set the CSS using JavaScript or similar?

Thanks

Answer 1

You can use js to get background-color of #top_bar element and add that color as background to other elements you want, in this case its siblings. Same is for text-color.

var top_bar = $('#top-bar')
var bg = top_bar.css('background-color')
var color = top_bar.css('color')

top_bar.siblings().css({
  backgroundColor: bg,
  color: color
})

section, div {
  width: 50px;
  height: 50px;
  display: inline-block;
}
#top-bar {
  background: #22B8F0;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="top-bar">
  Text
</section>
<section id="header">
 Text
</section>
<div id="left">
  Text
</div>
<section id="footer">
  Text
</section>