diff --git a/examples/09-ai/02-playground/App.tsx b/examples/09-ai/02-playground/App.tsx
index ba165abb0..6ecba038c 100644
--- a/examples/09-ai/02-playground/App.tsx
+++ b/examples/09-ai/02-playground/App.tsx
@@ -3,11 +3,11 @@ import { createGroq } from "@ai-sdk/groq";
 import { createMistral } from "@ai-sdk/mistral";
 import { createOpenAI } from "@ai-sdk/openai";
 import { createOpenAICompatible } from "@ai-sdk/openai-compatible";
+import "@mantine/core/styles.css";
 import { BlockNoteEditor, filterSuggestionItems } from "@blocknote/core";
 import "@blocknote/core/fonts/inter.css";
 import { en } from "@blocknote/core/locales";
 import { BlockNoteView } from "@blocknote/mantine";
-import "@mantine/core/styles.css";
 import "@blocknote/mantine/style.css";
 import {
   FormattingToolbar,
@@ -15,7 +15,9 @@ import {
   SuggestionMenuController,
   getDefaultReactSlashMenuItems,
   getFormattingToolbarItems,
+  useBlockNoteContext,
   useCreateBlockNote,
+  usePrefersColorScheme,
 } from "@blocknote/react";
 import {
   AIMenuController,
@@ -136,74 +138,88 @@ export default function App() {
 
   const stream = useStore(ai.options, (state) => state.stream);
 
+  const themePreference = usePrefersColorScheme();
+  const existingContext = useBlockNoteContext();
+
+  const theme =
+    existingContext?.colorSchemePreference ||
+    (themePreference === "no-preference" ? "light" : themePreference);
+
   return (
-    <MantineProvider>
-      <div>
-        <Fieldset legend="Model settings" style={{ maxWidth: "500px" }}>
-          <BasicAutocomplete
-            error={model === "unknown-model" ? "Unknown model" : undefined}
-            value={modelString}
-            onChange={setModelString}
-          />
-          <RadioGroupComponent
-            label="Data format"
-            items={[
-              { name: "HTML", description: "HTML", value: "html" },
-              {
-                name: "JSON",
-                description: "JSON (experimental)",
-                value: "json",
-              },
-              {
-                name: "Markdown",
-                description: "Markdown (experimental)",
-                value: "markdown",
-              },
-            ]}
-            value={dataFormat}
-            onChange={(value) => {
-              const dataFormat =
-                value === "markdown"
-                  ? llmFormats._experimental_markdown
-                  : value === "json"
-                    ? llmFormats._experimental_json
-                    : llmFormats.html;
-              ai.options.setState({
-                dataFormat,
-              });
-              setDataFormat(value);
-            }}
-          />
-
-          <Switch
-            checked={stream}
-            onChange={(e) => ai.options.setState({ stream: e.target.checked })}
-            label="Streaming"
-          />
-        </Fieldset>
-
-        <BlockNoteView
-          editor={editor}
-          formattingToolbar={false}
-          slashMenu={false}
-        >
-          {/* Add the AI Command menu to the editor */}
-          <AIMenuController />
-
-          {/* We disabled the default formatting toolbar with `formattingToolbar=false` 
+    <div>
+      <MantineProvider
+        cssVariablesSelector=".model-settings"
+        getRootElement={() => undefined}
+      >
+        <div className="model-settings" data-mantine-color-scheme={theme}>
+          <Fieldset legend="Model settings" style={{ maxWidth: "500px" }}>
+            <BasicAutocomplete
+              error={model === "unknown-model" ? "Unknown model" : undefined}
+              value={modelString}
+              onChange={setModelString}
+            />
+            <RadioGroupComponent
+              label="Data format"
+              items={[
+                { name: "HTML", description: "HTML", value: "html" },
+                {
+                  name: "JSON",
+                  description: "JSON (experimental)",
+                  value: "json",
+                },
+                {
+                  name: "Markdown",
+                  description: "Markdown (experimental)",
+                  value: "markdown",
+                },
+              ]}
+              value={dataFormat}
+              onChange={(value) => {
+                const dataFormat =
+                  value === "markdown"
+                    ? llmFormats._experimental_markdown
+                    : value === "json"
+                      ? llmFormats._experimental_json
+                      : llmFormats.html;
+                ai.options.setState({
+                  dataFormat,
+                });
+                setDataFormat(value);
+              }}
+            />
+
+            <Switch
+              checked={stream}
+              onChange={(e) =>
+                ai.options.setState({ stream: e.target.checked })
+              }
+              label="Streaming"
+            />
+          </Fieldset>
+        </div>
+      </MantineProvider>
+
+      <BlockNoteView
+        editor={editor}
+        formattingToolbar={false}
+        slashMenu={false}
+      >
+        {/* Add the AI Command menu to the editor */}
+        <AIMenuController />
+
+        {/* We disabled the default formatting toolbar with `formattingToolbar=false` 
         and replace it for one with an "AI button" (defined below). 
         (See "Formatting Toolbar" in docs)
         */}
-          <FormattingToolbarWithAI />
+        <FormattingToolbarWithAI />
 
-          {/* We disabled the default SlashMenu with `slashMenu=false` 
+        {/* We disabled the default SlashMenu with `slashMenu=false` 
         and replace it for one with an AI option (defined below). 
         (See "Suggestion Menus" in docs)
         */}
-          <SuggestionMenuWithAI editor={editor} />
-        </BlockNoteView>
-      </div>
-    </MantineProvider>
+        <SuggestionMenuWithAI editor={editor} />
+      </BlockNoteView>
+    </div>
   );
 }
 
diff --git a/playground/src/main.tsx b/playground/src/main.tsx
index e536c6db3..64b3427b9 100644
--- a/playground/src/main.tsx
+++ b/playground/src/main.tsx
@@ -1,3 +1,4 @@
+import { usePrefersColorScheme } from "@blocknote/react";
 import { AppShell, MantineProvider, ScrollArea } from "@mantine/core";
 import React from "react";
 import { createRoot } from "react-dom/client";
@@ -31,8 +32,15 @@ function Root() {
   //   },
   //   // "root:hover": { background: "blue" },
   // });
+
+  const themePreference = usePrefersColorScheme();
+
   return (
-    <MantineProvider>
+    <MantineProvider
+      forceColorScheme={
+        themePreference === "no-preference" ? undefined : themePreference
+      }
+    >
       <AppShell
         navbar={
           window.location.search.includes("hideMenu")
@@ -46,14 +54,6 @@ function Root() {
         //   header={<Header height={60} p="xs">
         //   {/* Header content */}
         // </Header>}
-        styles={() => ({
-          main: {
-            backgroundColor: "white",
-            // theme.colorScheme === "dark"
-            //   ? theme.colors.dark[8]
-            //   : theme.colors.gray[0],
-          },
-        })}
       >
         {window.location.search.includes("hideMenu") ? undefined : (
           <AppShell.Navbar p="xs">
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-drag-handle-menu-chromium-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-drag-handle-menu-chromium-linux.png
index 3751949c5..aa96ae731 100644
Binary files a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-drag-handle-menu-chromium-linux.png and b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-drag-handle-menu-chromium-linux.png differ
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-drag-handle-menu-firefox-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-drag-handle-menu-firefox-linux.png
index 7a1976065..c3140cf5d 100644
Binary files a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-drag-handle-menu-firefox-linux.png and b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-drag-handle-menu-firefox-linux.png differ
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-drag-handle-menu-webkit-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-drag-handle-menu-webkit-linux.png
index e8ace3a33..cb5dd0eec 100644
Binary files a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-drag-handle-menu-webkit-linux.png and b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-drag-handle-menu-webkit-linux.png differ
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-editor-chromium-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-editor-chromium-linux.png
index 17cb88892..8eb8cb30e 100644
Binary files a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-editor-chromium-linux.png and b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-editor-chromium-linux.png differ
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-editor-firefox-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-editor-firefox-linux.png
index e62fed990..da72d2f9f 100644
Binary files a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-editor-firefox-linux.png and b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-editor-firefox-linux.png differ
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-editor-webkit-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-editor-webkit-linux.png
index e99d70908..99e936e82 100644
Binary files a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-editor-webkit-linux.png and b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-editor-webkit-linux.png differ
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-emoji-picker-chromium-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-emoji-picker-chromium-linux.png
index 77dc0f9c8..6a0bb64c8 100644
Binary files a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-emoji-picker-chromium-linux.png and b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-emoji-picker-chromium-linux.png differ
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-emoji-picker-firefox-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-emoji-picker-firefox-linux.png
index a5257a477..55de0038a 100644
Binary files a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-emoji-picker-firefox-linux.png and b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-emoji-picker-firefox-linux.png differ
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-emoji-picker-webkit-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-emoji-picker-webkit-linux.png
index 7d6c1e4b8..068f8604a 100644
Binary files a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-emoji-picker-webkit-linux.png and b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-emoji-picker-webkit-linux.png differ
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-formatting-toolbar-chromium-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-formatting-toolbar-chromium-linux.png
index 303dc6358..c9eccf35b 100644
Binary files a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-formatting-toolbar-chromium-linux.png and b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-formatting-toolbar-chromium-linux.png differ
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-formatting-toolbar-firefox-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-formatting-toolbar-firefox-linux.png
index 015acfcb4..0349ea700 100644
Binary files a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-formatting-toolbar-firefox-linux.png and b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-formatting-toolbar-firefox-linux.png differ
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-formatting-toolbar-webkit-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-formatting-toolbar-webkit-linux.png
index 6a2c12905..0b0a6eace 100644
Binary files a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-formatting-toolbar-webkit-linux.png and b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-formatting-toolbar-webkit-linux.png differ
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-image-toolbar-chromium-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-image-toolbar-chromium-linux.png
index e991d4809..c362ca41d 100644
Binary files a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-image-toolbar-chromium-linux.png and b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-image-toolbar-chromium-linux.png differ
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-image-toolbar-firefox-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-image-toolbar-firefox-linux.png
index 8798f2055..2ed10917f 100644
Binary files a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-image-toolbar-firefox-linux.png and b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-image-toolbar-firefox-linux.png differ
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-image-toolbar-webkit-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-image-toolbar-webkit-linux.png
index 9d059b25a..612d4b47b 100644
Binary files a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-image-toolbar-webkit-linux.png and b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-image-toolbar-webkit-linux.png differ
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-link-toolbar-chromium-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-link-toolbar-chromium-linux.png
index 108e63874..15dfa1a2e 100644
Binary files a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-link-toolbar-chromium-linux.png and b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-link-toolbar-chromium-linux.png differ
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-link-toolbar-firefox-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-link-toolbar-firefox-linux.png
index d64cdc947..8ddbc80ad 100644
Binary files a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-link-toolbar-firefox-linux.png and b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-link-toolbar-firefox-linux.png differ
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-link-toolbar-webkit-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-link-toolbar-webkit-linux.png
index 01230b637..1907eec39 100644
Binary files a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-link-toolbar-webkit-linux.png and b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-link-toolbar-webkit-linux.png differ
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-side-menu-chromium-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-side-menu-chromium-linux.png
index f706f4443..88c19396c 100644
Binary files a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-side-menu-chromium-linux.png and b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-side-menu-chromium-linux.png differ
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-side-menu-firefox-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-side-menu-firefox-linux.png
index 099f6e806..794059e4d 100644
Binary files a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-side-menu-firefox-linux.png and b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-side-menu-firefox-linux.png differ
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-side-menu-webkit-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-side-menu-webkit-linux.png
index e4dc2ed70..f0f51be34 100644
Binary files a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-side-menu-webkit-linux.png and b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-side-menu-webkit-linux.png differ
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-slash-menu-chromium-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-slash-menu-chromium-linux.png
index 15c37b5f6..018e1f085 100644
Binary files a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-slash-menu-chromium-linux.png and b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-slash-menu-chromium-linux.png differ
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-slash-menu-firefox-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-slash-menu-firefox-linux.png
index fa2b7c540..7dd4d3878 100644
Binary files a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-slash-menu-firefox-linux.png and b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-slash-menu-firefox-linux.png differ
diff --git a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-slash-menu-webkit-linux.png b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-slash-menu-webkit-linux.png
index c61094a7e..5d2905ce7 100644
Binary files a/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-slash-menu-webkit-linux.png and b/tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-slash-menu-webkit-linux.png differ