I would like to allow an admin to change the skin of one of my sites through a color-picker affecting change on a universal sass variable.
I know that there are ways to affect live css through jQuery, etc, but I would like to actually modify the scss variable. Here is the example: http://ift.tt/1ZVdMRx
As you can see, using the color picker only changes the <body> attribute, but I would like a method to change the $main-color variable so the entire <html> background changes.
I'm not sure if the best method involves a SAVE button or how to get it to work and am definitely open to ideas or other interpretations.
If you would prefer the actual code (instead of jsbin example) I'm working with here it is below:
templates/settings.hbs
<table>
<tr>
<th>Property</th>
<th>Color</th>
</tr>
<tr>
<td>$main-heading-color</td>
<td>
<div id="color-pick">
</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 addon: http://ift.tt/1V58SlL
Aucun commentaire:
Enregistrer un commentaire