Customization

Dark Mode

Ein UI components are designed dark-first, with optional light mode support.

Dark-First Design

Ein UI is optimized for dark backgrounds

The liquid glass aesthetic works best on dark backgrounds where the transparency, blur effects, and glowing gradients can truly shine. All components are designed with dark mode as the primary use case.

/* Recommended background */
.app-background {
  background: linear-gradient(
    to bottom right,
    #0f172a,  /* slate-900 */
    #1e1b4b,  /* purple tint */
    #0f172a   /* slate-900 */
  );
}

Theme Provider

Using next-themes

Set up theme switching with next-themes

npm install next-themes

theme-provider.tsx

// components/theme-provider.tsx
"use client"

import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"

export function ThemeProvider({ children, ...props }) {
  return (
    <NextThemesProvider
      attribute="class"
      defaultTheme="dark"
      {...props}
    >
      {children}
    </NextThemesProvider>
  )
}

Light Mode Support

While dark mode is recommended, you can add light mode support with adjusted variables:

globals.css

.light {
  --glass-bg: rgba(0, 0, 0, 0.03);
  --glass-border: rgba(0, 0, 0, 0.08);
  --text-primary: rgba(0, 0, 0, 0.9);
  --text-secondary: rgba(0, 0, 0, 0.6);

  /* Softer glows for light mode */
  --glow-cyan: rgba(6, 182, 212, 0.15);
  --glow-purple: rgba(147, 51, 234, 0.15);
}