diff --git a/src/main/main.ts b/src/main/main.ts
index 122c8746cfd2f685a8e6d64fe948d4a2dca5e2fe..68e4172fb4f968cae9d38f26203beb16c0f64ba6 100644
--- a/src/main/main.ts
+++ b/src/main/main.ts
@@ -200,18 +200,40 @@ const startListeningToServerLog = async () => {
   });
 };
 
-ipcMain.handle('dark-mode:toggle', () => {
-  if (nativeTheme.shouldUseDarkColors) {
-    nativeTheme.themeSource = 'light';
-  } else {
-    nativeTheme.themeSource = 'dark';
-  }
-  return nativeTheme.shouldUseDarkColors;
+/***********************
+ * DARK MODE stuff
+ ***********************/
+// Listn to nativeTheme update change from the OS:
+nativeTheme.on('updated', () => {
+  console.log('nativeTheme updated', nativeTheme.shouldUseDarkColors);
+  mainWindow?.webContents.send(
+    'dark-mode:updated',
+    nativeTheme.shouldUseDarkColors
+  );
 });
 
+// ipcMain.handle('dark-mode:toggle', () => {
+//   console.log('dark-mode:toggle');
+//   console.log(nativeTheme);
+//   if (nativeTheme.shouldUseDarkColors) {
+//     nativeTheme.themeSource = 'light';
+//   } else {
+//     nativeTheme.themeSource = 'dark';
+//   }
+//   return nativeTheme.shouldUseDarkColors;
+// });
+
+// ipcMain.handle('dark-mode:set', (_event, shouldUseDarkColors) => {
+//   console.log('dark-mode:set', shouldUseDarkColors);
+//   nativeTheme.themeSource = shouldUseDarkColors ? 'dark' : 'light';
+// });
+
 ipcMain.handle('dark-mode:system', () => {
   nativeTheme.themeSource = 'system';
 });
+/***********************
+ * DARK MODE stuff END
+ ***********************/
 
 startListeningToServerLog();
 
diff --git a/src/main/preload.ts b/src/main/preload.ts
index 73eed2693ddd25bad4baa2092c5ca6249da834cf..71e7d6179dbac5242aca9f2ce8220e471db8d41f 100644
--- a/src/main/preload.ts
+++ b/src/main/preload.ts
@@ -103,4 +103,7 @@ contextBridge.exposeInMainWorld('autoUpdater', {
 contextBridge.exposeInMainWorld('darkMode', {
   toggle: () => ipcRenderer.invoke('dark-mode:toggle'),
   system: () => ipcRenderer.invoke('dark-mode:system'),
+  setMode: (value) => ipcRenderer.invoke('dark-mode:set', value),
+  onUpdate: (callback) =>
+    ipcRenderer.on('dark-mode:updated', (_event, value) => callback(value)),
 });
diff --git a/src/renderer/components/Nav/ColorSchemeToggle.tsx b/src/renderer/components/Nav/ColorSchemeToggle.tsx
index d6fc21dacb320ccb094fbd2fcbf37c0833442f82..7d58dc34ee60e9cc6680b35d8c8b5d2129ff1d63 100644
--- a/src/renderer/components/Nav/ColorSchemeToggle.tsx
+++ b/src/renderer/components/Nav/ColorSchemeToggle.tsx
@@ -1,17 +1,23 @@
 import { useColorScheme } from '@mui/joy/styles';
 import IconButton from '@mui/joy/IconButton';
 import { MoonIcon, SunIcon } from 'lucide-react';
+import { windowsStore } from 'process';
 
 export default function ColorSchemeToggle() {
   const { mode, setMode } = useColorScheme();
 
+  window.darkMode.onUpdate((isDarkMode) => {
+    console.log('Dark mode is now', isDarkMode ? 'on' : 'off');
+    // setMode(isDarkMode ? 'dark' : 'light');
+  });
+
   return (
     <IconButton
       variant="plain"
       onClick={async () => {
-        const isDarkMode = await window.darkMode.toggle();
-        console.log('Dark mode is now', isDarkMode ? 'on' : 'off');
-        setMode(isDarkMode ? 'dark' : 'light');
+        // const isDarkMode = await window.darkMode.toggle();
+        // console.log('Dark mode is now', isDarkMode ? 'on' : 'off');
+        setMode(mode == 'light' ? 'dark' : 'light');
       }}
     >
       {mode === 'light' ? <SunIcon /> : <MoonIcon />}
diff --git a/src/renderer/components/Nav/Sidebar.tsx b/src/renderer/components/Nav/Sidebar.tsx
index 8e8dd3a78c6b11a0f9cf45d9557c86094cb35c81..2401413840b3a3bb20ba02506ac6bd21fae92ce0 100644
--- a/src/renderer/components/Nav/Sidebar.tsx
+++ b/src/renderer/components/Nav/Sidebar.tsx
@@ -86,7 +86,7 @@ export default function Sidebar({
         gap: 1,
         userSelect: 'none',
         width: '100%',
-        backgroundColor: 'rgb(214,207,225,0.4)',
+        // opacity: 0.4,
         '& .lucide': {
           strokeWidth: '1.5px',
         },
diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index 06598ff2f06bbfd6f37584f735ab0b3307905900..b16be2ace67697739f7f6a88c01fcd9ced37878c 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -126,6 +126,14 @@ spinning gradient border effect */
   border: none !important;
 }
 
+.MuiSheet-root.Sidebar {
+  background-color: rgb(214, 207, 225, 1.0),
+}
+
+html[data-joy-color-scheme='dark'] .MuiSheet-root.Sidebar {
+  background-color: rgb(54, 50, 59),
+}
+
 /* Color for sidebar disabled text */
 .FirstSidebar_Content .Mui-disabled {
   color: rgb(77, 64, 75) !important;