主题
主题让你能够快速更改编辑器 UI 的基本外观，包括颜色、边框、阴影和字体。如果你想在编辑器上设置更复杂的样式，请参阅覆盖 CSS。
主题仅在使用默认的 Mantine 组件时可用。ShadCN / Ariakit 组件的样式方式不同。
主题 CSS 变量
主题由一组 CSS 变量组成，可以通过覆盖这些变量来改变编辑器主题。BlockNote 提供了两个默认主题：一个是浅色模式主题，一个是深色模式主题，系统偏好将决定使用哪一个。
以下是你可以设置的每个主题 CSS 变量，值取自默认浅色主题：
--bn-colors-editor-text: #3f3f3f;
--bn-colors-editor-background: #ffffff;
--bn-colors-menu-text: #3f3f3f;
--bn-colors-menu-background: #ffffff;
--bn-colors-tooltip-text: #3f3f3f;
--bn-colors-tooltip-background: #efefef;
--bn-colors-hovered-text: #3f3f3f;
--bn-colors-hovered-background: #efefef;
--bn-colors-selected-text: #ffffff;
--bn-colors-selected-background: #3f3f3f;
--bn-colors-disabled-text: #afafaf;
--bn-colors-disabled-background: #efefef;
--bn-colors-shadow: #cfcfcf;
--bn-colors-border: #efefef;
--bn-colors-side-menu: #cfcfcf;
--bn-colors-highlights-gray-text: #9b9a97;
--bn-colors-highlights-gray-background: #ebeced;
--bn-colors-highlights-brown-text: #64473a;
--bn-colors-highlights-brown-background: #e9e5e3;
--bn-colors-highlights-red-text: #e03e3e;
--bn-colors-highlights-red-background: #fbe4e4;
--bn-colors-highlights-orange-text: #d9730d;
--bn-colors-highlights-orange-background: #f6e9d9;
--bn-colors-highlights-yellow-text: #dfab01;
--bn-colors-highlights-yellow-background: #fbf3db;
--bn-colors-highlights-green-text: #4d6461;
--bn-colors-highlights-green-background: #ddedea;
--bn-colors-highlights-blue-text: #0b6e99;
--bn-colors-highlights-blue-background: #ddebf1;
--bn-colors-highlights-purple-text: #6940a5;
--bn-colors-highlights-purple-background: #eae4f2;
--bn-colors-highlights-pink-text: #ad1a72;
--bn-colors-highlights-pink-background: #f4dfeb;
--bn-font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Open Sans",
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", sans-serif;
--bn-border-radius: 6px;在 .bn-container[data-color-scheme] 选择器上设置这些变量将覆盖默认的浅色和深色主题。若要分别覆盖浅色和深色主题，使用 .bn-container[data-color-scheme="light"] 和 .bn-container[data-color-scheme="dark"] 选择器。
下面的演示中，我们设置了一个红色主题，编辑器主题会根据浅色或深色模式自动切换。（通过切换网站页脚的主题即可看到效果）：
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 />;
}
通过代码更改 CSS 变量
你也可以通过 BlockNoteView 的 theme 属性设置主题 CSS 变量。传入一个 Theme 对象将使用该对象中的值覆盖浅色和深色主题的 CSS 变量：
type CombinedColor = Partial<{
text: string;
background: string;
}>;
type ColorScheme = Partial<{
editor: CombinedColor;
menu: CombinedColor;
tooltip: CombinedColor;
hovered: CombinedColor;
selected: CombinedColor;
disabled: CombinedColor;
shadow: string;
border: string;
sideMenu: string;
highlights: Partial<{
gray: CombinedColor;
brown: CombinedColor;
red: CombinedColor;
orange: CombinedColor;
yellow: CombinedColor;
green: CombinedColor;
blue: CombinedColor;
purple: CombinedColor;
pink: CombinedColor;
}>;
}>;
type Theme = Partial<{
colors: ColorScheme;
borderRadius: number;
fontFamily: string;
}>;或者，你也可以通过传入以下类型的对象分别覆盖浅色和深色主题的 CSS 变量：
type LightAndDarkThemes = {
light: Theme;
dark: Theme;
};下面的演示中，我们创建了与前一个演示中相同的红色主题，但这次我们通过在 BlockNoteView 里设置 theme 属性来应用它：
import "@blocknote/core/fonts/inter.css";
import {
BlockNoteView,
darkDefaultTheme,
lightDefaultTheme,
Theme,
} from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import { useCreateBlockNote } from "@blocknote/react";
// 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;
// The theme for dark mode,
// users the light theme defined above with a few changes
const darkRedTheme = {
...lightRedTheme,
colors: {
...lightRedTheme.colors,
editor: {
text: "#ffffff",
background: "#9b0000",
},
sideMenu: "#ffffff",
highlights: darkDefaultTheme.colors!.highlights,
},
} satisfies Theme;
// The combined "red theme",
// we pass this to BlockNoteView and then the editor will automatically
// switch between lightRedTheme / darkRedTheme based on the system theme
const redTheme = {
light: lightRedTheme,
dark: darkRedTheme,
};
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} theme={redTheme} />;
}
强制使用浅色/深色模式
将 theme 属性设置为 "light" 或 "dark"（而非一个 Theme 对象），你也可以强制 BlockNote 总是使用浅色或深色主题。