Update the value of a variable in SCSS with a click event

Question

Update the value of a variable in SCSS with a click event

I have been working on developing online courses using a template created by another developer in SCSS and vue.js. The color scheme of the template is based on the SCSS variables $primary and $secondary. I am considering adding a color-blind option that would allow users to switch between complementary colors for Normal, Deuteranopia, and Tritanopia spectrums.

This is still in the design prototype phase, but my idea is to have circular color options in a dropdown menu that can change the primary color of the entire page when clicked.

https://i.sstatic.net/1ut0h.png

Since I am not very familiar with vue and scss, I am uncertain about how to implement this. My plan is to update the $primary: ""; variable based on the user's selection. For example:

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

I am also considering incrementing the value of $primary by 1 or 2 depending on the user's choice, but I am unsure about the specifics.

Any suggestions or guidance would be greatly appreciated! 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>

javascript vue.js sass scss-lint

Answer 1

Answer №1

Regrettably, scss is unable to achieve this functionality (although it would be truly amazing). The reason for this limitation is that scss compiles into standard css code. Therefore, your scss variables cease to exist once the page is loaded by the client.

However, you can take advantage of css properties/variables instead, as they do allow for rendering! https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

Essentially, tasks like changing colors become quite straightforward!

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>

Answer 2

Regrettably, scss is unable to achieve this functionality (although it would be truly amazing). The reason for this limitation is that scss compiles into standard css code. Therefore, your scss variables cease to exist once the page is loaded by the client.

However, you can take advantage of css properties/variables instead, as they do allow for rendering! https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

Essentially, tasks like changing colors become quite straightforward!

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>

Update the value of a variable in SCSS with a click event

Answer №1

Similar questions

Harnessing the power of Bootstrap 5 alongside VueJS 3

execute regular javascript with angualrjs

Transfer the index of a for loop to another function

It is not possible to utilize Vue.js to employ the <slot> feature for rendering the parent component

Sending calendar events through ajax response in jQuery FullCalendar can be accomplished by following these steps:

The JSON.parse function encounters issues when trying to parse due to a SyntaxError: Unexpected character found after JSON at position 2, causing it to be unable

Shader error in Three.js occurring on various computers with the same browser

Refreshing a Particular JavaScript File in Electron Upon Request

Can you explain the functionality of this code in terms of conditional statements without the use of "if" or "else if" statements?

Utilizing jQuery's map function to extract data attributes from lists and store them in an array

I'm getting a "module not found" error - what's the solution?

Troubleshooting issues with AngularJS's minDate functionality

Having trouble retrieving the table value from an HTML document?

Dealing with Laravel and AJAX - Issue with Loading DIV

Obtaining an array of weeks for the previous two months from the current date using JavaScript

Adjusting the styling of a webpage in real-time

How can recursion be implemented when the items are interdependent?

An unexpected error occurred: ReferenceError - document is undefined

I am experiencing difficulties with my focusin not functioning properly for the input element that I added

Enhancing middleware chaining in Express