Fix flash of white background and scrollbar on startup

- Add backgroundColor to BrowserWindow based on theme setting to prevent
  white flash before page loads in dark mode
- Inject scrollbar-hiding CSS via webFrame in preload script to prevent
  white scrollbar flash during startup and Cmd+R refresh
- Remove old JavaScript workaround that excluded macOS

Author: bankjaneo

source/browser.ts

@@ -1,4 +1,5 @@
 import process from 'node:process';
+import {webFrame} from 'electron';
 import {ipcRenderer as ipc} from 'electron-better-ipc';
 import {is} from 'electron-util';
 import elementReady from 'element-ready';
@@ -10,6 +11,9 @@ import {IToggleSounds, IToggleMuteNotifications} from './types';
 
 type ThemeSource = typeof nativeTheme.themeSource;
 
+// Inject scrollbar-hiding CSS immediately in preload to prevent white flash
+webFrame.insertCSS('html::-webkit-scrollbar { display: none !important; }');
+
 async function withMenu(
 	menuButtonElement: HTMLElement,
 	callback: () => Promise<void> | void,
@@ -851,12 +855,6 @@ document.addEventListener('DOMContentLoaded', async () => {
 		await updateDoNotDisturb();
 	}
 
-	// Prevent flash of white on startup when in dark mode
-	// TODO: find a CSS-only solution
-	if (!is.macos && nativeTheme.shouldUseDarkColors) {
-		document.documentElement.style.backgroundColor = '#1e1e1e';
-	}
-
 	// Disable autoplay if set in settings
 	toggleVideoAutoplay();
 

source/index.ts

@@ -284,6 +284,11 @@ function createMainWindow(): BrowserWindow {
 		? 'https://work.facebook.com/chat'
 		: 'https://www.facebook.com/messages/';
 
+	// Determine background color based on theme to prevent flash of white
+	const theme = config.get('theme');
+	const shouldUseDarkColors = theme === 'dark' || (theme === 'system' && nativeTheme.shouldUseDarkColors);
+	const backgroundColor = shouldUseDarkColors ? '#1e1e1e' : undefined;
+
 	const win = new BrowserWindow({
 		title: app.name,
 		show: false,
@@ -301,6 +306,7 @@ function createMainWindow(): BrowserWindow {
 			y: 16,
 		},
 		autoHideMenuBar: config.get('autoHideMenuBar'),
+		backgroundColor,
 		webPreferences: {
 			preload: path.join(__dirname, 'browser.js'),
 			contextIsolation: true,