Back to home

Theme Playground

Choose a preset and inspect how gnome-ui tokens behave across light and dark mode with real UI examples.

Theming docs

Active Token Preview

The selected theme updates --primary and related semantic tokens globally.

Active preset: Ubuntu Orange

Component Examples

Buttons, badges, cards, alerts, and links powered only by semantic tokens.

primaryneutraldestructivesuccess

Tokenized Card

This surface inherits border, muted text, and focus ring from global token variables.

Read docs

Token Ramp

Quick visual pass of your active semantic colors.

primary

accent

muted

card

Quick Apply Snippet

Store and re-apply the chosen preset with data-theme.

const selected = "default";
document.documentElement.setAttribute("data-theme", selected);
localStorage.setItem("gnome-ui-theme", selected);

Theme Usage Examples

Reference snippets for app shell, callouts, and code surfaces.

<main className="bg-background text-foreground" />
<button className="bg-primary text-primary-foreground" />
<div className="border border-border bg-card" />

All components style constants

Copy-ready snippets for all components in this page, focused on tokenized colors and key interaction/animation classes.

const styleButton = "inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors duration-150 hover:bg-primary/90 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50"
const styleButtonGhost = "inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium text-foreground transition-colors duration-150 hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-ring"