From 7d5e775680554737382b6cc07c7b19dd0207a5b2 Mon Sep 17 00:00:00 2001 From: isletspace Date: Fri, 4 Sep 2026 00:38:33 +0800 Subject: [PATCH] fix: scope un-themed editor color fallback so dark-mode ramp wins The web and space apps each keep a plain :root fallback block of editor color variables (light values) for the pre-theme window. Bundled CSS orders these blocks after the editor package's [data-theme*=dark] rules, and at equal specificity the later rule wins, so the fallback overrode the dark ramp in every theme. Scope the fallback with :not([data-theme*=light]):not([data-theme*=dark]) so it only applies before a theme lands (and for custom themes that match neither selector), letting the themed ramps take over otherwise. Fixes unreadable light text on light sticky backgrounds in dark mode. --- apps/space/styles/globals.css | 6 ++++-- apps/web/styles/globals.css | 6 ++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/apps/space/styles/globals.css b/apps/space/styles/globals.css index 4cddab58710..6632ae30555 100644 --- a/apps/space/styles/globals.css +++ b/apps/space/styles/globals.css @@ -8,8 +8,10 @@ * @plane/editor/styles (imported above), which is their single source of truth. * Only the un-themed :root fallback below is kept: the editor package declares * background colors solely under [data-theme*="light"] / [data-theme*="dark"], - * so without this they are undefined until a theme lands on the element. */ -:root { + * so without this they are undefined until a theme lands on the element. + * Scoped with :not() so it never overrides the themed ramps — as a plain :root + * rule later in the bundle it would win over them regardless of theme. */ +:root:not([data-theme*="light"]):not([data-theme*="dark"]) { --editor-colors-gray-background: #d6d6d8; --editor-colors-peach-background: #ffd5d7; --editor-colors-pink-background: #fdd4e3; diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css index 156a0fb61f8..a2665122661 100644 --- a/apps/web/styles/globals.css +++ b/apps/web/styles/globals.css @@ -10,8 +10,10 @@ * @plane/editor/styles (imported above), which is their single source of truth. * Only the un-themed :root fallback below is kept: the editor package declares * background colors solely under [data-theme*="light"] / [data-theme*="dark"], - * so without this they are undefined until a theme lands on the element. */ -:root { + * so without this they are undefined until a theme lands on the element. + * Scoped with :not() so it never overrides the themed ramps — as a plain :root + * rule later in the bundle it would win over them regardless of theme. */ +:root:not([data-theme*="light"]):not([data-theme*="dark"]) { --editor-colors-gray-background: #d6d6d8; --editor-colors-peach-background: #ffd5d7; --editor-colors-pink-background: #fdd4e3;