<div class="theme-default">
  <p class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam tenetur vero molestias aliquid, nemo molestiae quisquam ad. Soluta officia repellat quo, labore dolore beatae aliquid totam error, veniam maxime nisi.</p>
</div>
<div class="theme-blue">
  <p class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam tenetur vero molestias aliquid, nemo molestiae quisquam ad. Soluta officia repellat quo, labore dolore beatae aliquid totam error, veniam maxime nisi.</p>
</div>
<div class="theme-green">
  <p class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam tenetur vero molestias aliquid, nemo molestiae quisquam ad. Soluta officia repellat quo, labore dolore beatae aliquid totam error, veniam maxime nisi.</p>
</div>

$primary: red;

:root {
  --primary: #{$primary};
}

// пишем темы
.theme-blue {
  --primary: blue;
}
.theme-green {
  --primary: green;
}

// Какой-то дефолтный бутстраповский блок
.block {
  color: $primary;
  color: var(--primary); // допишем эту строчку
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.