Theming

:root {
  --primary: oklch(0.55 0.2 260);
  --primary-foreground: oklch(0.985 0 0);
}

The components read the same CSS variables as shadcn/ui. A site that uses shadcn/ui already defines them. A variable you leave out falls back to Median's light theme.

Variables

--popover, --accent and --secondary have no visible effect on the components. For --radius, see Corners.

:::warning The visitor's bubble is color-mix(in oklch, var(--muted), var(--foreground) 12%) with no fallback. Define both --muted and --foreground, or the visitor's bubble has no background. The glow around the highlight ring reads --primary the same way. :::

Where to set them

Set the variables on :root or html. The modal, the highlight ring, the feedback panel, and the widgets from mountMedianSupport, mountMedianSupportModal and mountMedianFeedback render into <body>, outside any wrapper element in your app. The contact form and a MedianSupport you render yourself inherit from wherever you place them.

Dark mode

The components have no dark palette of their own. Define your dark values and they follow, whether you switch themes with a class or a media query.

.dark {
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --foreground: oklch(0.985 0 0);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
}

A few small fills and borders, and the logo in the Powered by Median line, switch with your theme: a dark class or data-theme="dark" on the page. The operating system's setting does not change them, so a light site stays light. A site that switches themes with only a media query gets its own dark colours, with those few details left light.

Corners

Your --radius does not change the components' corners. Only the highlight ring reads it.

Fonts and sizes

• The components use your page's font-family. Code uses the system monospace stack.
• Sizes are in rem. A root font size other than 16px scales every component.
• On screens narrower than 40rem, text fields use 16px text so iOS does not zoom in.

Motion

Two variables set the easing of most transitions.

The stylesheet declares both on the components' own root, so a value on :root does not reach them. Set them on [data-median-widget], outside any @layer:

[data-median-widget] {
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
}

Durations are fixed. The launcher's flight to the edge after a drag, the contact form's sent mark and bubbles changing size run in JavaScript and ignore both variables.

When the visitor's system asks for reduced motion, the components turn their animations and transitions off.

Scoping

Every rule in @mediansh/widget/styles.css is limited to elements under [data-median-widget], so your page keeps its own styles. The stylesheet carries a reset scoped the same way, and the components look the same on pages without Tailwind.

These roots carry the attribute: