Theming
Start with the variables Ein UI actually exposes, then use component classes for changes that belong to one surface.
Shared glass tokens
These variables are defined in `app/globals.css`. Override them in the consumer project’s global stylesheet or theme selector.
:root {--glass-bg: rgba(255, 255, 255, 0.1);--glass-border: rgba(255, 255, 255, 0.2);--glass-shadow: rgba(0, 0, 0, 0.37);--glass-highlight: rgba(255, 255, 255, 0.2);--glass-glow-cyan: rgba(6, 182, 212, 0.3);--glass-glow-blue: rgba(59, 130, 246, 0.3);--glass-glow-purple: rgba(168, 85, 247, 0.3);}
Where overrides belong
Global
Use `:root` for the default visual system shared by every component.
Dark mode
Use `.dark` for darker surfaces and softer glows when your app toggles a class on the root.
One component
Use `className` or a local selector when a single surface needs a different treatment.
Create a calmer glass surface
Reduce opacity and border contrast together. Blur needs a meaningful background behind it; it cannot create separation on its own.
:root {--glass-bg: rgba(255, 255, 255, 0.06);--glass-border: rgba(255, 255, 255, 0.14);--glass-glow-cyan: rgba(6, 182, 212, 0.18);}
Variables and utility classes are different
Some registry components use direct Tailwind utilities for local color, spacing, or layout. Changing a glass variable will not automatically replace every utility value. Use the component’s `className` API or edit the copied source when you need a local change.