Theming

AvenUI uses CSS variables for theming, making it easy to customize colors, spacing, and other design tokens to match your brand.

CSS Variables

All AvenUI components use CSS variables (custom properties) for colors and spacing. You can override these in your app.css or any CSS file:

css

:root {
  /* Primary brand color */
  --avn-purple: 139 92 246;  /* RGB values */

  /* Background colors */
  --avn-background: 255 255 255;
  --avn-foreground: 10 10 10;

  /* Muted colors */
  --avn-muted: 245 245 245;
  --avn-muted-foreground: 115 115 115;

  /* Card colors */
  --avn-card: 255 255 255;
  --avn-card-foreground: 10 10 10;

  /* Border */
  --avn-border: 229 229 229;

  /* Status colors */
  --avn-success: 34 197 94;
  --avn-warning: 251 146 60;
  --avn-danger: 239 68 68;
  --avn-info: 59 130 246;
}

/* Dark mode */
.dark {
  --avn-background: 10 10 10;
  --avn-foreground: 250 250 250;
  --avn-muted: 38 38 38;
  --avn-muted-foreground: 163 163 163;
  --avn-card: 23 23 23;
  --avn-card-foreground: 250 250 250;
  --avn-border: 38 38 38;
}

Tailwind Integration

AvenUI components use Tailwind's color system. You can extend your tailwind.config.js to add custom colors:

javascript

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        // Your brand colors
        'brand': {
          50: '#f0f9ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        },
        // Override AvenUI defaults
        'avn-purple': '#8b5cf6',
      }
    }
  }
}

Component Customization

Since components are copied into your project, you have full control. You can modify any component directly:

elixir

# lib/your_app_web/components/ui/button.ex

# Change default variant colors
defp variant_classes("primary") do
  "bg-brand-500 hover:bg-brand-600 text-white"
end

# Add new variants
defp variant_classes("gradient") do
  "bg-gradient-to-r from-purple-500 to-pink-500 text-white"
end

Global Styles

Apply global styles to all AvenUI components by targeting their base classes:

css

/* Make all buttons rounded */
[class*="avn-button"] {
  border-radius: 9999px;
}

/* Change focus ring color */
:root {
  --avn-ring: 139 92 246;
}

/* Custom font */
body {
  font-family: 'Inter', system-ui, sans-serif;
}