Fix: reduced theme blinking on desktop app start (windows).

desktop/src/ui/index.ejs

@@ -24,7 +24,12 @@
             box-sizing: border-box;
         }
 
+        body {
+            background-color: var(--bg-body, #ffffff);
+        }
+
         :root {
+            --bg-body: #ffffff;
             --bg-secondary: #f3f3f3;
             --bg-tertiary: #ffffff;
             --bg-hover: #e8e8e8;
@@ -39,6 +44,7 @@
         }
 
         [data-theme="theme-dark"] {
+            --bg-body: #1a1928;
             --bg-secondary: #323233;
             --bg-tertiary: #252526;
             --bg-hover: #2a2d2e;
@@ -236,4 +242,13 @@
 
 </body>
 
-</html>
+</html>
+
+<% if (typeof isWindows !== 'undefined' && isWindows) { %>
+<script>
+    const lastUsedTheme = localStorage.getItem('last-used-theme')
+    if (lastUsedTheme != null) {
+      document.body.setAttribute('data-theme', lastUsedTheme)
+    }
+</script>
+<% } %>

desktop/src/ui/index.ts

@@ -25,6 +25,7 @@ import {
   closePopup,
   createApp,
   getCurrentResolvedLocation,
+  Menu,
   navigate,
   parseLocation,
   pushRootBarProgressComponent,
@@ -82,11 +83,13 @@ window.addEventListener('DOMContentLoaded', () => {
           }
         })
 
-        void ipcMain.isOsUsingDarkTheme().then((isDarkTheme) => {
-          menuBar.setTheme(isDarkTheme ? ThemeVariant.Dark : ThemeVariant.Light)
-        }).catch(() => {
-          menuBar.setTheme(ThemeVariant.Light) // fallback
-        })
+        if (menuBar.lastUsedThemeIsUnknown()) {
+          void ipcMain.isOsUsingDarkTheme().then((isDarkTheme) => {
+            menuBar.setTheme(isDarkTheme ? ThemeVariant.Dark : ThemeVariant.Light)
+          }).catch(() => {
+            menuBar.setTheme(ThemeVariant.Light) // fallback
+          })
+        }
       })
     }
   }

desktop/src/ui/titleBarMenu.ts

@@ -16,7 +16,7 @@
 import { IPCMainExposed, MenuBarAction } from './types'
 import { isMenuBarAction } from './typesUtils'
 import { TitleBarMenuState } from './titleBarMenuState'
-import { ThemeVariant, type ThemeVariantType } from '@hcengineering/theme'
+import { type ThemeVariantType } from '@hcengineering/theme'
 
 const ToggleMinimizeToTrayAction: MenuBarAction = 'toggle-minimize-to-tray'
 const ToggleAutoLaunchAction: MenuBarAction = 'toggle-auto-launch'
@@ -28,7 +28,7 @@ const LabelAutoLaunchEnabled = '☑ Launch at Login'
 const LabelAutoLaunchDisabled = '☐ Launch at Login'
 
 export async function setupTitleBarMenu (ipcMain: IPCMainExposed, root: HTMLElement): Promise<MenuBar> {
-  const themeManager = new ThemeManager(ThemeVariant.Light)
+  const themeManager = new ThemeManager()
   const minimizeToTrayEnabled = await ipcMain.isMinimizeToTrayEnabled()
   const isAutoLaunchEnabled = await ipcMain.isAutoLaunchEnabled()
   const menuManager = new MenuBarManager(root, minimizeToTrayEnabled, isAutoLaunchEnabled)
@@ -75,12 +75,19 @@ export async function setupTitleBarMenu (ipcMain: IPCMainExposed, root: HTMLElem
 }
 
 export class MenuBar {
+  private static readonly lastUsedThemeKey = 'last-used-theme'
+
   constructor (private readonly theme: ThemeManager) {
   }
 
   public setTheme (theme: ThemeVariantType): void {
+    localStorage.setItem(MenuBar.lastUsedThemeKey, theme)
     this.theme.setTheme(theme)
   }
+
+  public lastUsedThemeIsUnknown (): boolean {
+    return localStorage.getItem(MenuBar.lastUsedThemeKey) == null
+  }
 }
 
 export function buildHulyApplicationMenu (minimizeToTrayEnabled: boolean, autoLaunchEnabled: boolean): HTMLElement {
@@ -130,14 +137,14 @@ export function buildHulyApplicationMenu (minimizeToTrayEnabled: boolean, autoLa
 }
 
 class ThemeManager {
-  private readonly domThemeKey = 'data-theme'
+  private static readonly domThemeKey = 'data-theme'
 
-  constructor (theme: ThemeVariantType) {
-    this.setTheme(theme)
+  public setTheme (theme: ThemeVariantType): void {
+    ThemeManager.setTheme(theme)
   }
 
-  public setTheme (theme: ThemeVariantType): void {
-    document.body.setAttribute(this.domThemeKey, theme)
+  public static setTheme (theme: ThemeVariantType): void {
+    document.body.setAttribute(ThemeManager.domThemeKey, theme)
   }
 }