From bee0f07d2f8f8a561e88b721a185900e99d90c6a Mon Sep 17 00:00:00 2001
From: mwiegand <martin.wiegand@seibert.group>
Date: Sun, 17 May 2026 00:03:48 +0200
Subject: [PATCH] fix(editor): drop prism.css to unblock dark-mode rendering

Prism's stock theme has

    code[class*=language-] { color:#000; background:transparent; }

at specificity (0,1,1), which beats our .editor-code (0,1,0). Result:
the editor's background was transparent and base text was #000, leaving
black-on-dark text in dark mode (unreadable).

We override every Prism token class we use (.token.comment / .string /
.keyword / .number / .operator / .identifier) via theme-aware
--color-* tokens defined in both :root and the
@media (prefers-color-scheme: dark) block of tokens.css, so prism.css
contributes nothing of value. Drop the <link> from _editor_assets.html.
Flip the form-contract tests to assert prism.css is NOT in the body so
a future accidental re-add is caught.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 l4d2web/l4d2web/templates/_editor_assets.html | 10 ++++++++--
 l4d2web/tests/test_blueprints.py              |  8 ++++++--
 l4d2web/tests/test_script_overlay_routes.py   |  6 ++++--
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/l4d2web/l4d2web/templates/_editor_assets.html b/l4d2web/l4d2web/templates/_editor_assets.html
index 068d78e..6f11091 100644
--- a/l4d2web/l4d2web/templates/_editor_assets.html
+++ b/l4d2web/l4d2web/templates/_editor_assets.html
@@ -1,8 +1,14 @@
 {# Editor asset bundle — include on any page that mounts a
    <textarea data-editor-language>. Order matters: prism + codejar load
    first, then the srccfg grammar registers itself on window.Prism, then
-   editor.js scans the DOM and mounts. #}
-<link rel="stylesheet" href="{{ url_for('static', filename='vendor/prism.css') }}">
+   editor.js scans the DOM and mounts.
+
+   prism.css is intentionally NOT loaded — its base `code[class*=language-]`
+   rule has specificity (0,1,1) which beats our `.editor-code` (0,1,0)
+   and forces color:#000 + background:transparent, which renders black
+   text on the dark-mode page background. We override every Prism token
+   class we use in editor.css with --color-* tokens that follow
+   prefers-color-scheme, so the default Prism theme adds nothing useful. #}
 <link rel="stylesheet" href="{{ url_for('static', filename='css/editor.css') }}">
 <script src="{{ url_for('static', filename='vendor/prism.js') }}" defer nonce="{{ g.csp_nonce }}"></script>
 <script src="{{ url_for('static', filename='vendor/codejar.js') }}" defer nonce="{{ g.csp_nonce }}"></script>
diff --git a/l4d2web/tests/test_blueprints.py b/l4d2web/tests/test_blueprints.py
index 1f9c10a..7f5ee51 100644
--- a/l4d2web/tests/test_blueprints.py
+++ b/l4d2web/tests/test_blueprints.py
@@ -266,13 +266,17 @@ def test_blueprint_detail_renders_editor_assets(user_client) -> None:
     body = response.get_data(as_text=True)
     # Editor opts the textarea in via a data-attribute.
     assert 'data-editor-language="srccfg"' in body
-    # All editor assets are referenced.
+    # All editor assets are referenced. prism.css intentionally not loaded
+    # — its default theme's `code[class*=language-]` selector beats our
+    # `.editor-code` background/color rules at higher specificity and
+    # breaks dark mode. We override every Prism token class we use in
+    # editor.css with theme-aware --color-* tokens instead.
     assert "static/vendor/prism.js" in body
-    assert "static/vendor/prism.css" in body
     assert "static/vendor/codejar.js" in body
     assert "static/js/srccfg-grammar.js" in body
     assert "static/js/editor.js" in body
     assert "static/css/editor.css" in body
+    assert "static/vendor/prism.css" not in body
     # Scripts are nonce'd (CSP regression guard).
     assert 'nonce="' in body
 
diff --git a/l4d2web/tests/test_script_overlay_routes.py b/l4d2web/tests/test_script_overlay_routes.py
index bb41c6a..9d0b561 100644
--- a/l4d2web/tests/test_script_overlay_routes.py
+++ b/l4d2web/tests/test_script_overlay_routes.py
@@ -288,12 +288,14 @@ def test_script_overlay_detail_renders_bash_editor(app, alice_id) -> None:
     body = response.get_data(as_text=True)
     # Editor opts the textarea in via a data-attribute.
     assert 'data-editor-language="bash"' in body
-    # All editor assets are referenced.
+    # All editor assets are referenced. prism.css intentionally not loaded
+    # — see _editor_assets.html for the rationale (specificity conflict
+    # with our dark-mode tokens).
     assert "static/vendor/prism.js" in body
-    assert "static/vendor/prism.css" in body
     assert "static/vendor/codejar.js" in body
     assert "static/js/srccfg-grammar.js" in body
     assert "static/js/editor.js" in body
     assert "static/css/editor.css" in body
+    assert "static/vendor/prism.css" not in body
     # Scripts are nonce'd (CSP regression guard).
     assert 'nonce="' in body