Home / Snippets / Color & Theming /
Dark mode modal
A miniature viewport: blurred scrim, centered panel, and destructive-safe actions — wire to <dialog> or a framework layer in production.
Discard draft?
You have unsaved changes. They cannot be recovered if you leave this page.
Widely Supported
Quick implementation
.dmm-scene { position: relative; min-height: 11rem; }
.dmm-backdrop {
position: absolute; inset: 0;
background: oklch(0.05 0.02 265 / 0.75);
backdrop-filter: blur(2px);
}
.dmm-dialog {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
background: oklch(0.22 0.04 265);
border-radius: var(--radius-lg);
}Prompt this to your LLM
Layering, focus trap, and dialog element.
You are building a dark-theme modal.
Goal: Backdrop + centered dialog with title, body, cancel + confirm.
Technical constraints:
- Use role="dialog" aria-modal="true" and aria-labelledby pointing at the title id.
- Backdrop uses oklch with alpha; dialog surface is lighter than page background.
- Note: this snippet is presentation-only — production should use Why this matters in 2026
Modals interrupt flow; dark surfaces need clear separation from scrim so users know what is actionable.
The logic
Centering uses transform on a positioned box; stacking is backdrop first, then dialog in paint order.
Accessibility & performance
Native <dialog> handles focus in real apps; for static demos, backdrop-filter is optional — drop it if you target low-end hardware.