# Dark Variants

> Four filled dark toast cards — success, failure, warning, info — each a semantic dark-tinted slab carrying a bright accent glyph, accent label, and a smoothly filling accent progress bar, rendered from a small data array and fully token-driven and design-system agnostic.

- Category: Toast
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Atlas
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: snackbar, notification
- Page: https://builder.atheros.ai/components/dark-variants
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_dark_variants/preview-455fa62c0fd6.webp

## Features

- Four semantic toast variants: success, failure, warning, info — each with a Tabler glyph and an accent
- Filled dark cards: every variant rests on its own dark-tinted slab with a bright accent for glyph and label
- A smoothly filling accent progress bar on every card, animated via `transform: scaleX()`
- Fade-and-slide entrance animation with a staggered per-card delay
- Cards rendered programmatically from a small data array into an empty live region
- Sliding sun/moon pill theme switch in a fixed top-right toolbar — the thumb glides between icons, persisted to localStorage and seeded from `prefers-color-scheme`
- Inline 24×24 currentColor Tabler icons cloned from a hidden icon defs block

## Accessibility

- **Live region** — `aria-live="polite"` `role="status"` `aria-atomic="true"` on the toast stack
- **Decorative icons** — Inline SVG glyphs marked `aria-hidden="true"`
- **Theme toggle** — `role="switch"` with `aria-checked` toggled by JS
- **Focus indicators** — `:focus-visible` with `--ring` outline on interactive elements
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations
- **Viewport** — `100dvh` for mobile-safe viewport height

## Keyboard shortcuts

- `Enter` — Activate the theme toggle
- `Space` — Activate the theme toggle

## Common questions

**Which frameworks is Dark Variants available in?**

Dark Variants ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is the Dark Variants toast component free?**

Dark Variants is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Dark Variants support dark mode?**

Yes. Dark Variants ships light and dark themes, both drawn from the Atlas design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Dark Variants live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/dark-variants

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt