From 65d14ebf6fa1f5d7a97a166411653610d4b4c494 Mon Sep 17 00:00:00 2001
From: lucaronin <luca.rossi.917@gmail.com>
Date: Sat, 2 May 2026 01:47:42 +0200
Subject: [PATCH] fix(editor): theme code blocks in light mode

---
 src/components/EditorTheme.css              | 27 ++++++++++++++++++++-
 src/index.css                               |  8 ++++++
 tests/smoke/editor-code-block-theme.spec.ts | 13 ++++++++--
 3 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/src/components/EditorTheme.css b/src/components/EditorTheme.css
index 6d6b9631..21ce0cf3 100644
--- a/src/components/EditorTheme.css
+++ b/src/components/EditorTheme.css
@@ -389,9 +389,29 @@
   cursor: pointer;
 }
 
-/* Code blocks intentionally keep BlockNote's dark shell and syntax-highlighted content. */
+/* Code blocks follow Tolaria's theme instead of BlockNote's fixed dark shell. */
+.editor__blocknote-container .bn-block-content[data-content-type="codeBlock"] {
+  background-color: var(--editor-code-block-background) !important;
+  border: 1px solid var(--editor-code-block-border);
+  color: var(--editor-code-block-text) !important;
+}
+
+.editor__blocknote-container .bn-block-content[data-content-type="codeBlock"] > pre {
+  color: inherit;
+}
+
+.editor__blocknote-container .bn-block-content[data-content-type="codeBlock"] > div > select {
+  color: var(--editor-code-block-language) !important;
+}
+
+.editor__blocknote-container .bn-block-content[data-content-type="codeBlock"] > div > select > option {
+  background: var(--popover);
+  color: var(--foreground);
+}
+
 .editor__blocknote-container .bn-block-content[data-content-type="codeBlock"] pre code {
   background-color: transparent;
+  color: inherit;
   padding: 0;
   border-radius: 0;
 }
@@ -400,6 +420,11 @@
   background-color: transparent !important;
 }
 
+:root:not(.dark) .editor__blocknote-container .bn-block-content[data-content-type="codeBlock"] pre code .shiki,
+[data-theme="light"] .editor__blocknote-container .bn-block-content[data-content-type="codeBlock"] pre code .shiki {
+  color: var(--editor-code-block-text) !important;
+}
+
 /* --- Blockquote --- */
 .editor__blocknote-container [data-content-type="blockquote"],
 .editor__blocknote-container blockquote {
diff --git a/src/index.css b/src/index.css
index 514e80d7..fd2991b3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -115,6 +115,10 @@
   --diff-removed-text: #F44336;
   --diff-removed-bg: rgba(244, 67, 54, 0.12);
   --diff-hunk-bg: rgba(33, 150, 243, 0.08);
+  --editor-code-block-background: #F5F8FF;
+  --editor-code-block-border: #DDE8FF;
+  --editor-code-block-text: var(--text-primary);
+  --editor-code-block-language: var(--text-secondary);
 
   /* --- Overlays and shadows (light mode) --- */
   --shadow-overlay: var(--surface-overlay);
@@ -263,6 +267,10 @@
   --diff-removed-text: #FF8A86;
   --diff-removed-bg: rgba(255, 138, 134, 0.14);
   --diff-hunk-bg: rgba(120, 164, 255, 0.13);
+  --editor-code-block-background: #161616;
+  --editor-code-block-border: transparent;
+  --editor-code-block-text: #FFFFFF;
+  --editor-code-block-language: rgba(255, 255, 255, 0.7);
 
   /* --- Overlays and shadows (dark mode) --- */
   --shadow-overlay: var(--surface-overlay);
diff --git a/tests/smoke/editor-code-block-theme.spec.ts b/tests/smoke/editor-code-block-theme.spec.ts
index 6ffb9b52..c5a8ec81 100644
--- a/tests/smoke/editor-code-block-theme.spec.ts
+++ b/tests/smoke/editor-code-block-theme.spec.ts
@@ -49,7 +49,7 @@ test.describe('Editor code block theme', () => {
     removeFixtureVaultCopy(tempVaultDir)
   })
 
-  test('fenced code blocks keep the dark BlockNote surface while inline code stays muted', async ({ page }) => {
+  test('fenced code blocks follow the active theme while inline code stays muted', async ({ page }) => {
     await openFixtureVault(page, tempVaultDir)
     const noteList = page.locator('[data-testid="note-list-container"]')
     const noteItem = noteList.getByText(CODE_NOTE_TITLE, { exact: true })
@@ -68,9 +68,18 @@ test.describe('Editor code block theme', () => {
     await expect(fencedCode).toBeVisible()
 
     await expect.poll(() => backgroundColor(inlineCode)).toBe('rgb(240, 240, 239)')
-    await expect.poll(() => backgroundColor(codeBlock)).toBe('rgb(22, 22, 22)')
+    await expect.poll(() => backgroundColor(codeBlock)).toBe('rgb(245, 248, 255)')
     await expect.poll(() => backgroundColor(fencedCode)).toBe('rgba(0, 0, 0, 0)')
+    await expect.poll(() => textColor(fencedCode)).toBe('rgb(55, 53, 47)')
+    await expect.poll(() => textColor(highlightedToken)).toBe('rgb(55, 53, 47)')
+
+    await page.getByTestId('status-theme-mode').click()
+    await expect.poll(() => backgroundColor(codeBlock)).toBe('rgb(22, 22, 22)')
     await expect.poll(() => textColor(fencedCode)).toBe('rgb(255, 255, 255)')
+
+    await page.getByTestId('status-theme-mode').click()
+    await expect.poll(() => backgroundColor(codeBlock)).toBe('rgb(245, 248, 255)')
+    await expect.poll(() => textColor(fencedCode)).toBe('rgb(55, 53, 47)')
     await expect(highlightedToken).toBeVisible()
   })
 })