0

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.

enter image description here

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>
SlayerCat
  • 146
  • 2
  • 6
  • Welcome to [SO]. Vue is, arguably, the most approachable of all modern JS frameworks. Still, its [introduction](https://vuejs.org/guide/introduction.html#introduction) clearly specifies using it requires basic familiarity with HTML, CSS and JavaScript. In current form, your question indicates you should probably start with [the basics](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Overview). If you're in a rush, consider reaching out to the developer who made the template for you. – tao Nov 15 '22 at 22:30
  • 2
    You might consider localStorage and JavaScript(Vue) to change the theme. On its own, SASS is not dynamic – Brad Nov 16 '22 at 03:10

1 Answers1

2

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>
SaroGFX
  • 699
  • 6
  • 20