Overriding Theme CSS Variables
In this example, we override the editor's default theme CSS variables to create a red theme for both light and dark modes.
Relevant Docs:
import "@blocknote/core/fonts/inter.css";import { useCreateBlockNote } from "@blocknote/react";import { BlockNoteView } from "@blocknote/mantine";import "@blocknote/mantine/style.css";import "./styles.css";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. // Adds `data-theming-css-variables-demo` to restrict styles to only this demo. return <BlockNoteView editor={editor} data-theming-css-variables-demo />;}/* Base theme */.bn-container[data-theming-css-variables-demo][data-color-scheme] { --bn-colors-editor-text: #222222; --bn-colors-editor-background: #ffeeee; --bn-colors-menu-text: #ffffff; --bn-colors-menu-background: #9b0000; --bn-colors-tooltip-text: #ffffff; --bn-colors-tooltip-background: #b00000; --bn-colors-hovered-text: #ffffff; --bn-colors-hovered-background: #b00000; --bn-colors-selected-text: #ffffff; --bn-colors-selected-background: #c50000; --bn-colors-disabled-text: #9b0000; --bn-colors-disabled-background: #7d0000; --bn-colors-shadow: #640000; --bn-colors-border: #870000; --bn-colors-side-menu: #bababa; --bn-color-highlight-colors: #ffffff; --bn-border-radius: 4px; --bn-font-family: Helvetica Neue, sans-serif;}/* Changes for dark mode */.bn-container[data-theming-css-variables-demo][data-color-scheme="dark"] { --bn-colors-editor-text: #ffffff; --bn-colors-editor-background: #9b0000; --bn-colors-side-menu: #ffffff;}