cmc/cleberg.net

My personal web garden & blog. blog personal website https://cleberg.net

Commit ea1eec0658

ea1eec0658cba4a225245b93484dd8f7cb34e51b

parent: 961ae9c2fd

Verified · cmc

cmc <hello@cleberg.net> · 2026-08-21 20:15 UTC 

Follow the reader's colour scheme in code blocks

orgo 0.22.0 takes a second highlight theme, so syntax.css can carry both and
let prefers-color-scheme pick: InspiredGitHub as before, base16-ocean.dark for
dark mode. The block surface moves with it — black crushed the darker of those
colours, and #2b303b is what they are drawn for.

`pre code` now sets a foreground in both schemes as well. Inline code's pink and
purple were bleeding onto every token the highlighter leaves unclassified, which
in a Python block is most of the identifiers.

Layout: unified · split

content/orgo.toml +4
@@ -44,7 +44,11 @@ match = "blog"
44template = "post.html" 44template = "post.html"
45 45
46[highlight] 46[highlight]
47# Two themes, because the site follows the reader's colour scheme and one theme cannot.
48# orgo writes both into syntax.css, each behind its own prefers-color-scheme query. The
49# block surface they sit on is styles.css' business, and it changes with the scheme too.
47theme = "InspiredGitHub" 50theme = "InspiredGitHub"
51theme_dark = "base16-ocean.dark"
48 52
49[html] 53[html]
50# Level-1 org headings become <h2>, beneath the page title the layout renders as <h1> — 54# Level-1 org headings become <h2>, beneath the page title the layout renders as <h1> —
theme/static/styles.css +7 −1
@@ -18,10 +18,16 @@ pre { overflow: auto; white-space: pre; }
18blockquote p { margin: 0; margin-bottom: 1rem; } 18blockquote p { margin: 0; margin-bottom: 1rem; }
19blockquote p:last-child { margin-bottom: 0; } 19blockquote p:last-child { margin-bottom: 0; }
20code { color: #942192; } 20code { color: #942192; }
21/* Blocks are coloured by syntax.css, so this is only the fallback for the tokens it
22 leaves unclassified: the highlight theme's own foreground rather than inline code's. */
23pre code { color: #323232; }
21@media (prefers-color-scheme: dark) { 24@media (prefers-color-scheme: dark) {
22 body { background-color: #181a1b; color: #cccccc; } 25 body { background-color: #181a1b; color: #cccccc; }
23 a, a:visited { color: #68A9F8; } 26 a, a:visited { color: #68A9F8; }
24 code { color: #ff68e1; } 27 code { color: #ff68e1; }
25 pre, blockquote { background-color: black; } 28 /* base16-ocean.dark, the `highlight.theme_dark` half of the pair: its colours are
29 picked for this surface, and pure black crushes the darker ones. */
30 pre, blockquote { background-color: #2b303b; }
31 pre code { color: #c0c5ce; }
26 table, th, td { border-color: #444; } 32 table, th, td { border-color: #444; }
27} 33}