Changing Themes Through Code
In this example, we use the BlockNoteView
component's theme
props to create a red theme for both light and dark modes.
Relevant Docs:
import {
BlockNoteView,
darkDefaultTheme,
lightDefaultTheme,
Theme,
useCreateBlockNote,
} from "@blocknote/react";
import "@blocknote/react/style.css";
// Base theme
const lightRedTheme = {
colors: {
editor: {
text: "#222222",
background: "#ffeeee",
},
menu: {
text: "#ffffff",
background: "#9b0000",
},
tooltip: {
text: "#ffffff",
background: "#b00000",
},
hovered: {
text: "#ffffff",
background: "#b00000",
},
selected: {
text: "#ffffff",
background: "#c50000",
},
disabled: {
text: "#9b0000",
background: "#7d0000",
},
shadow: "#640000",
border: "#870000",
sideMenu: "#bababa",
highlights: lightDefaultTheme.colors!.highlights,
},
borderRadius: 4,
fontFamily: "Helvetica Neue, sans-serif",
} satisfies Theme;
// Changes for dark mode
const darkRedTheme = {
...lightRedTheme,
colors: {
...lightRedTheme.colors,
editor: {
text: "#ffffff",
background: "#9b0000",
},
sideMenu: "#ffffff",
highlights: darkDefaultTheme.colors!.highlights,
},
} satisfies Theme;
export default function App() {
// Creates a new editor instance.
const editor = useCreateBlockNote({
initialContent: [
{
type: "paragraph",
content: "Welcome to this demo!",
},
{
type: "paragraph",
content: "Open up a menu or toolbar to see more of the red theme",
},
{
type: "paragraph",
content:
"Toggle light/dark mode in the page footer and see the theme change too",
},
{
type: "paragraph",
},
],
});
// Renders the editor instance using a React component.
return (
<BlockNoteView
editor={editor}
// Sets the red theme
theme={{
light: lightRedTheme,
dark: darkRedTheme,
}}
/>
);
}