Theming and the dark mode cascade
Inkwell uses Pattern B: dark mode applies automatically via prefers-color-scheme, with an opt-out via data-theme="light" on <html>. The cascade is documented in §2 of the spec.
Search the system
42 results for "dark mode" · sorted by relevance · clear search
The lifted accent in dark mode
--accent shifts from #3B4A8C in light to #7A8AD1 (periwinkle) in dark — same hue, more luminance. The "lifted" rule applies to every saturated token.
The dark TL;DR callout that inverts
The .tldr is the only component that inverts: dark slate panel in light mode, ivory panel with slate text in dark mode. Editorial pull-quote energy.
Why warm shadows fail in dark mode
Light-mode shadows use rgba(20,20,19, …) for a warm undertone. Reusing them on dark surfaces makes them invisible — every shadow token has a separate deep-black dark mode definition.
Contrast in dark mode — what we measured
Body text clears 10.9:1. Captions clear 6.4:1 in dark. The 1.5px hairline border sits at 1.45:1 in dark mode — deliberate, paired with surface-tone shift for separation.
↻
Loading state preview
.skeleton
When results are streaming, render skeleton placeholders. Animation respects prefers-reduced-motion.
∅
No-results variant
.empty-stateNo results for "obscure-token-xyz"
Try a broader query, or remove a filter. Searches match component names, token names, documentation headings, and inline code.
Made with hairlines and serifs by Vinny Carpenter. The 1.5px is on purpose.