Darkmode not applied in next.js next-themes

TypeCellOS / BlockNote

A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap.

https://www.blocknotejs.org/

Mozilla Public License 2.0

5.9k stars 384 forks source link

Darkmode not applied in next.js next-themes #824

Closed TheMikeyRoss closed 3 weeks ago

TheMikeyRoss commented 3 weeks ago

Describe the bug Switching the theme using next-themes don't apply changes to the colors of `BlockNote

Misc

Node version: 18.19.3
Package manager: pnpm
Browser: chrome

zaaakher commented 3 weeks ago

Make sure to pass the resolvedTheme to theme prop in the BlockNoteView component.

<BlockNoteView
  editor={noteEditor}
  data-note-input
  theme={resolvedTheme as 'light' | 'dark'}
/>

and in your globals.css

.bn-container[data-note-input][data-color-scheme="dark"] {
   /* styles when theme is dark*/ 
}
.bn-container[data-note-input][data-color-scheme="light"] {
   /* styles when theme is light */ 
}

Make sure to use the css variables mentioned here

TheMikeyRoss commented 3 weeks ago

That's exactly what i'm looking for, thank you @zaaakher