Theming: css variables, globals & locals
Last updated
Details
- values are declared in
$settings
- custom properties are declared in
:root {}
in global cssbase
- custom properties are used in global css, also in
base
- custom properties are used in local css, in components
Why?
- explore uses cases of run-time themeing
- user settings, local storage (will it FOUC?)
- styling with overrides, locally in components
Trade-offs
- super involved, some scss cruft
- it's a progressive enhancement, not fully polyfilled at the moment, but fallbacks are always provided