Einui Liquid Glass ComponentsEinUI
Ein UI
Skip to documentation content
Customize

Dark mode

Ein UI is designed dark-first, but the copied source can follow the theme contract of your application.

Dark-first is a starting point

Transparent surfaces, blur, and glow are tuned for a dark background. In a light theme, lower glow opacity and increase border contrast so content remains legible.

app/globals.csscss
.dark {
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-glow-cyan: rgba(6, 182, 212, 0.24);
}

Connect your theme provider

The repository includes a thin `ThemeProvider` wrapper, but the current root layout does not mount it. If your app needs theme switching, wire the provider into your own root layout.

components/theme-provider.tsxtsx
"use client";
 
import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
 
export function ThemeProvider({ children }: { children: React.ReactNode }) {
  return (
    <NextThemesProvider attribute="class" defaultTheme="system" enableSystem>
      {children}
    </NextThemesProvider>
  );
}
app/layout.tsxtsx
<body>
  <ThemeProvider>{children}</ThemeProvider>
</body>

Tune light surfaces deliberately

Use the same variable names in your light theme selector. Keep the background, border, and glow values related so a transparent card does not disappear.

app/globals.csscss
:root {
  --glass-bg: rgba(15, 23, 42, 0.04);
  --glass-border: rgba(15, 23, 42, 0.14);
  --glass-shadow: rgba(15, 23, 42, 0.16);
  --glass-glow-cyan: rgba(6, 182, 212, 0.12);
}

Before you ship

  • Check text and focus contrast in both themes.
  • Test transparent surfaces over real content.
  • Avoid rendering theme-dependent UI before mount.
  • Respect reduced motion for glow and transitions.