Customization

Theming

Customize colors, typography, and styling to match your brand.

CSS Variables

Auralix UI uses CSS variables for theming. You can customize the look by modifying these variables in your global CSS file:

Light Mode

--background: #ffffff

--foreground: #09090b

--muted: #f4f4f5

--primary: #18181b

Dark Mode

--background: #09090b

--foreground: #fafafa

--muted: #27272a

--primary: #fafafa

All Variables

Here's the complete list of CSS variables you can customize:

css

:root {
  /* Background & Foreground */
  --background: #ffffff;
  --foreground: #09090b;
  
  /* Muted (secondary backgrounds) */
  --muted: #f4f4f5;
  --muted-foreground: #71717a;
  
  /* Borders */
  --border: #e4e4e7;
  
  /* Primary color (buttons, links) */
  --primary: #18181b;
  --primary-foreground: #fafafa;
  
  /* Secondary color */
  --secondary: #f4f4f5;
  --secondary-foreground: #18181b;
  
  /* Status colors */
  --destructive: #ef4444;
  --destructive-foreground: #fafafa;
  --success: #22c55e;
  --warning: #f59e0b;
  --info: #3b82f6;
  
  /* Focus ring */
  --ring: #18181b;
  
  /* Border radius */
  --radius: 2rem;
}

Custom Brand Colors

To use your own brand colors, simply update the primary variables:

css

:root {
  /* Example: Blue brand color */
  --primary: #2563eb;
  --primary-foreground: #ffffff;
  --ring: #2563eb;
}

.dark {
  --primary: #3b82f6;
  --primary-foreground: #ffffff;
  --ring: #3b82f6;
}

After updating CSS variables, all components will automatically use your new colors.

Dark Mode

Auralix UI supports dark mode out of the box. The theme switches based on the .dark class on the html element.

tsx

// ThemeContext.tsx - Toggle dark mode
const toggleTheme = () => {
  const newTheme = theme === "light" ? "dark" : "light";
  setTheme(newTheme);
  document.documentElement.classList.toggle("dark", newTheme === "dark");
  localStorage.setItem("theme", newTheme);
};

Border Radius

The default border radius is 2rem for a modern look. You can adjust it:

css

:root {
  /* Smaller radius for a more compact look */
  --radius: 0.5rem;
  
  /* Or keep it round and modern */
  --radius: 2rem;
}

Glass Effect

Auralix UI includes glass morphism utilities for premium styling:

css

/* Use these classes for glass effects */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Example usage */
<div className="glass rounded-[2rem] p-6">
  Glass container
</div>