From b20eaa19babc77dbf6b1c5f4b9f2313388835e03 Mon Sep 17 00:00:00 2001
From: Kartik Gupta <kartikgupta7267@gmail.com>
Date: Wed, 16 Aug 2023 04:10:24 +0530
Subject: [PATCH] Auto theme mode added

---
 src/App.jsx                   | 19 ++++++++++++++-----
 src/context/color-context.jsx |  1 +
 src/pages/Home.jsx            | 14 ++++++++++++--
 3 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index eb02699f..1dc2f7c7 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -10,21 +10,30 @@ import { ColorModeContext } from './context/color-context';
 
 function NewApp() {
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const [mode, setMode] = React.useState(
+  const [customMode, setCustomMode] = React.useState(
     localStorage.getItem('qdrant-web-ui-theme') || (prefersDarkMode ? 'dark' : 'light')
   );
-  localStorage.setItem('qdrant-web-ui-theme', mode);
-
+  const [mode, setMode] = React.useState(customMode === 'auto' ? (prefersDarkMode ? 'dark' : 'light') : customMode);
+  localStorage.setItem('qdrant-web-ui-theme', customMode);
   const colorMode = React.useMemo(
     () => ({
       // The dark mode switch would invoke this method
       toggleColorMode: () => {
-        setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
+        setCustomMode((prevMode) => (prevMode === 'light' ? 'dark' : prevMode === 'dark' ? 'auto' : 'light'));
       },
+      mode: customMode,
     }),
-    []
+    [customMode]
   );
 
+  React.useEffect(() => {
+    if (customMode === 'auto') {
+      setMode(prefersDarkMode ? 'dark' : 'light');
+    } else {
+      setMode(customMode);
+    }
+  }, [customMode, prefersDarkMode]);
+
   const theme = React.useMemo(
     () =>
       createTheme({
diff --git a/src/context/color-context.jsx b/src/context/color-context.jsx
index b47124e5..ce7f81d6 100644
--- a/src/context/color-context.jsx
+++ b/src/context/color-context.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
 export const ColorModeContext = React.createContext({
+  mode: 'auto',
   toggleColorMode: () => {},
 });
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 96edd60f..bdb69779 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -12,6 +12,7 @@ import KeyIcon from '@mui/icons-material/Key';
 import { useClient } from '../context/client-context';
 import { Logo } from '../components/Logo';
 import Sidebar from '../components/Sidebar';
+import AutoModeIcon from '@mui/icons-material/BrightnessAuto';
 
 const DrawerHeader = styled('div')(({ theme }) => ({
   display: 'flex',
@@ -27,7 +28,6 @@ export default function MiniDrawer() {
   const [open, setOpen] = React.useState(false);
   const [version, setVersion] = useState('???');
   const colorMode = React.useContext(ColorModeContext);
-
   const [apiKeyDialogOpen, setApiKeyDialogOpen] = useState(false);
   const { client: qdrantClient } = useClient();
 
@@ -84,7 +84,17 @@ export default function MiniDrawer() {
           <Box sx={{ flexGrow: 1 }}></Box>
           <Tooltip title="Color Mode">
             <IconButton size="large" onClick={colorMode.toggleColorMode}>
-              {theme.palette.mode === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}
+              <ColorModeContext.Consumer>
+                {(colorMode) => {
+                  if (colorMode.mode === 'light') {
+                    return <DarkModeIcon />;
+                  } else if (colorMode.mode === 'dark') {
+                    return <LightModeIcon />;
+                  } else {
+                    return <AutoModeIcon />;
+                  }
+                }}
+              </ColorModeContext.Consumer>
             </IconButton>
           </Tooltip>
           <Tooltip title="API Key">