← all demos

Theming

Every custom property css/gui.css declares is on this panel — all 35 of them, colours, font and metrics. A theme is an override, never a fork of the stylesheet, and the variables reach the slider's shadow root too.

CSS being applied

theme.css

        

        

          Try: the panel on the right restyles the panel on the right — it is editing the
          custom properties on its own container, and the CSS beside it is what it wrote.
          Light theme just adds the gui-light class, which is nothing but a
          second set of the same variables. Shrink --gui-max-height and the panel starts
          scrolling; widen --gui-label-width and every row's control column moves with it.