Theming

EnterUI reads component-facing --eui-* variables. Those variables default to FroggDesign --fd-* variables from @froggdesign/theme.

#Theme Entry Points

@froggdesign/theme exports four CSS files:

• @froggdesign/theme/styles.css
• @froggdesign/theme/tokens.css
• @froggdesign/theme/light.css
• @froggdesign/theme/dark.css

Use styles.css for normal apps. It includes token variables plus light and dark semantic mappings.

import "@froggdesign/theme/styles.css";
import "@froggdesign/enter-ui-react/styles.css";

#Light And Dark Mode

Use data-theme on a root element to choose the semantic theme.

export function AppShell({ children }: { children: React.ReactNode }) {
  return <html data-theme="dark">{children}</html>;
}

You can also scope themes to product areas. EnterUI rebinds its variables at each explicit light or dark boundary, including a light section inside a dark area:

<section data-theme="dark">
  <Card>Dark scoped surface</Card>
  <section data-theme="light">
    <Card>Light scoped surface</Card>
  </section>
</section>

Portaled content inherits the theme of its portal container, usually document.body. Use the root theme for overlays, or place a supported portal container inside the themed area. A nested trigger alone does not theme an overlay rendered outside that area.

#Variable Layers

EnterUI uses two layers of CSS variables:

• --fd-* from @froggdesign/theme — the FroggDesign token source of truth.
• --eui-* from @froggdesign/enter-ui-react — component-facing aliases used by EnterUI CSS.

Two layers let you rebrand EnterUI components without changing every non-EnterUI surface that also consumes FroggDesign tokens.

#Common Override Strategy

#1. Scope-level overrides

Use scoped variables when one product area needs a local feel.

.billing-console {
  --eui-primary: #2563eb;
  --eui-primary-foreground: #ffffff;
  --eui-ring: #60a5fa;
  --eui-radius-md: 8px;
}

<section className="billing-console">
  <Button>Save billing settings</Button>
</section>

#2. App-wide overrides

Override variables after importing EnterUI CSS so cascade order picks your values.

@import "@froggdesign/theme/styles.css";
@import "@froggdesign/enter-ui-react/styles.css";

:root {
  --eui-primary: #2563eb;
  --eui-ring: #60a5fa;
  --eui-radius-md: 8px;
}

[data-theme="dark"] {
  --eui-primary: #818cf8;
}

#3. Token-level overrides

Override --fd-* only when the entire FroggDesign theme should change.

:root {
  --fd-background: #fafaf9;
  --fd-foreground: #18181b;
}

[data-theme="dark"] {
  --fd-background: #0c0a09;
  --fd-foreground: #fafaf9;
}

#Component-Level Overrides

Use className for local adjustments and wrapper components for repeated product patterns.

import { Button } from "@froggdesign/enter-ui-react";

export function ProductAction() {
  return <Button className="product-action">Publish</Button>;
}

.product-action {
  min-width: 140px;
}

#Important Variables

EnterUI components commonly read variables for:

• background, foreground, surface, card, and muted surfaces
• border, ring, focus-ring, and focus-visible states
• primary, secondary, destructive, success, warning, error, and info tones
• radius, shadow, spacing, and typography

#Finding Variable Names

Open a rendered component in DevTools, inspect the relevant rule, follow the var(--eui-...) source, and override that variable. For durable product overrides, prefer variables over targeting deep DOM structure.