Theming the widget with --suo-* variables

The widget renders inside a shadow root, so your site's styles cannot accidentally leak in — but it reads a fixed set of --suo-* custom properties from its host element, so you can theme it deliberately.

The variables, and their defaults

Everything else about the widget's chrome — spacing, icon stroke weight, motion, the soft-highlight mix — is an internal token that stays inside the shadow root; the eight above are the whole themable surface.

Set them on the <suo-search> element itself, or higher up the tree — custom properties inherit through the shadow boundary, so setting them on :root themes every widget instance on the page.

suo-search {
	--suo-accent: #3b6ff2;
	--suo-radius: 6px;
}

The widget never forces a webfont on your page

--suo-font and --suo-font-mono default to the system stack, not a bundled brand face — the widget never loads Inter, Inter Tight or Noto Sans TC/SC on your page just to render its own chrome, CJK included. system-ui alone already resolves to a CJK-capable system font on every platform suo supports, so there is no separate --suo-font-cjk to set.

If your site already ships its own webfont and you want the widget to match it exactly rather than fall back to the OS font, point --suo-font at it the same way you would any other override:

suo-search {
	--suo-font: 'Inter', system-ui, sans-serif;
}

That is a choice you make, not something the widget assumes for you.

The soft highlight is derived, not separate

You do not set a second color for the softer, non-primary highlight. It is derived from your accent automatically:

--suo-accent-soft: color-mix(in oklab, var(--suo-accent) 30%, var(--suo-bg));

Override --suo-accent-soft directly only if the derived mix does not have enough contrast against your background.

Light and dark

The widget follows prefers-color-scheme by default. To theme both explicitly, scope your overrides the way you already scope your own site's theme:

suo-search {
	--suo-bg: #ffffff;
	--suo-fg: #0e0f11;
}

@media (prefers-color-scheme: dark) {
	suo-search {
		--suo-bg: #0e0f11;
		--suo-fg: #f3f4f5;
	}
}

[data-theme='dark'] suo-search {
	--suo-bg: #0e0f11;
	--suo-fg: #f3f4f5;
}

What is not themable

Spacing, layout and the combobox's interaction behavior are fixed — theming covers color, radius and font only, so every suo widget keeps the same accessible, keyboard-tested layout regardless of the host site's skin.

Trying it live

The playground's widget preview includes a theme editor that writes these same variables, so you can find values that work before copying them into your site's stylesheet.