From 8a20bb52cf7c3a9f8de780b9409e501503f54148 Mon Sep 17 00:00:00 2001
From: ali asaria <aliasaria@users.noreply.github.com>
Date: Mon, 13 Jan 2025 11:54:53 -0500
Subject: [PATCH] remove transparency from the main app window -- can't get it
to work well across os darkmode
---
src/main/main.ts | 36 +++++++++++++++----
src/main/preload.ts | 3 ++
.../components/Nav/ColorSchemeToggle.tsx | 12 +++++--
src/renderer/components/Nav/Sidebar.tsx | 2 +-
src/renderer/styles.css | 8 +++++
5 files changed, 50 insertions(+), 11 deletions(-)
diff --git a/src/main/main.ts b/src/main/main.ts
index 122c8746..68e4172f 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 73eed269..71e7d617 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 d6fc21da..7d58dc34 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 8e8dd3a7..24014138 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 06598ff2..b16be2ac 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;
--
GitLab