From 294612fdf750880b9ec3a971c19191f74ae4b87b Mon Sep 17 00:00:00 2001
From: Sebastian Maniak <sebastian@maniak.io>
Date: Mon, 23 Mar 2026 07:15:07 -0400
Subject: [PATCH] fix: make docs code blocks readable in both dark and light
 themes

Hugo's default inline syntax highlighting styles conflicted with the
site's CSS theme variables, causing black text on a dark background.
Switch Hugo to CSS-class-based highlighting and add Chroma token styles
for both dark (monokai) and light (github) themes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 hugo.toml            |  4 +++
 static/css/style.css | 66 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 70 insertions(+)

diff --git a/hugo.toml b/hugo.toml
index a46e8fe..ca5a446 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -2,6 +2,10 @@ baseURL = 'https://agentevals.dev/'
 languageCode = 'en-us'
 title = 'AgentEvals - Score Agent Behavior from OpenTelemetry Traces'
 
+[markup]
+  [markup.highlight]
+    noClasses = false
+
 [params]
   description = "Score agent behavior from OpenTelemetry traces without re-running the agent."
   github = "https://github.com/agentevals-dev/agentevals"
diff --git a/static/css/style.css b/static/css/style.css
index 82f86fc..407da23 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -932,6 +932,10 @@ section {
   border: 1px solid var(--border);
 }
 
+.docs-article .highlight {
+  margin-bottom: 1.5rem;
+}
+
 .docs-article pre {
   background: var(--bg-secondary);
   border: 1px solid var(--border);
@@ -950,6 +954,68 @@ section {
   color: var(--text-primary);
 }
 
+/* Chroma syntax highlighting — dark theme (default) */
+.highlight pre { background: var(--bg-secondary); }
+.highlight .chroma { background: var(--bg-secondary); color: var(--text-primary); }
+.chroma .line { display: flex; }
+.chroma .cl { /* code line */ }
+.chroma .c, .chroma .ch, .chroma .cm, .chroma .c1, .chroma .cs,
+.chroma .cp, .chroma .cpf { color: #75715e; } /* comments */
+.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp,
+.chroma .kr { color: #66d9ef; } /* keywords */
+.chroma .kt { color: #66d9ef; } /* keyword type */
+.chroma .n, .chroma .ni, .chroma .nl, .chroma .nn, .chroma .nx,
+.chroma .py { color: #f8f8f2; } /* names */
+.chroma .na { color: #a6e22e; } /* name attribute */
+.chroma .nb { color: #f8f8f2; } /* name builtin */
+.chroma .nc { color: #a6e22e; } /* name class */
+.chroma .nf, .chroma .fm { color: #a6e22e; } /* name function */
+.chroma .no { color: #66d9ef; } /* name constant */
+.chroma .nv, .chroma .vc, .chroma .vg, .chroma .vi, .chroma .vm { color: #f8f8f2; } /* variables */
+.chroma .o, .chroma .ow { color: #f92672; } /* operators */
+.chroma .p { color: #f8f8f2; } /* punctuation */
+.chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl,
+.chroma .s2, .chroma .sh, .chroma .s1, .chroma .ss { color: #e6db74; } /* strings */
+.chroma .se { color: #ae81ff; } /* string escape */
+.chroma .si { color: #e6db74; } /* string interpol */
+.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi,
+.chroma .mo, .chroma .il { color: #ae81ff; } /* numbers */
+
+/* Chroma syntax highlighting — light theme */
+[data-theme="light"] .chroma { background: var(--bg-secondary); color: var(--text-primary); }
+[data-theme="light"] .chroma .c, [data-theme="light"] .chroma .ch,
+[data-theme="light"] .chroma .cm, [data-theme="light"] .chroma .c1,
+[data-theme="light"] .chroma .cs, [data-theme="light"] .chroma .cp,
+[data-theme="light"] .chroma .cpf { color: #6a737d; }
+[data-theme="light"] .chroma .k, [data-theme="light"] .chroma .kc,
+[data-theme="light"] .chroma .kd, [data-theme="light"] .chroma .kn,
+[data-theme="light"] .chroma .kp, [data-theme="light"] .chroma .kr { color: #d73a49; }
+[data-theme="light"] .chroma .kt { color: #d73a49; }
+[data-theme="light"] .chroma .n, [data-theme="light"] .chroma .ni,
+[data-theme="light"] .chroma .nl, [data-theme="light"] .chroma .nn,
+[data-theme="light"] .chroma .nx, [data-theme="light"] .chroma .py { color: #24292e; }
+[data-theme="light"] .chroma .na { color: #6f42c1; }
+[data-theme="light"] .chroma .nb { color: #005cc5; }
+[data-theme="light"] .chroma .nc { color: #6f42c1; }
+[data-theme="light"] .chroma .nf, [data-theme="light"] .chroma .fm { color: #6f42c1; }
+[data-theme="light"] .chroma .no { color: #005cc5; }
+[data-theme="light"] .chroma .nv, [data-theme="light"] .chroma .vc,
+[data-theme="light"] .chroma .vg, [data-theme="light"] .chroma .vi,
+[data-theme="light"] .chroma .vm { color: #e36209; }
+[data-theme="light"] .chroma .o, [data-theme="light"] .chroma .ow { color: #d73a49; }
+[data-theme="light"] .chroma .p { color: #24292e; }
+[data-theme="light"] .chroma .s, [data-theme="light"] .chroma .sa,
+[data-theme="light"] .chroma .sb, [data-theme="light"] .chroma .sc,
+[data-theme="light"] .chroma .dl, [data-theme="light"] .chroma .s2,
+[data-theme="light"] .chroma .sh, [data-theme="light"] .chroma .s1,
+[data-theme="light"] .chroma .ss { color: #032f62; }
+[data-theme="light"] .chroma .se { color: #032f62; }
+[data-theme="light"] .chroma .si { color: #032f62; }
+[data-theme="light"] .chroma .m, [data-theme="light"] .chroma .mb,
+[data-theme="light"] .chroma .mf, [data-theme="light"] .chroma .mh,
+[data-theme="light"] .chroma .mi, [data-theme="light"] .chroma .mo,
+[data-theme="light"] .chroma .il { color: #005cc5; }
+
 .docs-article table {
   width: 100%;
   border-collapse: collapse;