Dark Mode ยท Color Sandbox
This page uses the
.dark-sandbox
scope which overrides background, surface, and text to darker tones.
This is a link
on dark.
Buttons
Primary Button
Secondary Button
Ghost Button
Cards
Neutral
Surface Card
Check borders and contrast on dark backgrounds.
Learn more
Accent
Accent Emphasis
Make sure accent stays legible and not too bright on darker surfaces.
Call to action
Typography
H1 Heading
Body text with
a link
to check link color and hover on dark.
H2 Heading
Muted text uses
--color-text-light
. Ensure it's readable on dark.
H3 Heading
Check the balance between headings and paragraph colors.
Top Bar / Footer Simulation
Light Surface on Dark Page
Simulates a light card on a dark page (or vice versa). Great for mixed UIs.
Ghost on Light