Customization

Theming

Customize the look and feel of Ein UI components using CSS variables and Tailwind CSS v4.

CSS Variables

Ein UI uses CSS variables for easy theming

globals.css

:root {
  /* Glass Effect Variables */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-blur: 16px;

  /* Glow Colors */
  --glow-cyan: rgba(6, 182, 212, 0.3);
  --glow-purple: rgba(147, 51, 234, 0.3);
  --glow-pink: rgba(236, 72, 153, 0.3);

  /* Text Colors */
  --text-primary: rgba(255, 255, 255, 0.95);
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-muted: rgba(255, 255, 255, 0.5);
}

Glass Effect

Adjusting Transparency

The liquid glass effect is achieved through a combination of backdrop blur, transparent backgrounds, and subtle border colors.

/* More transparent */
.glass-light {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
}

/* More opaque */
.glass-solid {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
}

Glow Colors

Customize the gradient glow effects

/* Custom glow gradient */
.custom-glow::before {
  background: linear-gradient(135deg,
    var(--your-color-1),
    var(--your-color-2)
  );
}

/* Animated glow */
@keyframes glow-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}

.animated-glow::before {
  animation: glow-pulse 3s ease-in-out infinite;
}

Color Schemes

Ocean

Cyan + Blue

Aurora

Purple + Pink

Forest

Emerald + Teal