Theming

Theme tokens control color, radius, and typography across imported and ejected components.

Light and dark

Use your framework's Tailwind CSS 4 integration:

@import "tailwindcss";
@import "earthling-ui/index.css";
@import "earthling-ui/themes/dark.css";

@layer base {
  :root[data-theme="dark"] {
    @apply theme-dark;
  }
  @media (prefers-color-scheme: dark) {
    :root[data-theme="system"] {
      @apply theme-dark;
    }
  }
}

Set the root's data-theme to light, dark, or system. The root canvas and native controls follow the theme. Apply theme-dark to a container for a scoped theme, keeping portaled overlays in mind.

Customize

@layer base {
  :root {
    --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
    --radius-control: 0.75rem;
    --color-primary: oklch(0.45 0.16 265);
    --color-primary-foreground: oklch(0.98 0 0);
  }
}

Dark mode changes color tokens without resetting your radius. Use className for individual component overrides.

Tokens

Each scheme has --color-<scheme> and --color-<scheme>-foreground. Set both together and check text contrast. The package's src/index.css and src/themes/dark.css are the source of truth for default values.