diff --git a/src/app/styles/components.css b/src/app/styles/components.css
index 8d6d686b..49f74563 100644
--- a/src/app/styles/components.css
+++ b/src/app/styles/components.css
@@ -2027,8 +2027,12 @@ dialog.signin-modal.app-modal .signin-modal__body {
    lower-contrast surface. Mirrors the `.profile-banner-upload__btn
    --ghost` pattern. */
 .image-edit-overlay__btn--ghost {
+  /* The surface is a fixed near-white (it sits over an image), so the
+     text must be a fixed dark too: --color-primary is invariant. Using
+     --fg-primary here made it white-on-white in dark mode, where
+     --fg-primary flips to near-white. */
   background: rgba(255, 255, 255, 0.92);
-  color: var(--fg-primary);
+  color: var(--color-primary);
 }
 
 .image-edit-overlay__btn--ghost:hover {
diff --git a/src/app/styles/explore.css b/src/app/styles/explore.css
index d5cfbabb..54774f36 100644
--- a/src/app/styles/explore.css
+++ b/src/app/styles/explore.css
@@ -129,11 +129,14 @@
 .explore__filter--active,
 .explore__filter--active:hover {
   /* The hover style on the generic filter dimmed the background
-     to bg-sunken while the active style flips text to white —
-     producing unreadable white-on-light text mid-hover. Keep the
-     fg-primary fill on hover when the filter is already active. */
+     to bg-sunken while the active style inverts the text — producing
+     unreadable text mid-hover. Keep the fg-primary fill on hover when
+     the filter is already active. Text is --bg-canvas (not a fixed
+     white) so it inverts with the fg-primary fill: light in light mode,
+     dark in dark mode. A fixed white was white-on-white in dark mode,
+     where --fg-primary is itself near-white. */
   background: var(--fg-primary);
-  color: #ffffff;
+  color: var(--bg-canvas);
 }
 
 /* ---------- Main pane ---------- */
@@ -475,12 +478,12 @@
 
 .explore__view-btn--active {
   background: var(--fg-primary);
-  color: var(--bg-primary, #fff);
+  color: var(--bg-canvas);
 }
 
 .explore__view-btn--active:hover {
   background: var(--fg-primary);
-  color: var(--bg-primary, #fff);
+  color: var(--bg-canvas);
 }
 
 .explore__view-btn + .explore__view-btn {
diff --git a/src/app/styles/profile-inline-edit.css b/src/app/styles/profile-inline-edit.css
index 8beba1f6..5bd48571 100644
--- a/src/app/styles/profile-inline-edit.css
+++ b/src/app/styles/profile-inline-edit.css
@@ -297,8 +297,11 @@
    surface so the primary "Change banner" button stays the focal
    action. */
 .profile-banner-upload__btn--ghost {
+  /* Fixed near-white surface (sits over the banner image) → text must be
+     a fixed dark. --color-primary is invariant; --fg-primary flipped to
+     near-white in dark mode, giving white-on-white. */
   background: rgba(255, 255, 255, 0.92);
-  color: var(--fg-primary);
+  color: var(--color-primary);
 }
 
 .profile-banner-upload__btn--ghost:hover {
diff --git a/src/app/styles/settings-page.css b/src/app/styles/settings-page.css
index 56ffd8a9..3989b952 100644
--- a/src/app/styles/settings-page.css
+++ b/src/app/styles/settings-page.css
@@ -150,13 +150,14 @@
 }
 
 /* Active state mirrors .explore__filter--active: solid fg-primary fill
-   with white text. Keep the fill on hover so we don't get
-   white-on-light text mid-hover. */
+   with inverted (--bg-canvas) text so it stays readable in dark mode,
+   where --fg-primary is near-white and a fixed white was white-on-white.
+   Keep the fill on hover so we don't get unreadable text mid-hover. */
 .sx-menu__item--active,
 .sx-menu__item--active:hover,
 .sx-menu__item--active:focus-visible {
   background: var(--fg-primary);
-  color: #ffffff;
+  color: var(--bg-canvas);
   font-weight: 500;
 }
 
@@ -177,7 +178,7 @@
 
 .sx-menu__item--active .sx-menu__icon,
 .sx-menu__item--active:hover .sx-menu__icon {
-  color: #ffffff;
+  color: var(--bg-canvas);
 }
 
 .sx-menu__label {
diff --git a/src/app/styles/workspace.css b/src/app/styles/workspace.css
index 44a4644d..d91589d9 100644
--- a/src/app/styles/workspace.css
+++ b/src/app/styles/workspace.css
@@ -144,7 +144,7 @@
   padding: 6px 12px;
   border-radius: var(--radius);
   background: var(--fg-primary);
-  color: var(--bg-primary, #fff);
+  color: var(--bg-canvas);
   text-decoration: none;
   font-size: 0.85rem;
   font-weight: 500;
@@ -282,7 +282,7 @@
 
 .wks-notion__node--active {
   background: var(--fg-primary);
-  color: var(--bg-primary, #fff);
+  color: var(--bg-canvas);
 }
 
 .wks-notion__node-label {
@@ -352,7 +352,7 @@
 
 .wks-mail__network--active {
   background: var(--fg-primary);
-  color: var(--bg-primary, #fff);
+  color: var(--bg-canvas);
 }
 
 .wks-mail__accounts {
@@ -434,7 +434,7 @@
 
 .wks-mail__folder--active {
   background: var(--fg-primary);
-  color: var(--bg-primary, #fff);
+  color: var(--bg-canvas);
 }
 
 .wks-mail__folder-label {
@@ -633,7 +633,7 @@
 
 .wks-slack__lex--active {
   background: var(--fg-primary);
-  color: var(--bg-primary, #fff);
+  color: var(--bg-canvas);
 }
 
 .wks-slack__lex-label {