homelab/stack
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix(marimo): defeat .dark class token overrides

Browse Source 
Marimo ships this rule:

    .dark, .marimo:is(.dark *) {
      --csstools-color-scheme--light: ;
      color-scheme: dark
    }

When a .dark class is present anywhere in the tree (auto-applied from
OS prefers-color-scheme, saved user preference, or explicit toggle),
marimo flips the entire token set to dark values via CSS light-dark().
The floating outline panel, context-aware sidebar, and any bg-background
wrapper then render with #181c1a near-black instead of our cream,
with slate/black text that's unreadable.

Force color-scheme: light !important globally on html/body/.marimo/.dark
and repeat every token definition block with .dark / html.dark / body.dark
in the selector list so our editorial cream palette wins by equal
specificity + later load order regardless of any ancestor .dark class.

Also clear --csstools-color-scheme--light back to initial so the
light-dark() fallback resolves to the light value in every scope.
This commit is contained in:
kert
2026-04-10 18:03:07 -04:00
parent c1fbf20007
commit 081613998a
1 changed files with 21 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
assets/css/marimo.css
View File

@@ -3,10 +3,26 @@
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');
/* Force light color scheme globally. Marimo has a rule
`.dark, .marimo:is(.dark *) { color-scheme: dark }` which flips the
entire token set to dark values via `light-dark()`. That causes the
outline panel, context sidebars, etc. to render with dark navy
backgrounds even when the user wants editorial cream. Hard-kill it. */
:root,
html,
body,
.marimo,
.dark,
.dark .marimo,
.dark-theme {
color-scheme: light !important;
--csstools-color-scheme--light: initial !important;
}
/* ============================================
HTI-5 COLOR PALETTE
============================================ */
:root, .marimo {
:root, .marimo, html.dark, body.dark, .dark .marimo {
--background: #F7F5F0;
--foreground: #1A1A18;
--card: #FAFAF7;
@@ -46,7 +62,7 @@
/* ============================================
FONT CONFIGURATION
============================================ */
:root, .marimo {
:root, .marimo, html.dark, body.dark, .dark .marimo {
--monospace-font: var(--font-mono);
--text-font: var(--font-body);
--heading-font: var(--font-display);
@@ -58,7 +74,7 @@
/* ============================================
MARIMO SEMANTIC VARIABLES
============================================ */
:root, .marimo {
:root, .marimo, html.dark, body.dark, .dark .marimo {
--popover: var(--card);
--popover-foreground: var(--foreground);
@@ -94,7 +110,7 @@
Remap neutral scales to HTI-5 warm cream palette.
Steps 11-12 must be dark for text on light bg.
============================================ */
:root, .marimo {
:root, .marimo, html.dark, body.dark, .dark .marimo {
/* Gray → Warm cream/linen */
--gray-1: #F7F5F0;
--gray-2: #F0EDE6;
@@ -309,7 +325,7 @@
/* ============================================
TAILWIND PROSE - Markdown content
============================================ */
:root, .marimo {
:root, .marimo, html.dark, body.dark, .dark .marimo {
--tw-prose-body: var(--foreground);
--tw-prose-headings: var(--foreground);
--tw-prose-lead: var(--muted-foreground);