Home / Snippets / Color & Theming /
Dark mode code block
Window chrome + “terminal” body: inset shadow, JetBrains Mono, and a few span classes so you can fake syntax color without a highlighter.
:root {
--accent: oklch(0.72 0.14 250);
--surface: oklch(0.2 0.03 265);
}
Widely Supported
Quick implementation
.dm-code-block__pre {
font-family: "JetBrains Mono", ui-monospace, monospace;
background: oklch(0.16 0.03 265);
color: oklch(0.88 0.02 265);
box-shadow: inset 0 1px 0 oklch(0.98 0.01 265 / 0.06);
}
.dm-sel { color: oklch(0.78 0.12 280); }
.dm-prop { color: oklch(0.72 0.08 250); }
.dm-val { color: oklch(0.78 0.14 55); }
.dm-fn { color: oklch(0.72 0.14 200); }Prompt this to your LLM
Chrome bar, copy affordances, and contrast.
You are styling a code sample for dark-theme documentation.
Goal: A card with a top chrome bar (filename + window dots) and a pre/code region below.
Technical constraints:
- Outer shell uses var(--card-border) and var(--radius-lg); inner pre uses a deeper oklch() surface.
- Provide optional span classes for selector, property, value, and function color — no JS syntax highlighter.
- pre must wrap long lines (pre-wrap) without horizontal overflow breaking layout.
Return HTML + CSS.Why this matters in 2026
Docs and blogs still ship hundreds of static snippets. A consistent panel reads “product” and keeps contrast predictable next to prose.
The logic
The bar is slightly lifted from the code well so the file name feels like UI chrome. Inset highlight sells depth without backdrop-filter.
Accessibility & performance
Use pre + code; decorative dots are aria-hidden. For copy buttons, pair with a live region elsewhere — this snippet is presentation-only.