Theming

Every colour, radius and shadow in GlobUI is a CSS custom property with the --glob- prefix. The components use only the glob-* utilities (bg-glob-surface, text-glob-text-secondary), so changing a token changes every component.

TokensCopy Anchor Link

Light values are the default. Dark values apply when data-theme="dark" is set on <html>, or when the user prefers a dark colour scheme and has not chosen a theme. The values below are read from packages/styles/glob-ui.css at build time.

Which token for which textCopy Anchor Link

Use --glob-text for body text and --glob-text-secondary for helper text, placeholders, and icons that carry meaning (a chevron that shows an open list, for example). Both pass WCAG AA on every surface GlobUI uses, in light and dark.

--glob-muted is for decorative use only (dividers, purely visual icons) and is not used for text. Its light value fails 4.5:1 on white, so it must not carry information.

Light and darkCopy Anchor Link

Set data-theme="light" or data-theme="dark" on <html> to force a theme. Leave it unset to follow the system.

This site uses next-themes through Fumadocs' RootProvider, with attribute: ["class", "data-theme"]. One toggle then sets both the dark class that Fumadocs reads and the data-theme attribute that GlobUI reads. A blocking script in <head> sets the attribute before the first paint, so there is no flash.

import { RootProvider } from "fumadocs-ui/provider/next"

<RootProvider theme={{ attribute: ["class", "data-theme"], defaultTheme: "system", enableSystem: true }}>
  {children}
</RootProvider>

Your app does not need Fumadocs. Without it, write the attribute yourself, for example with a small script that reads localStorage before paint.

Overriding tokensCopy Anchor Link

Redefine a token on :root after importing the styles. The later rule wins.

@import "@glob-ui/styles";

:root {
  --glob-primary: #0f766e;
  --glob-primary-foreground: #ffffff;
}

:root[data-theme="dark"] {
  --glob-primary: #5eead4;
  --glob-primary-foreground: #042f2e;
}

Primary and its foregroundCopy Anchor Link

--glob-primary is the brand colour: the fill of buttons, selected states and the active marker. The default is a teal (#33CFA8). Dark text sits on it (--glob-primary-foreground, #171717), at about 9:1, so the foreground is dark in both themes.

The teal is light, so it fails as text or as a focus line on white (about 2:1). Use --glob-primary-text for anything the primary colour does as text, links, or a line: it is a darker teal in light mode (#0F7F68, at least 4.5:1 on white and on the pale tint) and the same teal as the fill in dark mode. --glob-ring is the focus ring: at least 3:1 on the surface.

--glob-primary-hover and --glob-primary-light (the tint behind selected chips) are set beside the primary. If you change the primary, check that the foreground keeps at least 4.5:1 on the fill and on its hover, and that the text token keeps 4.5:1 on the tint.