cmc/cleberg.net

My personal web garden & blog.

clone: git clone https://gitbay.org/cmc/cleberg.net.git

ea1eec0658cba4a225245b93484dd8f7cb34e51b

verified · cmc

author: Christian Cleberg <hello@cleberg.net> · 2026-08-21T20:15:07Z

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.

 content/orgo.toml       | 4 ++++
 theme/static/styles.css | 8 +++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

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