Item15177: add css variables to ui theme
Priority: Enhancement
Current State: New
Released In: 2.2.0
Target Release: minor
This will add a lot more flexibility and lets skins & jquery.ui be styled in a uniform fassion using css variables. See
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties for more info.
Basically, any hard coded color such as
.ui-widget {
background: #ffffff;
color: #111;
}
will become
.ui-widget {
background: var(--ui-widget-background, #ffffff);
color: var(--ui-widget-foreground, #111);
}
These properties may be styled using:
:root {
--ui-widget-background: #...;
--ui-widget-foreground: #...;
}
:root[data-theme='dark'] {
--ui-widget-background: #...;
--ui-widget-foreground: #...;
}
in a skin's
vars.css
Note that values will default to the old colors in case no css variables are provided.
--
MichaelDaum - 17 Jan 2023