Home / Snippets / Color & Theming /

Dark mode toast

A floating notice: leading status tile, copy stack, and dismiss — presentation only; hook to your toast system for timing.

Deploy queued

Preview build #482 will be ready in about two minutes.

Widely Supported

colorno-js

Quick implementation

.dmtoast {
  display: flex;
  gap: 0.65rem;
  padding: 0.65rem 0.7rem;
  border-radius: var(--radius-lg);
  background: oklch(0.22 0.04 265);
  box-shadow: 0 12px 40px oklch(0.02 0.02 265 / 0.65);
}

Prompt this to your LLM

aria-live, timeouts, and focus.

You are building toast notifications for a dark-themed app shell.

Goal: Horizontal card with icon, title, body, dismiss button; role="status" for polite announcements.

Technical constraints:
- Dismiss button has aria-label; icon is aria-hidden.
- Note: mount in a live region or portal in production — this snippet is static markup + CSS.

Return HTML + CSS.

Why this matters in 2026

Users need confirmation without modal blocking; toasts sit above content with clear affordances.

The logic

Shadow lifts the card from the page; border uses semi-transparent oklch so it works on noisy backgrounds.

Accessibility & performance

Use role="status" for non-critical updates; critical errors should use alert and manage focus.