Fix flash of white background in electron dark mode (#3794)

KittyCAD · Sep 5, 2024 · e15c38f · e15c38f
1 parent 906ca65
commit e15c38f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git 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
@@ -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.