Is there a way to allow an admin to change the skin of one of my websites by selecting a color from a palette that will update a universal SASS variable?
I am aware of methods to dynamically change CSS using jQuery, but I specifically want to modify the SCSS variable. You can see an example of what I'm looking for here:
In the current setup, changing the color picker only affects the <body> attribute. However, my goal is to create a function that alters the $main-color variable so that the entire background of the <html> element changes.
I'm unsure whether implementing a SAVE button is necessary or how to make this feature functional. I am open to suggestions and alternative approaches.
If you prefer working with the actual code instead of the jsbin example, below are the relevant snippets:
templates/settings.hbs
<table>
<tr>
<th>Property</th>
<th>Color</th>
</tr>
<tr>
<td>$main-heading-color</td>
<td>
<div id="color-pick">
{{col-pick value=mainHeadingColor}}
</div>
</td>
</tr>
</table>
controllers/settings.js
import Ember from 'ember';
export default Ember.Controller.extend({
mainHeadingColor: '0d723c'
});
styles/definitions/variables.scss
// project specific colors
$main-heading-color: #0d723c;
Ember add-on: https://www.npmjs.com/package/ember-colpick