From 79b8403d22b25c9dd4187c8a0eb2be4216406c61 Mon Sep 17 00:00:00 2001
From: Paul Dowling <paul@dowlig.id.au>
Date: Sun, 26 Jul 2026 21:11:59 +1000
Subject: [PATCH] Add prefers-color-scheme dark mode support to generated CSS

The generated transcript pages only defined light-mode colors via CSS
custom properties on :root, so they stayed light-background even when
the viewer's OS/browser was in dark mode. Add a
@media (prefers-color-scheme: dark) block that overrides those same
custom properties with dark equivalents, so pages generated by
generate_html follow the viewer's theme automatically with no new
CLI flag needed.
---
 src/claude_code_transcripts/__init__.py             |  3 +++
 .../TestGenerateHtml.test_generates_index_html.html |  3 +++
 ...stGenerateHtml.test_generates_page_001_html.html |  3 +++
 ...stGenerateHtml.test_generates_page_002_html.html |  3 +++
 ...tParseSessionFile.test_jsonl_generates_html.html |  3 +++
 tests/test_generate_html.py                         | 13 +++++++++++++
 6 files changed, 28 insertions(+)

diff --git a/src/claude_code_transcripts/__init__.py b/src/claude_code_transcripts/__init__.py
index e4854a3b..02ad7137 100644
--- a/src/claude_code_transcripts/__init__.py
+++ b/src/claude_code_transcripts/__init__.py
@@ -973,6 +973,9 @@ def render_message(log_type, message_json, timestamp):
 
 CSS = """
 :root { --bg-color: #f5f5f5; --card-bg: #ffffff; --user-bg: #e3f2fd; --user-border: #1976d2; --assistant-bg: #f5f5f5; --assistant-border: #9e9e9e; --thinking-bg: #fff8e1; --thinking-border: #ffc107; --thinking-text: #666; --tool-bg: #f3e5f5; --tool-border: #9c27b0; --tool-result-bg: #e8f5e9; --tool-error-bg: #ffebee; --text-color: #212121; --text-muted: #757575; --code-bg: #263238; --code-text: #aed581; }
+@media (prefers-color-scheme: dark) {
+:root { --bg-color: #1a1a1a; --card-bg: #2a2a2a; --user-bg: #1a3a52; --user-border: #4a9eff; --assistant-bg: #262626; --assistant-border: #8a8a8a; --thinking-bg: #3a3420; --thinking-border: #ffc107; --thinking-text: #bbbbbb; --tool-bg: #3a2a42; --tool-border: #ce93d8; --tool-result-bg: #1b3a24; --tool-error-bg: #4a1f1f; --text-color: #e0e0e0; --text-muted: #a0a0a0; --code-bg: #111111; --code-text: #aed581; }
+}
 * { box-sizing: border-box; }
 body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-color); color: var(--text-color); margin: 0; padding: 16px; line-height: 1.6; }
 .container { max-width: 800px; margin: 0 auto; }
diff --git a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_index_html.html b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_index_html.html
index 693c48ff..45af04a0 100644
--- a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_index_html.html
+++ b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_index_html.html
@@ -6,6 +6,9 @@
     <title>Claude Code transcript - Index</title>
     <style>
 :root { --bg-color: #f5f5f5; --card-bg: #ffffff; --user-bg: #e3f2fd; --user-border: #1976d2; --assistant-bg: #f5f5f5; --assistant-border: #9e9e9e; --thinking-bg: #fff8e1; --thinking-border: #ffc107; --thinking-text: #666; --tool-bg: #f3e5f5; --tool-border: #9c27b0; --tool-result-bg: #e8f5e9; --tool-error-bg: #ffebee; --text-color: #212121; --text-muted: #757575; --code-bg: #263238; --code-text: #aed581; }
+@media (prefers-color-scheme: dark) {
+:root { --bg-color: #1a1a1a; --card-bg: #2a2a2a; --user-bg: #1a3a52; --user-border: #4a9eff; --assistant-bg: #262626; --assistant-border: #8a8a8a; --thinking-bg: #3a3420; --thinking-border: #ffc107; --thinking-text: #bbbbbb; --tool-bg: #3a2a42; --tool-border: #ce93d8; --tool-result-bg: #1b3a24; --tool-error-bg: #4a1f1f; --text-color: #e0e0e0; --text-muted: #a0a0a0; --code-bg: #111111; --code-text: #aed581; }
+}
 * { box-sizing: border-box; }
 body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-color); color: var(--text-color); margin: 0; padding: 16px; line-height: 1.6; }
 .container { max-width: 800px; margin: 0 auto; }
diff --git a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_001_html.html b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_001_html.html
index cdc794bd..da9705f0 100644
--- a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_001_html.html
+++ b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_001_html.html
@@ -6,6 +6,9 @@
     <title>Claude Code transcript - page 1</title>
     <style>
 :root { --bg-color: #f5f5f5; --card-bg: #ffffff; --user-bg: #e3f2fd; --user-border: #1976d2; --assistant-bg: #f5f5f5; --assistant-border: #9e9e9e; --thinking-bg: #fff8e1; --thinking-border: #ffc107; --thinking-text: #666; --tool-bg: #f3e5f5; --tool-border: #9c27b0; --tool-result-bg: #e8f5e9; --tool-error-bg: #ffebee; --text-color: #212121; --text-muted: #757575; --code-bg: #263238; --code-text: #aed581; }
+@media (prefers-color-scheme: dark) {
+:root { --bg-color: #1a1a1a; --card-bg: #2a2a2a; --user-bg: #1a3a52; --user-border: #4a9eff; --assistant-bg: #262626; --assistant-border: #8a8a8a; --thinking-bg: #3a3420; --thinking-border: #ffc107; --thinking-text: #bbbbbb; --tool-bg: #3a2a42; --tool-border: #ce93d8; --tool-result-bg: #1b3a24; --tool-error-bg: #4a1f1f; --text-color: #e0e0e0; --text-muted: #a0a0a0; --code-bg: #111111; --code-text: #aed581; }
+}
 * { box-sizing: border-box; }
 body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-color); color: var(--text-color); margin: 0; padding: 16px; line-height: 1.6; }
 .container { max-width: 800px; margin: 0 auto; }
diff --git a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_002_html.html b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_002_html.html
index 2d46a78b..211955a4 100644
--- a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_002_html.html
+++ b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_002_html.html
@@ -6,6 +6,9 @@
     <title>Claude Code transcript - page 2</title>
     <style>
 :root { --bg-color: #f5f5f5; --card-bg: #ffffff; --user-bg: #e3f2fd; --user-border: #1976d2; --assistant-bg: #f5f5f5; --assistant-border: #9e9e9e; --thinking-bg: #fff8e1; --thinking-border: #ffc107; --thinking-text: #666; --tool-bg: #f3e5f5; --tool-border: #9c27b0; --tool-result-bg: #e8f5e9; --tool-error-bg: #ffebee; --text-color: #212121; --text-muted: #757575; --code-bg: #263238; --code-text: #aed581; }
+@media (prefers-color-scheme: dark) {
+:root { --bg-color: #1a1a1a; --card-bg: #2a2a2a; --user-bg: #1a3a52; --user-border: #4a9eff; --assistant-bg: #262626; --assistant-border: #8a8a8a; --thinking-bg: #3a3420; --thinking-border: #ffc107; --thinking-text: #bbbbbb; --tool-bg: #3a2a42; --tool-border: #ce93d8; --tool-result-bg: #1b3a24; --tool-error-bg: #4a1f1f; --text-color: #e0e0e0; --text-muted: #a0a0a0; --code-bg: #111111; --code-text: #aed581; }
+}
 * { box-sizing: border-box; }
 body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-color); color: var(--text-color); margin: 0; padding: 16px; line-height: 1.6; }
 .container { max-width: 800px; margin: 0 auto; }
diff --git a/tests/__snapshots__/test_generate_html/TestParseSessionFile.test_jsonl_generates_html.html b/tests/__snapshots__/test_generate_html/TestParseSessionFile.test_jsonl_generates_html.html
index e83424ab..31a5b2a3 100644
--- a/tests/__snapshots__/test_generate_html/TestParseSessionFile.test_jsonl_generates_html.html
+++ b/tests/__snapshots__/test_generate_html/TestParseSessionFile.test_jsonl_generates_html.html
@@ -6,6 +6,9 @@
     <title>Claude Code transcript - Index</title>
     <style>
 :root { --bg-color: #f5f5f5; --card-bg: #ffffff; --user-bg: #e3f2fd; --user-border: #1976d2; --assistant-bg: #f5f5f5; --assistant-border: #9e9e9e; --thinking-bg: #fff8e1; --thinking-border: #ffc107; --thinking-text: #666; --tool-bg: #f3e5f5; --tool-border: #9c27b0; --tool-result-bg: #e8f5e9; --tool-error-bg: #ffebee; --text-color: #212121; --text-muted: #757575; --code-bg: #263238; --code-text: #aed581; }
+@media (prefers-color-scheme: dark) {
+:root { --bg-color: #1a1a1a; --card-bg: #2a2a2a; --user-bg: #1a3a52; --user-border: #4a9eff; --assistant-bg: #262626; --assistant-border: #8a8a8a; --thinking-bg: #3a3420; --thinking-border: #ffc107; --thinking-text: #bbbbbb; --tool-bg: #3a2a42; --tool-border: #ce93d8; --tool-result-bg: #1b3a24; --tool-error-bg: #4a1f1f; --text-color: #e0e0e0; --text-muted: #a0a0a0; --code-bg: #111111; --code-text: #aed581; }
+}
 * { box-sizing: border-box; }
 body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-color); color: var(--text-color); margin: 0; padding: 16px; line-height: 1.6; }
 .container { max-width: 800px; margin: 0 auto; }
diff --git a/tests/test_generate_html.py b/tests/test_generate_html.py
index 25c28224..854e54ac 100644
--- a/tests/test_generate_html.py
+++ b/tests/test_generate_html.py
@@ -1616,6 +1616,19 @@ def test_search_css_present(self, output_dir):
         # CSS should style the search modal
         assert "#search-modal" in index_html or ".search-modal" in index_html
 
+    def test_dark_mode_media_query_present(self, output_dir):
+        """Test that CSS includes a prefers-color-scheme dark mode override."""
+        fixture_path = Path(__file__).parent / "sample_session.json"
+        generate_html(fixture_path, output_dir, github_repo="example/project")
+
+        index_html = (output_dir / "index.html").read_text(encoding="utf-8")
+
+        assert "@media (prefers-color-scheme: dark)" in index_html
+        # The dark override should redefine the same custom properties
+        # used by the light :root block, not introduce unrelated ones.
+        assert "--bg-color" in index_html
+        assert "--text-color" in index_html
+
     def test_search_box_hidden_by_default_in_css(self, output_dir):
         """Test that search box is hidden by default (for progressive enhancement)."""
         fixture_path = Path(__file__).parent / "sample_session.json"