From ec11fe329769ca580ac233029917cda2541bfd7f Mon Sep 17 00:00:00 2001
From: Arjun <14841132+arjunvegda@users.noreply.github.com>
Date: Thu, 11 Apr 2024 20:47:36 -0400
Subject: [PATCH] fix: force theme from props

---
 src/DevTools/DevTools.tsx             | 12 ++++++++++--
 src/stories/Default/Demos/DemoApp.tsx | 16 ++++++++++++++--
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/DevTools/DevTools.tsx b/src/DevTools/DevTools.tsx
index d2d7c28e..01d330aa 100644
--- 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
index 6a60db46..3e778b8d 100644
--- 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