Theming

Fluix uses CSS custom properties for theming. Override them in your stylesheet to match your brand.

CSS Custom Properties

Dimensions

Property	Default	Description
--fluix-height	40px	Toast collapsed height
--fluix-width	350px	Toast max width

Timing

Property	Default	Description
--fluix-duration	600ms	Animation duration

State Colors

All colors use the OKLCH color space for perceptual uniformity.

Property	Default	Description
--fluix-state-success	oklch(0.723 0.219 142.136)	Success state color (green)
--fluix-state-loading	oklch(0.556 0 0)	Loading state color (gray)
--fluix-state-error	oklch(0.637 0.237 25.331)	Error state color (red)
--fluix-state-warning	oklch(0.795 0.184 86.047)	Warning state color (amber)
--fluix-state-info	oklch(0.685 0.169 237.323)	Info state color (blue)
--fluix-state-action	oklch(0.623 0.214 259.815)	Action state color (indigo)

Overriding Colors

:root {
  --fluix-state-success: #22c55e;
  --fluix-state-error: #ef4444;
  --fluix-state-warning: #f59e0b;
  --fluix-state-info: #3b82f6;
}

Per-Toast Customization

Override theme and fill per toast via the options:

fluix.success({
  title: "Custom toast",
  theme: "dark",         // "light" or "dark"
  fill: "#1a1a2e",       // Background color
  roundness: 20,         // Border radius / blur
});

Class Overrides

Add CSS classes to toast sub-elements:

fluix.success({
  title: "Styled toast",
  styles: {
    title: "my-title",
    description: "my-desc",
    badge: "my-badge",
    button: "my-button",
  },
});

These classes are additive — they don’t replace the default data-attribute styles.

Reduced Motion

Fluix respects prefers-reduced-motion: reduce. When enabled, spring animations are replaced with simple opacity transitions.

@media (prefers-reduced-motion: reduce) {
  [data-fluix-toast] {
    transition-duration: 0ms;
  }
}