Make the themes editable via UI as well as the graphs color.
"Warriors" theme has a blue background, which makes it hard to identify a graph in blue. I'm sorry to say, but I don't like the graphs color at all.
So please make the graphs and the themes color editable via UI.
#9 Updated by Peter Southwell over 3 years ago
So.. If I WERE to do the themes.. Ive thought of such a simple way... SAAS.. Makes variable substitution.. really complicated... They're meant to be static generated before run time.. By WebPack.. rather then scripts... So.. Replacing full functional themes.. totally simple right? but variables in those themes... boom... Suiper super hard.
But.. IVe got a simple way around it.. And maybe Damiam thought of this.. lol.. Not sure.. but I heard him say "palette something".. But.. If we have our SAAS files use global pallets defined externally... THEN.. The files would be static.. BUT.. We can change the Palletes referenced.. on the fly Super super easy... This... Would make the UI save user theme... Very simple.. Just a form.. With every main pallette name.. and.. A color popup.. Set to the current color (with edit box).. You can type in color.. Or use color wheel.. Save As Theme.. Boom.. We select.. "Dynamic Theme".... But load user color definiation.. Very simple to do this...
IF... I were asked to do the task today.. Tht's how Id do it ?
#10 Updated by Peter Southwell over 3 years ago
#11 Updated by Peter Southwell over 3 years ago
<h1 id="foo">My h1 foo element</h1>
<h1 id="norm">Standard h1 element</h1>
<p>The above should be the same color</p>
Then you can set the variable in the ThemeService
You can use document.body.style.setProperty('--name', value);:
var bodyStyles = window.getComputedStyle(document.body);
var fooBar = bodyStyles.getPropertyValue('--foo-bar'); //get
#13 Updated by Damian Szidiropulosz over 3 years ago
- Subject changed from Make the themes editable via UI as well as the graphs color to Make the themes editable via UI as well as the graphs color.
- Status changed from In Progress to Done
The solution to this one involved a total refresh of the theme engine. We have a new theme engine based on css variables that we can alter on the fly without any precompilation by sass. There is a new theme utility that allows for users to create their own custom themes by choosing color palettes. Also features a global preview feature that allows the user to walk through the site with their form colors applied. There is a preferences page now where users can set some global UI options including some theme management.