✨ Feat: F20.1 — dark theme following OS preference

assets/archetype-form.tsx

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { MantineProvider } from '@mantine/core';
+import AppMantineProvider from './components/AppMantineProvider';
 import PlaystyleTagSelect from './components/PlaystyleTagSelect';
 import PokemonSpriteSelect from './components/PokemonSpriteSelect';
 import MarkdownEditor from './components/MarkdownEditor';
@@ -39,12 +39,12 @@ if (spriteRoot) {
     const hiddenInputName = spriteRoot.dataset.hiddenInputName ?? 'archetype_form[pokemonSlugs]';
 
     createRoot(spriteRoot).render(
-        <MantineProvider>
+        <AppMantineProvider>
             <PokemonSpriteSelect
                 initialValues={initialSlugs}
                 hiddenInputName={hiddenInputName}
             />
-        </MantineProvider>,
+        </AppMantineProvider>,
     );
 }
 
@@ -74,14 +74,14 @@ if (playstyleRoot) {
     const placeholder = playstyleRoot.dataset.placeholder ?? undefined;
 
     createRoot(playstyleRoot).render(
-        <MantineProvider>
+        <AppMantineProvider>
             <PlaystyleTagSelect
                 existingTags={existingTags}
                 initialValues={initialValues}
                 hiddenInputName="archetype_form[playstyleTags]"
                 placeholder={placeholder}
             />
-        </MantineProvider>,
+        </AppMantineProvider>,
     );
 }
 
@@ -98,12 +98,12 @@ editorRoots.forEach((root) => {
     }
 
     createRoot(root).render(
-        <MantineProvider>
+        <AppMantineProvider>
             <MarkdownEditor
                 textareaSelector={`#${textareaId}`}
                 initialContent={textarea.value}
                 placeholder={textarea.placeholder}
             />
-        </MantineProvider>,
+        </AppMantineProvider>,
     );
 });

assets/archetype-variants.tsx

@@ -13,7 +13,7 @@
 
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { MantineProvider } from '@mantine/core';
+import AppMantineProvider from './components/AppMantineProvider';
 import '@mantine/core/styles.css';
 import ArchetypeVariantSelector from './components/ArchetypeVariantSelector';
 
@@ -47,8 +47,8 @@ if (root) {
     };
 
     createRoot(root).render(
-        <MantineProvider>
+        <AppMantineProvider>
             <ArchetypeVariantSelector variants={variants} labels={labels} archetypeSlug={archetypeSlug} canCopyTag={canCopyTag} />
-        </MantineProvider>,
+        </AppMantineProvider>,
     );
 }

assets/banned-card-form.tsx

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { MantineProvider } from '@mantine/core';
+import AppMantineProvider from './components/AppMantineProvider';
 import MarkdownEditor from './components/MarkdownEditor';
 
 import '@mantine/core/styles.css';
@@ -33,12 +33,12 @@ editorRoots.forEach((root) => {
     }
 
     createRoot(root).render(
-        <MantineProvider>
+        <AppMantineProvider>
             <MarkdownEditor
                 textareaSelector={`#${textareaId}`}
                 initialContent={textarea.value}
                 placeholder={textarea.placeholder}
             />
-        </MantineProvider>,
+        </AppMantineProvider>,
     );
 });

assets/catalog-filters.tsx

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { MantineProvider } from '@mantine/core';
+import AppMantineProvider from './components/AppMantineProvider';
 import ArchetypeFilterSelect from './components/ArchetypeFilterSelect';
 import AsyncAutocomplete from './components/AsyncAutocomplete';
 
@@ -34,15 +34,15 @@ document.querySelectorAll<HTMLElement>('[data-catalog-archetype]').forEach((root
     const initialLabel = root.dataset.initialLabel ?? '';
 
     createRoot(root).render(
-        <MantineProvider>
+        <AppMantineProvider>
             <ArchetypeFilterSelect
                 catalogUrl={catalogUrl}
                 hiddenInputName={hiddenInput}
                 placeholder={placeholder}
                 initialValue={initialValue}
                 initialLabel={initialLabel}
             />
-        </MantineProvider>,
+        </AppMantineProvider>,
     );
 });
 
