Global

Styling

Customize Toastflow with CSS variables, theme classes, and headless rendering.

Toastflow is CSS-first. Start with variables, use theme classes for reusable variants, and keep inline css for one-off toasts.

Most apps only need CSS variables. You do not need a design-system wrapper just to make Toastflow match your brand.

The Three Levels

Use this for the default app-wide look.

toast.ts

toast.info({
  title: "Global variables",
  description: "Font, radius, and color tokens from :root.",
});

app.css

:root {
  --tf-toast-font-family:
    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --tf-toast-border-radius: 4px;
  --tf-toast-padding: 18px;
  --tf-toast-bg: #fff7ed;
  --tf-toast-color: #431407;
  --tf-toast-title-color: #431407;
  --tf-toast-description-color: #7c2d12;
  --tf-toast-border-color: #fb923c;
  --tf-toast-icon-color: #ea580c;
  --tf-toast-progress-bg: color-mix(in srgb, #ea580c 18%, transparent);
  --tf-toast-progress-bar-bg: #ea580c;
}

Use this when a toast should opt into a named visual style.

theme: "brand" maps to .tf-toast-accent--brand. If you pass a full class name that already starts with tf-toast-accent--, Toastflow uses it as-is.

toast.ts

toast.info({
  title: "Release",
  description: "v1.0.0 is out.",
  theme: "brand",
});

app.css

.tf-toast-accent--brand {
  --tf-toast-bg: #ecfeff;
  --tf-toast-color: #164e63;
  --tf-toast-border-color: #67e8f9;
  --tf-toast-title-color: #0e7490;
  --tf-toast-description-color: #155e75;
  --tf-toast-progress-bg: color-mix(in srgb, #0891b2 20%, transparent);
  --tf-toast-progress-bar-bg: #0891b2;
  --tf-toast-icon-color: #0891b2;
}

Use this only for one-off cases generated from runtime data.

toast.ts

toast.custom({
  title: "Runtime accent",
  description: "One-off color override, inherited global structure.",
  css: {
    bg: "#450a0a",
    color: "#fff1f2",
    titleColor: "#ffe4e6",
    descriptionColor: "#fecdd3",
    borderColor: "#fb7185",
    iconColor: "#fbbf24",
    progressBg: "color-mix(in srgb, #fbbf24 20%, transparent)",
    progressBarBg: "#fbbf24",
  },
});

The live preview below mirrors all three tabs. It scopes the global variables around a local preview container, so Theme class and Inline override inherit the global font, radius, and spacing while overriding only their own color tokens.

Try this example

Buttons mirror the global variables, theme class, and inline css examples above.

Edit this pageorReport an issue

Overview

Pick the right Toastflow package and learn the shared runtime model.

Quick Start

Install Toastflow in Vue and show your first toast.