Item15177: add css variables to ui theme

pencil
Priority: Enhancement
Current State: New
Released In: 2.2.0
Target Release: minor
Applies To: Extension
Component: JQueryPlugin
Branches:
Reported By: MichaelDaum
Waiting For:
Last Change By: MichaelDaum
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

 
Topic revision: r1 - 17 Jan 2023, MichaelDaum
The copyright of the content on this website is held by the contributing authors, except where stated elsewhere. See Copyright Statement. Creative Commons License    Legal Imprint    Privacy Policy