@@ -54,7 +54,7 @@ document.querySelectorAll<HTMLElement>('[data-catalog-event]').forEach((root) =>
     const initialId = root.dataset.initialId ?? '';
 
     createRoot(root).render(
-        <MantineProvider>
+        <AppMantineProvider>
             <AsyncAutocomplete
                 searchUrl={searchUrl}
                 hiddenInputName={hiddenInput}
@@ -67,7 +67,7 @@ document.querySelectorAll<HTMLElement>('[data-catalog-event]').forEach((root) =>
                     secondary: `${item.date as string} · ${item.location as string}`,
                 })}
             />
-        </MantineProvider>,
+        </AppMantineProvider>,
     );
 });
 
@@ -79,7 +79,7 @@ document.querySelectorAll<HTMLElement>('[data-catalog-owner]').forEach((root) =>
     const initialId = root.dataset.initialId ?? '';
 
     createRoot(root).render(
-        <MantineProvider>
+        <AppMantineProvider>
             <AsyncAutocomplete
                 searchUrl={searchUrl}
                 hiddenInputName={hiddenInput}
@@ -91,6 +91,6 @@ document.querySelectorAll<HTMLElement>('[data-catalog-owner]').forEach((root) =>
                     label: item.screenName as string,
                 })}
             />
-        </MantineProvider>,
+        </AppMantineProvider>,
     );
 });

assets/components/AppMantineProvider.tsx

@@ -0,0 +1,27 @@
+/*
+ * This file is part of the Expanded Decks project.
+ *
+ * (c) Expanded Decks contributors
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import React from 'react';
+import { MantineProvider } from '@mantine/core';
+
+/**
+ * Shared Mantine provider for all React islands in the app. Configures
+ * Mantine to follow the operating-system color scheme (`auto`) so it stays
+ * in sync with the `data-bs-theme` attribute set on `<html>` by the inline
+ * bridge script in base.html.twig.
+ *
+ * @see docs/features.md F20.1 — Dark theme following OS preference
+ */
+export default function AppMantineProvider({ children }: { children: React.ReactNode }) {
+    return (
+        <MantineProvider defaultColorScheme="auto">
+            {children}
+        </MantineProvider>
+    );
+}

assets/deck-card-list.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { MantineProvider } from '@mantine/core';
+import AppMantineProvider from './components/AppMantineProvider';
 import { DeckCardList, type DeckCardListProps } from './components/DeckCardList';
 
 import '@mantine/core/styles.css';
@@ -55,7 +55,7 @@ if (root) {
     };
 
     createRoot(root).render(
-        <MantineProvider>
+        <AppMantineProvider>
             <DeckCardList
                 originalCards={originalCards}
                 minifiedCards={minifiedCards}
@@ -67,6 +67,6 @@ if (root) {
                 deckName={root.dataset.deckName ?? ''}
                 labels={labels}
             />
-        </MantineProvider>,
+        </AppMantineProvider>,
     );
 }

assets/deck-form.tsx

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { MantineProvider } from '@mantine/core';
+import AppMantineProvider from './components/AppMantineProvider';
 import ArchetypeSelect from './components/ArchetypeSelect';
 import LanguageSelect from './components/LanguageSelect';
 import PokemonSpriteSelect from './components/PokemonSpriteSelect';
@@ -32,15 +32,15 @@ if (archetypeRoot) {
     const initialName = archetypeRoot.dataset.archetypeName ?? undefined;
 
     createRoot(archetypeRoot).render(
-        <MantineProvider>
+        <AppMantineProvider>
             <ArchetypeSelect
                 searchUrl={searchUrl}
                 createUrl={createUrl}
                 initialId={initialId}
                 initialName={initialName}
                 hiddenInputName="deck_form[archetype]"
             />
-        </MantineProvider>,
+        </AppMantineProvider>,
     );
 }
 
@@ -57,12 +57,12 @@ if (languageRoot) {
     }
 
     createRoot(languageRoot).render(
-        <MantineProvider>
+        <AppMantineProvider>
             <LanguageSelect
                 initialLanguages={initialLanguages}
                 hiddenInputName="deck_form[languages]"
             />
-        </MantineProvider>,
+        </AppMantineProvider>,
     );
 }
 
