From 8ca25e1984d4e00319b5d1c9d4fcfe718b9793ed Mon Sep 17 00:00:00 2001
From: Marius Ciepluch <11855163+norandom@users.noreply.github.com>
Date: Tue, 3 Nov 2026 13:55:06 +0100
Subject: [PATCH] fix(markdown): use editor-side tokens in the preview (#992)

* fix(markdown): use editor-side tokens in the preview

The preview paints on var(--bg-editor) but took its text colors from
the UI tokens (--fg, --fg-strong, --fg-secondary), so with a light UI
theme plus a dark editor scheme (e.g. an imported dark .icls) it
rendered black-on-black. The code editor was unaffected because it
uses --fg-editor.

The preview now uses editor-side tokens: text var(--fg-editor),
headings var(--syn-markup-heading), code/pre/th background
var(--bg-editor-inline), blockquote var(--fg-editor) at 80%.

* chore: oxfmt src/features/run/types.ts (fixes format:check broken on main by 002401e8)

* chore: regenerate bindings after rebasing onto main
---
 .../viewers/markdown/Markdown.module.css         | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/features/viewers/markdown/Markdown.module.css b/src/features/viewers/markdown/Markdown.module.css
index 65891fd9..86bbf294 100644
--- a/src/features/viewers/markdown/Markdown.module.css
+++ b/src/features/viewers/markdown/Markdown.module.css
@@ -34,8 +34,11 @@
   overflow: auto;
   padding: 16px 28px 40vh;
   outline: none;
+  /* The preview sits on the editor background, so its text comes from the
+     editor scheme: with a light UI theme + dark editor scheme, the UI's
+     --fg would be black-on-black here. */
   background: var(--bg-editor, var(--bg-app));
-  color: var(--fg);
+  color: var(--fg-editor, var(--fg));
   font-family: var(--font-ui);
   font-size: calc(14px + var(--markdown-font-zoom, 0px));
   line-height: 1.6;
@@ -53,7 +56,7 @@
 .preview :global(h5),
 .preview :global(h6) {
   margin: 1.2em 0 0.6em;
-  color: var(--fg-strong);
+  color: var(--syn-markup-heading, var(--fg-strong));
   line-height: 1.25;
 }
 .preview :global(h1) {
@@ -90,12 +93,12 @@
   font-size: 0.9em;
   padding: 0.1em 0.35em;
   border-radius: var(--radius-small);
-  background: var(--bg-elev);
+  background: var(--bg-editor-inline, var(--bg-elev));
 }
 .preview :global(pre) {
   padding: 10px 12px;
   border-radius: var(--radius-control);
-  background: var(--bg-elev);
+  background: var(--bg-editor-inline, var(--bg-elev));
   overflow: auto;
   line-height: 1.45;
 }
@@ -107,7 +110,8 @@
 .preview :global(blockquote) {
   padding: 0 1em;
   border-left: 3px solid var(--border-strong);
-  color: var(--fg-secondary);
+  color: var(--fg-editor, var(--fg-secondary));
+  opacity: 0.8;
 }
 .preview :global(table) {
   border-collapse: collapse;
@@ -118,7 +122,7 @@
   border: 1px solid var(--border-strong);
 }
 .preview :global(th) {
-  background: var(--bg-elev);
+  background: var(--bg-editor-inline, var(--bg-elev));
 }
 .preview :global(hr) {
   border: none;