Theming

Fluix uses CSS custom properties for theming. Override them in your stylesheet to match your brand, or create entirely new themes with just CSS.

Built-in Themes

Fluix ships with two themes: light (default) and dark.

fluix.success({ title: "Light toast" });                // light (default)
fluix.success({ title: "Dark toast", theme: "dark" });  // dark

The theme option accepts any string — not just "light" or "dark". This enables a plugin-like theme system where themes are pure CSS files.

Custom Themes

Create a theme by defining CSS custom properties scoped to a [data-theme] selector:

midnight-theme.css

[data-fluix-toast][data-theme="midnight"] {
  --fluix-text: oklch(0.90 0.02 260);
  --fluix-text-muted: oklch(0.65 0.02 260);
  --fluix-surface-contrast: #0a0e1a;
}

Import the CSS file and pass the theme name:

import "./midnight-theme.css";

fluix.success({ title: "Saved!", theme: "midnight" });

That’s it — no JS configuration, no providers, no registration. The theme name in JS maps directly to a data-theme attribute in the DOM, which CSS selects on.

Theme CSS Variables

Variable	Description	Light default	Dark default
--fluix-text	Primary text color	oklch(0.26 0 0)	oklch(0.93 0 0)
--fluix-text-muted	Secondary/description text	oklch(0.54 0 0)	oklch(0.74 0 0)
--fluix-surface-contrast	Toast background (SVG fill)	#ffffff	#141416

The SVG background color is derived from --fluix-surface-contrast automatically. You can still override it per-toast with the fill option.

Button Overrides (optional)

For themes with dark backgrounds, you may also want to adjust the action button colors:

[data-fluix-toast][data-theme="midnight"] [data-fluix-button][data-state] {
  --fluix-btn-bg: color-mix(in oklch, var(--_c) 20%, var(--fluix-surface-contrast));
  --fluix-btn-bg-hover: color-mix(in oklch, var(--_c) 32%, var(--fluix-surface-contrast));
}

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: "midnight",     // any theme name (or "light" / "dark")
  fill: "#1a1a2e",       // explicit background color (overrides --fluix-surface-contrast)
  roundness: 20,         // border radius / blur
});

CSS Imports

// Full bundle (includes light + dark themes)
import "@fluix-ui/css";

// Or import individually
import "@fluix-ui/css/toast";
import "@fluix-ui/css/themes/dark";

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;
  }
}