Theme EnterUI with FroggDesign and EnterUI CSS variables.
EnterUI reads component-facing --eui-* variables. Those variables default to FroggDesign --fd-* variables from @froggdesign/theme.
@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";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:
<section data-theme="dark">
<Card>Dark scoped surface</Card>
</section>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.
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>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;
}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;
}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;
}EnterUI components commonly read variables for:
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.