feat: Dark theme

[matthewlipski]

This PR adds a dark theme to BlockNote which you can toggle using the useDarkTheme editor option. Looks pretty good but has a few issues:

1. The hack we used to fix the color picker sets a white background on hover, and we don't have a way of easily accessing the useDarkTheme option to change this. I think this may be fixed in PR feat: customize sidemenu #143.
2. The actual editor is not currently themed as it is part of the core package, while the dark theme at least partially relies on Mantine which is only used for UI in the react package.

Theming with Mantine is actually a bit of a pain since we customize the layouts quite a bit and have to change the colours of those manually. At some point when we want to focus more on UI design it might be worth just making a custom UI instead of relying on premade Mantine components.

closes #169

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
blocknote-website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 20, 2023 11:14am

[YousefED]

Nice. I left some inline comments. Also:

editor content styling

2. The actual editor is not currently themed as it is part of the core package, while the dark theme at least partially relies on Mantine which is only used for UI in the react package.

The core package should be responsible for styling the actual editor content right? The contents of the editor now remains black text on white bg, that should also be changed

website dark mode
I've pushed a commit that enables dark mode on the website so we can properly showcase the dark-mode compatibality 😄. This brings up a few new issues:

• We need to update the theme at run time (there's a TODO left in code where we can do this).
• Some elements of the website will need to come with a dark + light variant. I've already done this for the logo + "try this" elements. We'll need to update the screenshots
• Ideally, the examples in the documentation are also theme-aware

[matthewlipski]

Nice. I left some inline comments. Also:

editor content styling

2. The actual editor is not currently themed as it is part of the core package, while the dark theme at least partially relies on Mantine which is only used for UI in the react package.

The core package should be responsible for styling the actual editor content right? The contents of the editor now remains black text on white bg, that should also be changed

website dark mode I've pushed a commit that enables dark mode on the website so we can properly showcase the dark-mode compatibality 😄. This brings up a few new issues:

• We need to update the theme at run time (there's a TODO left in code where we can do this).
• Some elements of the website will need to come with a dark + light variant. I've already done this for the logo + "try this" elements. We'll need to update the screenshots
• Ideally, the examples in the documentation are also theme-aware

One thing about the editor dark mode is since we're only using basic CSS in core we have to hard code the text and background colors instead of taking them from blockNoteColorTheme like we do for the menus. Do you think that's ok for now?

[YousefED]

One thing about the editor dark mode is since we're only using basic CSS in core we have to hard code the text and background colors instead of taking them from blockNoteColorTheme like we do for the menus. Do you think that's ok for now?

Yes that's ok for now (i.e.: use a .dark class on the container). We can come up with other solutions as well to set these colors dynamically (e.g.: css vars), but I think now it's ok

[matthewlipski]

Nice. I left some inline comments. Also:

editor content styling

2. The actual editor is not currently themed as it is part of the core package, while the dark theme at least partially relies on Mantine which is only used for UI in the react package.

The core package should be responsible for styling the actual editor content right? The contents of the editor now remains black text on white bg, that should also be changed

website dark mode I've pushed a commit that enables dark mode on the website so we can properly showcase the dark-mode compatibality 😄. This brings up a few new issues:

• We need to update the theme at run time (there's a TODO left in code where we can do this).
• Some elements of the website will need to come with a dark + light variant. I've already done this for the logo + "try this" elements. We'll need to update the screenshots
• Ideally, the examples in the documentation are also theme-aware

Also, do we want to sort out the website dark mode in this PR? Imo should be on a separate branch since it seems like dark mode for the editor is highly requested and I think shouldn't break anything for the website, maybe just look a bit ugly if we have a dark mode example.