From e15c38fa2341f84b6b36aec100b1dc8e9cd82003 Mon Sep 17 00:00:00 2001
From: Frank Noirot <frank@zoo.dev>
Date: Thu, 5 Sep 2024 14:33:41 -0400
Subject: [PATCH] Fix flash of white background in electron dark mode (#3794)

---
 src/index.css | 13 +++++++++++++
 src/main.ts   | 10 +++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/index.css b/src/index.css
index 8a0a993cff..83d9aa53e1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -50,6 +50,19 @@ body.dark {
   @apply text-chalkboard-10;
 }
 
+@media (prefers-color-scheme: dark) {
+  body,
+  .body-bg,
+  .dark .body-bg {
+    @apply bg-chalkboard-100;
+  }
+
+  body {
+    scrollbar-color: var(--color-chalkboard-70) var(--color-chalkboard-90);
+    @apply text-chalkboard-10;
+  }
+}
+
 select {
   @apply bg-chalkboard-20;
 }
diff --git a/src/main.ts b/src/main.ts
index 599541a6c0..8c68a5da4c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,7 +2,14 @@
 // template that ElectronJS provides.
 
 import dotenv from 'dotenv'
-import { app, BrowserWindow, ipcMain, dialog, shell } from 'electron'
+import {
+  app,
+  BrowserWindow,
+  ipcMain,
+  dialog,
+  shell,
+  nativeTheme,
+} from 'electron'
 import path from 'path'
 import { Issuer } from 'openid-client'
 import { Bonjour, Service } from 'bonjour-service'
@@ -75,6 +82,7 @@ const createWindow = (filePath?: string): BrowserWindow => {
     icon: path.resolve(process.cwd(), 'assets', 'icon.png'),
     frame: os.platform() !== 'darwin',
     titleBarStyle: 'hiddenInset',
+    backgroundColor: nativeTheme.shouldUseDarkColors ? '#1C1C1C' : '#FCFCFC',
   })
 
   // and load the index.html of the app.