Theme

Applies to the whole site and is kept in this browser.

Cancel

Continue

Delete

That is not an email address.

Notify me about releasesSync across devices

Dialog

Popover

Refraction

Rendering

The tint is a gradient between --lq-tint and --lq-tint-deep, scaled by frost. It is what carries legibility once refraction is gone.

Accentbuttons, focus, selection

Dangerdestructive fills and messages

Textcontent on glass

Tintthe colour of the glass itself

Tint opacitylegibility vs transparency62%

Rim lightthe bright edge50%

Highlighthover wash18%

Shadowelevated surfaces1.00×

Scrimbehind dialogs48%

Derive the other mode’s accent and danger

Every themeable custom property, as CSS. Anything valid here is valid there.

Defaults for the dials components leave alone. A component that sets one for itself keeps it.

Material

Profile

Frostmaterial density0.35

Specularrim light0.7

Saturation1.7×

Dispersion3× filter cost0

Multipliers, not values. A Button asks for an 11px bezel and a Drawer for 34px; these move both and keep them in proportion.

Radius1.00×

Refraction1.00×

Bezel1.00×

Blur1.00×

Nothing changed yet — an untouched theme emits no CSS at all.