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() {
- {theme.palette.mode === 'dark' ? : }
+
+ {(colorMode) => {
+ if (colorMode.mode === 'light') {
+ return ;
+ } else if (colorMode.mode === 'dark') {
+ return ;
+ } else {
+ return ;
+ }
+ }}
+