Updated theme selection in docs

packages/website/docs/docs/block-types.md

@@ -203,7 +203,6 @@ export default function App() {
 
   // Creates a new editor instance.
   const editor = useBlockNote({
-    theme: "{{ getTheme(isDark) }}",
     // Tells BlockNote which blocks to use.
     blockSchema: customSchema,
     slashMenuItems: [
@@ -213,7 +212,7 @@ export default function App() {
   });
 
   // Renders the editor instance using a React component.
-  return <BlockNoteView editor={editor} />;
+  return <BlockNoteView editor={editor} theme={"{{ getTheme(isDark) }}"} />;
 }
 ```
 

packages/website/docs/docs/blocks.md

@@ -87,7 +87,6 @@ export default function App() {
 
   // Creates a new editor instance.
   const editor: BlockNoteEditor = useBlockNote({
-    theme: "{{ getTheme(isDark) }}",
     // Listens for when the editor's contents change.
     onEditorContentChange: (editor) => 
       // Converts the editor's contents to an array of Block objects.
@@ -98,7 +97,7 @@ export default function App() {
   // objects, below.
   return (
     <div>
-      <BlockNoteView editor={editor}/>
+      <BlockNoteView editor={editor} theme={"{{ getTheme(isDark) }}"} />
       <pre>{JSON.stringify(blocks, null, 2)}</pre>
     </div>
   );

packages/website/docs/docs/converting-blocks.md

@@ -62,7 +62,6 @@ export default function App() {
 
   // Creates a new editor instance.
   const editor: BlockNoteEditor = useBlockNote({
-    theme: "{{ getTheme(isDark) }}",
     // Listens for when the editor's contents change.
     onEditorContentChange: (editor) => {
       // Converts the editor's contents from Block objects to Markdown and 
@@ -79,7 +78,7 @@ export default function App() {
   // Renders the editor instance, and its contents as Markdown below.
   return (
     <div>
-      <BlockNoteView editor={editor} />
+      <BlockNoteView editor={editor} theme={"{{ getTheme(isDark) }}"} />
       <pre>{markdown}</pre>
     </div>
   );
@@ -133,7 +132,6 @@ export default function App() {
 
   // Creates a new editor instance.
   const editor: BlockNoteEditor = useBlockNote({
-    theme: "{{ getTheme(isDark) }}",
     // Makes the editor non-editable.
     editable: false
   })
@@ -158,7 +156,7 @@ export default function App() {
         value={markdown}
         onChange={(event) => setMarkdown(event.target.value)}
       />
-      <BlockNoteView editor={editor} />
+      <BlockNoteView editor={editor} theme={"{{ getTheme(isDark) }}"} />
     </div>
   );
 }
@@ -217,7 +215,6 @@ export default function App() {
 
   // Creates a new editor instance.
   const editor: BlockNoteEditor = useBlockNote({
-    theme: "{{ getTheme(isDark) }}",
     // Listens for when the editor's contents change.
     onEditorContentChange: (editor) => {
       // Converts the editor's contents from Block objects to HTML and saves 
@@ -233,7 +230,7 @@ export default function App() {
   // Renders the editor instance, and its contents as HTML below.
   return (
     <div>
-      <BlockNoteView editor={editor} />
+      <BlockNoteView editor={editor} theme={"{{ getTheme(isDark) }}"} />
       <pre>{html}</pre>
     </div>
   );
@@ -287,7 +284,6 @@ export default function App() {
 
   // Creates a new editor instance.
   const editor: BlockNoteEditor = useBlockNote({
-    theme: "{{ getTheme(isDark) }}",
     // Makes the editor non-editable.
     editable: false
   })
@@ -312,7 +308,7 @@ export default function App() {
         value={html}
         onChange={(event) => setHTML(event.target.value)}
       />
-      <BlockNoteView editor={editor} />
+      <BlockNoteView editor={editor} theme={"{{ getTheme(isDark) }}"} />
     </div>
   );
 }

packages/website/docs/docs/cursor-selections.md

@@ -91,7 +91,6 @@ import "@blocknote/core/style.css";
 export default function App() {
   // Creates a new editor instance.
   const editor: BlockNoteEditor = useBlockNote({
-    theme: "{{ getTheme(isDark) }}",
     // Listens for when the text cursor position changes.
     onTextCursorPositionChange: (editor) => {
       // Gets the block currently hovered by the text cursor.
@@ -125,7 +124,7 @@ export default function App() {
   })
 
   // Renders the editor instance.
-  return <BlockNoteView editor={editor}/>;
+  return <BlockNoteView editor={editor} theme={ "{{ getTheme(isDark) }}"} />;
 }
 ```
 
@@ -179,7 +178,6 @@ import "@blocknote/core/style.css";
 export default function App() {
   // Creates a new editor instance.
   const editor: BlockNoteEditor = useBlockNote({
-    theme: "{{ getTheme(isDark) }}",
     // Listens for when the text cursor position changes.
     onTextCursorPositionChange: (editor) => {
       // Gets the blocks currently spanned by the selection.
@@ -226,7 +224,7 @@ export default function App() {
   });
 
   // Renders the editor instance.
-  return <BlockNoteView editor={editor} />;
+  return <BlockNoteView editor={editor} theme={"{{ getTheme(isDark) }}"} />;
 }
 ```
 

packages/website/docs/docs/editor.md

@@ -34,7 +34,6 @@ export type BlockNoteEditorOptions = Partial<{
   customElements: CustomElements;
   uiFactories: UiFactories;
   defaultStyles: boolean;
-  theme: "light" | "dark";
 }>;
 ```
 
@@ -58,8 +57,6 @@ export type BlockNoteEditorOptions = Partial<{
 
 `defaultStyles`: Whether to use the default font and reset the styles of `<p>`, `<li>`, `<h1>`, etc. elements that are used in BlockNote. Defaults to true if undefined.
 
-`theme:` Whether to use the light or dark theme.
-
 ## Demo: Saving & Restoring Editor Contents
 
 By default, BlockNote doesn't preserve the editor contents when your app is reopened or refreshed. However, using the editor options, you can change this by using the editor options.
@@ -79,7 +76,6 @@ const initialContent: string | null = localStorage.getItem("editorContent");
 export default function App() {
   // Creates a new editor instance.
   const editor: BlockNoteEditor | null = useBlockNote({
-    theme: "{{ getTheme(isDark) }}",
     // If the editor contents were previously saved, restores them.
     initialContent: initialContent ? JSON.parse(initialContent) : undefined,
     // Serializes and saves the editor contents to local storage.
@@ -92,7 +88,7 @@ export default function App() {
   });
 
   // Renders the editor instance.
-  return <BlockNoteView editor={editor} />;
+  return <BlockNoteView editor={editor} theme={"{{ getTheme(isDark) }}"} />;
 }
 ```
 

packages/website/docs/docs/formatting-toolbar.md

@@ -93,13 +93,11 @@ const CustomFormattingToolbar = (props: { editor: BlockNoteEditor }) => {
 
 export default function App() {
   // Creates a new editor instance.
-  const editor: BlockNoteEditor = useBlockNote({
-    theme: "{{ getTheme(isDark) }}",
-  });
+  const editor: BlockNoteEditor = useBlockNote();
 
   // Renders the editor instance.
   return (
-    <BlockNoteView editor={editor}>
+    <BlockNoteView editor={editor} theme={"{{ getTheme(isDark) }}"}>
       <FormattingToolbarPositioner
         editor={editor}
         formattingToolbar={CustomFormattingToolbar}

packages/website/docs/docs/introduction.md

@@ -52,12 +52,10 @@ import "@blocknote/core/style.css";
 
 export default function App() {
   // Creates a new editor instance.
-  const editor: BlockNoteEditor = useBlockNote({
-    theme: "{{ getTheme(isDark) }}"
-  });
+  const editor: BlockNoteEditor = useBlockNote();
 
   // Renders the editor instance using a React component.
-  return <BlockNoteView editor={editor} />;
+  return <BlockNoteView editor={editor} theme={"{{ getTheme(isDark) }}"} />;
 }
 ```
 

packages/website/docs/docs/real-time-collaboration.md

@@ -94,7 +94,6 @@ const provider = new YPartyKitProvider(
 export default function App() {
   // Creates a new editor instance.
   const editor: BlockNoteEditor | null = useBlockNote({
-    theme: "{{ getTheme(isDark) }}",
     collaboration: {
       provider,
       fragment: doc.getXmlFragment("document-store"),
@@ -106,7 +105,7 @@ export default function App() {
   });
 
   // Renders the editor instance using a React component.
-  return <BlockNoteView editor={editor} />;
+  return <BlockNoteView editor={editor} theme={"{{ getTheme(isDark) }}"} />;
 }
 ```
 
@@ -136,7 +135,6 @@ const provider = new YPartyKitProvider(
 export default function App() {
   // Creates a new editor instance.
   const editor: BlockNoteEditor | null = useBlockNote({
-    theme: "{{ getTheme(isDark) }}",
     collaboration: {
       provider,
       fragment: doc.getXmlFragment("document-store"),
@@ -148,7 +146,7 @@ export default function App() {
   });
 
   // Renders the editor instance using a React component.
-  return <BlockNoteView editor={editor} />;
+  return <BlockNoteView editor={editor} theme={"{{ getTheme(isDark) }}"} />;
 }
 ```
 

packages/website/docs/docs/side-menu.md

@@ -62,13 +62,11 @@ const CustomSideMenu = (props: SideMenuProps) => (
 
 export default function App() {
   // Creates a new editor instance.
-  const editor: BlockNoteEditor = useBlockNote({
-    theme: "{{ getTheme(isDark) }}",
-  });
+  const editor: BlockNoteEditor = useBlockNote();
 
   // Renders the editor instance.
   return (
-    <BlockNoteView editor={editor}>
+    <BlockNoteView editor={editor} theme={"{{ getTheme(isDark) }}"}>
       <FormattingToolbarPositioner editor={editor} />
       <HyperlinkToolbarPositioner editor={editor} />
       <SlashMenuPositioner editor={editor} />
@@ -130,13 +128,11 @@ const CustomDragHandleMenu = (props: {
 
 export default function App() {
   // Creates a new editor instance.
-  const editor: BlockNoteEditor = useBlockNote({
-    theme: "{{ getTheme(isDark) }}",
-  });
+  const editor: BlockNoteEditor = useBlockNote();
 
   // Renders the editor instance.
   return (
-    <BlockNoteView editor={editor}>
+    <BlockNoteView editor={editor} theme={"{{ getTheme(isDark) }}"}>
       <FormattingToolbarPositioner editor={editor} />
       <HyperlinkToolbarPositioner editor={editor} />
       <SlashMenuPositioner editor={editor} />

packages/website/docs/docs/slash-menu.md

@@ -71,12 +71,11 @@ const customSlashMenuItemList = [
 export default function App() {
   // Creates a new editor instance.
   const editor: BlockNoteEditor = useBlockNote({
-    theme: "{{ getTheme(isDark) }}",
     slashMenuItems: customSlashMenuItemList,
   });
 
   // Renders the editor instance.
-  return <BlockNoteView editor={editor} />;
+  return <BlockNoteView editor={editor} theme={"{{ getTheme(isDark) }}"} />;
 }
 
 ```

packages/website/docs/docs/theming.md

@@ -116,7 +116,7 @@ export default function App() {
 
 :::
 
-If we pass both a light and dark theme to `BlockNoteView`, like in the demo, BlockNote automatically chooses which one to use based on the user's browser settings. However, you can just pass a single theme instead, if you want to use the same one regardless of browser settings.
+If we pass both a light and dark theme to `BlockNoteView`, like in the demo, BlockNote automatically chooses which one to use based on the user's browser settings. However, you can just pass `"light"`/`"dark"` (for the light & dark default themes), or a single custom theme instead, if you want to use the same one regardless of browser settings.
 
 ## Adding DOM Attributes
 

packages/website/docs/docs/ui-elements.md

@@ -66,13 +66,11 @@ import "@blocknote/core/style.css";
 
 export default function App() {
   // Creates a new editor instance.
-  const editor: BlockNoteEditor = useBlockNote({
-    theme: "{{ getTheme(isDark) }}",
-  });
+  const editor: BlockNoteEditor = useBlockNote();
 
   // Renders the editor instance.
   return (
-    <BlockNoteView editor={editor}>
+    <BlockNoteView editor={editor} theme={"{{ getTheme(isDark) }}"}>
       <FormattingToolbarPositioner editor={editor} />
       <HyperlinkToolbarPositioner editor={editor} />
       <SlashMenuPositioner editor={editor} />
@@ -110,13 +108,11 @@ import "@blocknote/core/style.css";
 
 export default function App() {
   // Creates a new editor instance.
-  const editor: BlockNoteEditor = useBlockNote({
-    theme: "{{ getTheme(isDark) }}",
-  });
+  const editor: BlockNoteEditor = useBlockNote();
 
   // Renders the editor instance.
   return (
-    <BlockNoteView editor={editor}>
+    <BlockNoteView editor={editor} theme={"{{ getTheme(isDark) }}"}>
       <FormattingToolbarPositioner editor={editor} />
       <HyperlinkToolbarPositioner editor={editor} />
       <SlashMenuPositioner editor={editor} />