fix: force theme from props

jotaijs · Apr 12, 2024 · ec11fe3 · ec11fe3
1 parent 4f713f8
commit ec11fe3
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/src/DevTools/DevTools.tsx b/src/DevTools/DevTools.tsx
@@ -67,7 +67,7 @@ const theme = createTheme({
 const DevToolsMain = ({
   store,
   isInitialOpen = false,
-  theme: userColorScheme = 'light',
+  theme: userColorScheme,
   position = 'bottom-left',
   nonce = '',
   options,
@@ -79,19 +79,27 @@ const DevToolsMain = ({
     setDevToolsOptions(options);
   }, [setDevToolsOptions, options]);
 
+  const conditionalProps = React.useMemo(() => {
+    if (typeof userColorScheme === 'string') {
+      return { forceColorScheme: userColorScheme };
+    }
+    return {};
+  }, [userColorScheme]);
+
   return (
     <React.StrictMode>
       <span id="jotai-devtools-root">
         <MantineProvider
           theme={theme}
           colorSchemeManager={colorSchemeManager}
-          defaultColorScheme={userColorScheme}
+          defaultColorScheme="light"
           classNamesPrefix="jotai-devtools"
           withStaticClasses={false}
           withGlobalClasses={false}
           getRootElement={getRootElement}
           cssVariablesSelector="#jotai-devtools-root"
           getStyleNonce={() => nonce}
+          {...conditionalProps}
         >
           <Extension
             store={store}

diff --git a/src/stories/Default/Demos/DemoApp.tsx b/src/stories/Default/Demos/DemoApp.tsx
@@ -1,5 +1,12 @@
 import * as React from 'react';
-import { Grid, MantineProvider, Select, Text, Title } from '@mantine/core';
+import {
+  Grid,
+  MantineProvider,
+  Select,
+  Text,
+  Title,
+  useComputedColorScheme,
+} from '@mantine/core';
 import { DevTools, DevToolsProps } from '../../../';
 import { Async } from './Async';
 import { Counter } from './Counter';
@@ -8,6 +15,11 @@ import { Random } from './Random';
 import { ThemeToggle } from './ThemeToggle';
 import { Todos } from './Todos';
 
+const DevToolsWithColorScheme = (props: DevToolsProps) => {
+  const colorScheme = useComputedColorScheme();
+  return <DevTools store={demoStore} theme={colorScheme} {...props} />;
+};
+
 export const DemoApp = (props: DevToolsProps) => {
   return (
     <DemoJotaiStoreContext.Provider value={demoStore}>
@@ -17,7 +29,7 @@ export const DemoApp = (props: DevToolsProps) => {
           cursorType: 'pointer',
         }}
       >
-        <DevTools store={demoStore} {...props} />
+        <DevToolsWithColorScheme {...props} />
         <div className="App">
           <ThemeToggle />
           <React.Suspense