Open Wolfr opened 11 years ago
The goal of the skinning mechanism is to have the whole UI to be built up from a single accent color.
This seems relatively hard to do "automatically" involving a lot of color math.
This is the current implementation:
$accent-color: #155663 !default; // Accent color is supposed to be something like purple, red, blue
$accent-color-primary: adjust-saturation(adjust-lightness($accent-color, 25%),30%) !default;
If you do it this way it doesn't work for really bright colors. If you put in the bright blue as above the difference isn't enough.
We can add an if structure to check the lightness if $accent-color
so we can tweak $accent-color-primary
depending on that value:
$accent-color-primary: if(lightness($accent-color) > 50%, adjust-saturation(adjust-lightness($accent-color, -30%),30%), adjust-saturation(adjust-lightness($accent-color, 30%),30%));
( See https://github.com/nex3/sass/issues/817 )
However this doesn't really work:
$accent-color
(see https://github.com/nex3/sass/issues/612 ) where instead of the expected darker/brighter (still monochrome button) you get a button with red-ish hue.
difference is not enough