@@ -79,11 +79,11 @@ if (spriteRoot) {
     }
 
     createRoot(spriteRoot).render(
-        <MantineProvider>
+        <AppMantineProvider>
             <PokemonSpriteSelect
                 initialValues={initialSlugs}
                 hiddenInputName="deck_form[pokemonSlugs]"
             />
-        </MantineProvider>,
+        </AppMantineProvider>,
     );
 }

assets/deck-found.tsx

@@ -12,7 +12,7 @@
  */
 
 import { createRoot } from 'react-dom/client';
-import { MantineProvider } from '@mantine/core';
+import AppMantineProvider from './components/AppMantineProvider';
 import '@mantine/core/styles.css';
 import DeckFoundModal from './components/DeckFoundModal';
 
@@ -26,7 +26,7 @@ if (root) {
     const labels = JSON.parse(root.dataset.labels ?? '{}');
 
     createRoot(root).render(
-        <MantineProvider>
+        <AppMantineProvider>
             <DeckFoundModal
                 apiUrl={apiUrl}
                 csrfToken={csrfToken}
@@ -35,6 +35,6 @@ if (root) {
                 sitekey={sitekey}
                 labels={labels}
             />
-        </MantineProvider>,
+        </AppMantineProvider>,
     );
 }

assets/deck-version-compare.tsx

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { MantineProvider } from '@mantine/core';
+import AppMantineProvider from './components/AppMantineProvider';
 import DeckVersionCompare from './components/DeckVersionCompare';
 
 import '@mantine/core/styles.css';
@@ -45,8 +45,8 @@ document.querySelectorAll<HTMLElement>('[data-version-compare]').forEach((root)
     };
 
     createRoot(root).render(
-        <MantineProvider>
+        <AppMantineProvider>
             <DeckVersionCompare shortTag={shortTag} compareUrl={compareUrl} versions={versions} labels={labels} />
-        </MantineProvider>,
+        </AppMantineProvider>,
     );
 });

assets/event-form.tsx

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { MantineProvider } from '@mantine/core';
+import AppMantineProvider from './components/AppMantineProvider';
 import EventTagSelect from './components/EventTagSelect';
 
 import '@mantine/core/styles.css';
@@ -46,13 +46,13 @@ if (tagRoot) {
     const placeholder = tagRoot.dataset.placeholder ?? '';
 
     createRoot(tagRoot).render(
-        <MantineProvider>
+        <AppMantineProvider>
             <EventTagSelect
                 existingTags={existingTags}
                 initialValues={initialValues}
                 hiddenInputName={hiddenInputName}
                 placeholder={placeholder}
             />
-        </MantineProvider>,
+        </AppMantineProvider>,
     );
 }

assets/homepage-editor.tsx

@@ -12,7 +12,7 @@
  */
 
 import { createRoot } from 'react-dom/client';
-import { MantineProvider } from '@mantine/core';
+import AppMantineProvider from './components/AppMantineProvider';
 import HomepageEditor from './components/HomepageEditor';
 
 import '@mantine/core/styles.css';
@@ -61,7 +61,7 @@ if (root) {
     } catch { /* use default */ }
 
     createRoot(root).render(
-        <MantineProvider>
+        <AppMantineProvider>
             <HomepageEditor
                 saveUrl={saveUrl}
                 previewUrl={previewUrl}
@@ -73,6 +73,6 @@ if (root) {
                 blockTypes={blockTypes}
                 labels={labels}
             />
-        </MantineProvider>,
+        </AppMantineProvider>,
     );
 }

assets/navbar-search.tsx

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { MantineProvider } from '@mantine/core';
+import AppMantineProvider from './components/AppMantineProvider';
 import NavbarSearch from './components/NavbarSearch';
 
 import '@mantine/core/styles.css';
@@ -27,7 +27,7 @@ if (root) {
     const labelNoResults = root.dataset.labelNoResults ?? 'No results';
 
     createRoot(root).render(
-        <MantineProvider>
+        <AppMantineProvider>
             <NavbarSearch
                 searchUrl={searchUrl}
                 searchPageUrl={searchPageUrl}
@@ -37,6 +37,6 @@ if (root) {
                     noResults: labelNoResults,
                 }}
             />
-        </MantineProvider>,
+        </AppMantineProvider>,
     );
 }