主题

主题让你能够快速更改编辑器 UI 的基本外观，包括颜色、边框、阴影和字体。

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;
}

默认主题提供了简洁、现代的外观。但是，BlockNote 也支持更高级的主题功能，比如：

自定义配色方案
明暗模式支持
CSS 变量覆盖
程序化主题配置
高亮颜色
边框圆角定制

主题仅在使用默认 Mantine 组件时可用。

ShadCN / Ariakit 组件可以采用不同的样式。

你可以通过覆盖 CSS 变量或者在 BlockNoteView 中使用 theme 属性来自定义主题。

const editor = new BlockNoteEditor({
  // 编辑器配置
});

return (
  <BlockNoteView
    editor={editor}
    theme={{
      colors: {
        editor: {
          text: "#3f3f3f",
          background: "#ffffff",
        },
        highlights: {
          red: {
            text: "#e03e3e",
            background: "#fbe4e4",
          },
        },
      },
      borderRadius: 8,
      fontFamily: "Inter, sans-serif",
    }}
  />
);

你可以选择只自定义特定方面，也可以创建完全自定义的主题，灵活匹配你的应用设计系统。

选项

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"] 选择器。

程序化配置

你也可以通过在 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;
}>;

下面的演示创建了与上个示例中的红色主题相同的效果，但这次是通过在 BlockNoteView 中使用 theme 属性设置的：

GitHub

StackBlitz

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} />;
}

明暗主题

你也可以通过传入以下对象类型，分别覆盖浅色和深色主题的 CSS 变量：

type LightAndDarkThemes = {
  light: Theme;
  dark: Theme;
};

强制切换明/暗模式

通过向 theme 属性传入 "light" 或 "dark" 字符串（而非 Theme 对象），你还可以强制 BlockNote 始终使用明亮或暗黑主题。

如果你想对编辑器设置更复杂的样式，请参见覆盖 CSS。

主题

选项

CSS 变量

程序化配置

明暗主题

强制切换明/暗模式

On this page

学习

合作

社区

法律

主题