Use html class to change $primary, $secondary colors in Sass

1
votes

I am trying to create a Drupal site that allows for multiple color themes on individual pages, rather than the theme as a whole. I have a select menu in Drupal that allows the user to choose which color theme should apply to the page.

I use the value of this field to set the class of the page template. I now want to use this class to change the primary/secondary color value in Sass.

For example, if the user chooses blue, in the HTML template the wrapper is then and I want the Sass to look like this:

$primary: #0000ff;
$secondary: #000066;

And to have these values altered for each theme, green, yellow, etc. Is this possible?

2
htmlcssdrupalsass
I am pretty sure that you would have to use JavaScript or something like PHP or Python for this. HTML is simply a markup language, and doesn't allow for much interaction – M. Foldager

2 Answers

0
votes

Instead of using the field to change the body class, you could use it to create if/ else statements in the head to call different stylesheets that relate to the colour that has been chosen.

It would require creation of multiple stylesheets, but could be a workaround. No code to supply i'm afraid.

Sam

0
votes

First of all, you should consider doing this with switching CSS class, but not SASS. Once your site is up and running, the sass has been compiled, and it's pure html and css already, nothing to do with SASS, correct?

So in my opinion, your code might look like this:

SASS:

$theme1-primary: #0000ff;
$theme1-secondary: #000066;

$theme1-primary: #0000ff;
$theme1-secondary: #000066;

.theme1 {
    color: $theme1-primary;
    background-color: $theme1-secondary;
}

.theme2 {
    color: $theme2-primary;
    background-color: $theme2-secondary;
}

HTML:

<p class="`if something print theme1 else print theme2`"></p>