pleate.ui

Getting started

Theming

Light, dark or system. Eleven palettes, or your own from a single color: pleate derives fills, inks and a full tonal scale in OKLCH and checks every pair for WCAG AA contrast.

Palette

Roundness

1.50×

light

Aaaccent + on-accent#2563eb
5.17 AA
accent-ink#2563eb
4.95 AA

dark

Aaaccent + on-accent#2563eb
5.17 AA
accent-ink#588fff
5.95 AA

Scale

In code

"use client";
import { useTheme } from "pleate/theme";

const { theme, setTheme, palette, setPalette, setCustomColor } = useTheme();
setTheme("dark");          // "light" | "dark" | "system"
setPalette("teal");        // any preset name
setCustomColor("#ff2d55"); // generates and applies a palette
// Server side, or a fixed brand palette in your own CSS
import { createPalette, paletteToCss } from "pleate/theme";
const css = paletteToCss('[data-palette="brand"]', createPalette("#0a84ff"));
<!-- Scope a palette or theme to any subtree -->
<section data-palette="rose" data-theme="dark">…</section>