diff --git a/js/src/viz.css b/js/src/viz.css
index 959e33e57..d516d2f8f 100644
--- a/js/src/viz.css
+++ b/js/src/viz.css
@@ -183,7 +183,10 @@
 }
 
 .querychat-query-section bslib-code-editor .prism-code-editor {
-  background-color: var(--bs-light, #f8f8f8);
+  /* No background override: the active prism theme sets --editor__bg
+     (github-light/github-dark) to match the app's color mode. Forcing a
+     fixed light background here rendered dark-mode (light) syntax text
+     on a light background. */
   max-height: 200px;
   overflow-y: auto;
 }
diff --git a/pkg-py/CHANGELOG.md b/pkg-py/CHANGELOG.md
index dae1b7fdc..a5f064aea 100644
--- a/pkg-py/CHANGELOG.md
+++ b/pkg-py/CHANGELOG.md
@@ -17,6 +17,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 * JSON pins now fall back to `pin_read()` when DuckDB's JSON extension cannot be installed or loaded, including on builds that disable extension loading. Native DuckDB JSON reading is retained when the extension is available.
 
+* Fixed SQL code blocks (the visualization footer's "Show Query" editor and the data drawer's SQL editor) rendering illegibly in dark mode — light syntax-highlighted text on a forced light background. The editor background now follows the active syntax theme. (#328)
+
 ## [0.9.0] - 2026-09-13
 
 ### New features
diff --git a/pkg-py/src/querychat/_viz_tools.py b/pkg-py/src/querychat/_viz_tools.py
index 7ac65a4c9..684d33ade 100644
--- a/pkg-py/src/querychat/_viz_tools.py
+++ b/pkg-py/src/querychat/_viz_tools.py
@@ -17,14 +17,10 @@
 
 from shiny import ui
 
+from .__version import __version__
 from ._icons import bs_icon
 from ._tool_names import TOOL_VISUALIZE
-from ._utils import (
-    dep_version,
-    querychat_tool_starts_open,
-    read_prompt_template,
-    truncate_error,
-)
+from ._utils import querychat_tool_starts_open, read_prompt_template, truncate_error
 from ._viz_altair_widget import AltairWidget, fit_chart_to_container
 from ._viz_ggsql import (
     ExecutorReader,
@@ -303,7 +299,7 @@ def viz_dep() -> HTMLDependency:
     """HTMLDependency for viz-specific CSS and JS assets."""
     return HTMLDependency(
         "querychat-viz",
-        dep_version(),
+        __version__,
         source={
             "package": "querychat",
             "subdir": "static",
diff --git a/pkg-py/src/querychat/static/css/viz.css b/pkg-py/src/querychat/static/css/viz.css
index 508054d5c..1af6952ce 100644
--- a/pkg-py/src/querychat/static/css/viz.css
+++ b/pkg-py/src/querychat/static/css/viz.css
@@ -184,7 +184,10 @@
 }
 
 .querychat-query-section bslib-code-editor .prism-code-editor {
-  background-color: var(--bs-light, #f8f8f8);
+  /* No background override: the active prism theme sets --editor__bg
+     (github-light/github-dark) to match the app's color mode. Forcing a
+     fixed light background here rendered dark-mode (light) syntax text
+     on a light background. */
   max-height: 200px;
   overflow-y: auto;
 }
diff --git a/pkg-r/inst/htmldep/viz.css b/pkg-r/inst/htmldep/viz.css
index 508054d5c..1af6952ce 100644
--- a/pkg-r/inst/htmldep/viz.css
+++ b/pkg-r/inst/htmldep/viz.css
@@ -184,7 +184,10 @@
 }
 
 .querychat-query-section bslib-code-editor .prism-code-editor {
-  background-color: var(--bs-light, #f8f8f8);
+  /* No background override: the active prism theme sets --editor__bg
+     (github-light/github-dark) to match the app's color mode. Forcing a
+     fixed light background here rendered dark-mode (light) syntax text
+     on a light background. */
   max-height: 200px;
   overflow-y: auto;
 }