Themes
Five choices make a theme: an accent, a base colour, a radius, a font and a style. Everything else is derived from them, and every text colour is checked for contrast, so no combination here is unreadable. Pick a preset or set each one, then copy the CSS or share the link.
Applies to the whole site, and is remembered in this browser.
Presets
Whole themes, all five choices at once. Adjust any of them afterwards.
Customise
Theme colour
Volt
Base colour
Sage
Radius
Default · 1×
Cards, fields, menus and checks follow the scale. Pill buttons and badges stay pills.
Font
Served by Google Fonts. The library never loads it by itself: link it, or call loadFont.
Style
Soft
Hairlines and a light shadow. The default.
Mode
Always site-wide
Preview
Plus Jakarta Sans · 1× radius · Soft
Use it
Paste the CSS after the library’s stylesheet for a theme with no runtime, or call applyTheme to switch at runtime. The link opens this page with the theme applied.
/* Klyv theme c8f24e.sage.default.plus-jakarta.soft, from themeToCss(). *//* The font is not bundled. Load it in your <head>, or with: @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); *//* This is the default theme: nothing to override. */Theme string: c8f24e.sage.default.plus-jakarta.soft