SCSS Modify the variable of a variable on click

Question

I'm using a template from another developer made in SCSS and vue.js to develop online courses. All colors are using the SCSS variable $primary and $secondary. I was thinking of inserting a color-blind option that would cycle through complementary color for the Normal, Deuteranopia and Tritanopia spectrums.

I'm not finish with the design yet, just a prototype, but it'd be a circles in a dropdown that would update the primary color of the entire page on click.

I'm not exactly sure how to write it as i'm not too familiar with vue and scss, but it would change the variable of $primary: " "; by another variable from the choice selected. For exemple:

 $(".changePrimaryColor").click(function(){
     $primary == $theme-blue;
 });

I thought of also incrementing the variable of $primary by 1 until 2 or 3, but not sure.

Any lead would help, thank you!

// Theme colors
$theme-green: #c4d600;
$theme-blue: #1a397c;
$theme-red:#9b1717;

$primary: $theme-green;
$secondary: $theme-red;
$success: #288515;
$danger: #a61616;
$warning: #efa92c;

$theme-colors: (
    "primary": $primary,
    "secondary": $secondary,
    "success": $danger,
    "danger": $success,
    "warning": $warning,
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.2/sass.min.js"></script>

Answer 1

Unfortunately scss can't do this (but it would be awesome). This is because scss compiles to normal css. So your scss variables do not exist anymore when the clients loads the page.

Fortunately you can use css properties / variables instead, which do re-render! https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

This means that something like changing colours is pretty simply!

const button = document.querySelector('button')

function changeColor() {
  document.body.style.setProperty("--bg-color", 'DodgerBlue');
}

button.addEventListener('click', changeColor)

:root {
  --bg-color: tomato;
}

body {
  background: var(--bg-color);
}

<button>Change color</button>