From c78d4b3c43403f6f908c8f1f0c1029f6561a149f Mon Sep 17 00:00:00 2001 From: lucaronin Date: Mon, 2 Mar 2026 19:33:57 +0100 Subject: [PATCH] fix: editor background matches vault theme in dark mode MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit BlockNote's internal CSS sets `.bn-editor { background-color: var(--bn-colors-editor-background); }` using its own hardcoded variables (#ffffff light, #1f1f1f dark). Our `.bn-container` rule set `background: var(--bg-primary)` but this didn't cascade to `.bn-editor` which has its own rule. Override the BlockNote internal CSS variables (`--bn-colors-editor-background` etc.) on `.bn-container` so BlockNote's own rules pick up our vault theme colors. CSS custom properties cascade normally, and our selector specificity (2 classes) matches BlockNote's dark theme rule (1 class + 1 attribute) — source order wins since our CSS loads after BlockNote's. Fixes: editor content area now seamlessly blends with sidebar and container in any vault theme. Co-Authored-By: Claude Sonnet 4.6 --- src/components/Editor.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/components/Editor.css b/src/components/Editor.css index 6b1709b8..0fea8e0b 100644 --- a/src/components/Editor.css +++ b/src/components/Editor.css @@ -67,6 +67,21 @@ background: var(--bg-primary); color: var(--text-primary); font-size: 15px; + /* Override BlockNote's internal color variables so .bn-editor background + matches our vault theme instead of BlockNote's hardcoded light/dark defaults. */ + --bn-colors-editor-background: var(--bg-primary); + --bn-colors-editor-text: var(--text-primary); + --bn-colors-menu-background: var(--bg-card); + --bn-colors-menu-text: var(--text-primary); + --bn-colors-tooltip-background: var(--bg-hover); + --bn-colors-tooltip-text: var(--text-primary); + --bn-colors-hovered-background: var(--bg-hover); + --bn-colors-hovered-text: var(--text-primary); + --bn-colors-selected-background: var(--bg-selected); + --bn-colors-selected-text: var(--text-primary); + --bn-colors-border: var(--border-primary); + --bn-colors-shadow: var(--border-primary); + --bn-colors-side-menu: var(--text-muted); } .editor__blocknote-container .bn-editor {