Skip to content

fix(desktop): table first column no longer goes dark in light mode#178

Merged
oratis merged 1 commit into
mainfrom
fix/desktop-table-dark-columns
Jun 18, 2026
Merged

fix(desktop): table first column no longer goes dark in light mode#178
oratis merged 1 commit into
mainfrom
fix/desktop-table-dark-columns

Conversation

@oratis

@oratis oratis commented Jun 18, 2026

Copy link
Copy Markdown
Owner

The bug

On a dark-mode Mac with the app in light theme, rendered Markdown tables showed a dark, unreadable first column (and "Layer"-style header cell), while the rest of the table was light.

Root cause

The imported Nord theme (src/index.css @import "@milkdown/theme-nord/style.css") stripes table columns and flips them dark via the OS color scheme:

.milkdown-theme-nord.prose :where(td, th):nth-child(odd) { background-color: var(--color-gray-50); }
@media (prefers-color-scheme: dark) {
  .milkdown-theme-nord.prose :where(td, th):nth-child(odd) { background-color: var(--color-gray-900); }
}

Our theming is class-driven (html.theme-dark/theme-sepia), not OS-driven. So when OS=dark but app=light, the odd (first) column became gray-900 under our dark text → unreadable. Nord's selector (specificity 0,3,0) also out-specified our .milkdown .editor th (0,2,1).

Fix

Re-assert table backgrounds + row borders from our --mk-* theme variables at specificity (0,3,1) so tables follow the app theme, not the OS:

  • header cells (th) keep --mk-bg-elevated
  • body cells (td) are transparent
  • no per-column striping

Correct in light / dark / sepia regardless of the OS appearance.

Verification

CSS-only. The failing condition (OS dark + app light) isn't reproducible in a headless preview, so this relies on the specificity trace above + the frontend CI build + on-device check on a dark-mode Mac.

🤖 Generated with Claude Code

The imported Nord theme stripes table columns via
`.milkdown-theme-nord.prose :where(td, th):nth-child(odd)` and flips that
background to gray-900 under the OS `@media (prefers-color-scheme: dark)`. Our
app theme is class-driven (light/dark/sepia), not OS-driven — so on a dark-mode
Mac with the app in light theme, the odd (first) column rendered gray-900 with
our dark text = an unreadable dark column. Nord's rule (specificity 0,3,0) also
out-specified our `.milkdown .editor th` (0,2,1).

Re-assert table cell backgrounds + row borders from our --mk-* theme variables at
specificity (0,3,1) so tables follow the chosen app theme, not the OS: header
cells keep --mk-bg-elevated, body cells are transparent, no per-column striping.
Correct in light, dark, and sepia regardless of the OS setting.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@oratis oratis merged commit f866198 into main Jun 18, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant