diff --git a/desktop/src/ui/index.ejs b/desktop/src/ui/index.ejs index ae893ba49aa..5560107cc90 100644 --- a/desktop/src/ui/index.ejs +++ b/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 @@ - \ No newline at end of file + + +<% if (typeof isWindows !== 'undefined' && isWindows) { %> + +<% } %> \ No newline at end of file diff --git a/desktop/src/ui/index.ts b/desktop/src/ui/index.ts index 6aa383ed5c8..93306f10149 100644 --- a/desktop/src/ui/index.ts +++ b/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 + }) + } }) } } diff --git a/desktop/src/ui/titleBarMenu.ts b/desktop/src/ui/titleBarMenu.ts index 43847b2d67c..32179830a3e 100644 --- a/desktop/src/ui/titleBarMenu.ts +++ b/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 { - 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) } }