docs: AI playground styling fixes (#1800)

* Scoped Mantine styles in AI playground demo

* Fixed playground not setting Mantine dark mode from system theme

* Updated dark theme e2e snaps

Author: matthewlipski

examples/09-ai/02-playground/App.tsx

@@ -3,19 +3,21 @@ 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,
   FormattingToolbarController,
   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>
   );
 }
 

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">