Skip to content

fix: move dark editor background rule outside @layer base for correct cascade priority#57

Merged
j4rviscmd merged 1 commit intomainfrom
fix/editor-dark-bg
Mar 26, 2026
Merged

fix: move dark editor background rule outside @layer base for correct cascade priority#57
j4rviscmd merged 1 commit intomainfrom
fix/editor-dark-bg

Conversation

@j4rviscmd
Copy link
Copy Markdown
Owner

Summary

Fix dark mode editor background not matching the app's dark theme.

Problem

The .dark .bn-editor CSS rule was declared inside Tailwind's @layer base, which has lower specificity than BlockNote's default styles defined outside any @layer. As a result, BlockNote's --bn-colors-editor-background (#1f1f1f) took precedence over the app's --background token in dark mode, causing the editor background to appear lighter than the surrounding UI.

Changes

  • Moved .dark .bn-editor { background-color: var(--background); } from inside @layer base to outside it, so the rule wins the CSS cascade over BlockNote's defaults
  • Added a detailed comment explaining the cascade behavior and why the rule must remain outside @layer base

Testing

  • Verified dark mode editor background now matches the app's dark theme (oklch(0.145 0 0))
  • Verified light mode is unaffected
  • npm run build passes
  • cargo build passes

@j4rviscmd j4rviscmd added the bug Something isn't working label Mar 26, 2026
@j4rviscmd j4rviscmd merged commit b95cd52 into main Mar 26, 2026
2 checks passed
@j4rviscmd j4rviscmd deleted the fix/editor-dark-bg branch March 26, 2026 09:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant