Customization

Luminary UI is built entirely on CSS custom properties, making it trivial to customize without modifying the source code.

Overriding the Color Palette

To change the accent color across the entire framework (links, focus rings, vibrant modifier, segment controls, tab bars), override two variables:

:root {
  --glass-accent: #e74c3c;
  --glass-accent-rgb: 231, 76, 60;
}

Important: Always update both the hex value and the -rgb triplet. The -rgb variant is used inside rgba() calls for glows and transparency effects.

Changing Blur Intensity

To make the glassmorphism more subtle or more prominent:

:root {
  /* Subtler glass */
  --glass-blur: 12px;
  --glass-blur-thin: 4px;
  --glass-blur-thick: 24px;

  /* Or more frosted */
  --glass-blur: 36px;
  --glass-blur-thick: 60px;
  --glass-saturate: 280%;
}

Adjusting Border Radius

The framework uses 4 radius tiers. You can flatten or round the entire UI:

:root {
  /* Flat, sharp corners */
  --glass-radius-sm: 4px;
  --glass-radius-md: 8px;
  --glass-radius-lg: 12px;
  --glass-radius-xl: 16px;

  /* Or ultra-rounded */
  --glass-radius-sm: 12px;
  --glass-radius-md: 20px;
  --glass-radius-lg: 32px;
  --glass-radius-xl: 48px;
}

Custom Body Background

The default background is a radial gradient. Replace it with anything:

:root {
  --glass-body-bg: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
}

Or use a solid color:

:root {
  --glass-body-bg: #1a1a2e;
}

Dark Mode Overrides

Luminary uses @media (prefers-color-scheme: dark) for its dark theme. To force a dark theme regardless of system preference, redefine the dark-mode tokens on :root:

:root {
  --glass-bg: rgba(20, 20, 28, 0.25);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-text: rgba(255, 255, 255, 0.95);
  --glass-text-secondary: rgba(255, 255, 255, 0.6);
  --glass-text-muted: rgba(255, 255, 255, 0.4);
  --glass-body-bg: radial-gradient(circle at 10% 20%, #1a1a24 0%, #0d0d11 90%);
}

Using with Tailwind CSS

Luminary UI works alongside Tailwind. Import Luminary after Tailwind to let its styles take priority:

@import "tailwindcss";
@import "luminary-ui/dist/luminary.css";

You can then use Tailwind utilities for layout (flex, grid, gap-4) while Luminary handles the visual aesthetic of buttons, cards, inputs, and navigation.