diff --git a/apps/desktop/src/main.ts b/apps/desktop/src/main.ts index 062c79fa69..6f639b7b8c 100644 --- a/apps/desktop/src/main.ts +++ b/apps/desktop/src/main.ts @@ -27,6 +27,7 @@ import { autoUpdater } from "electron-updater"; import type { ContextMenuItem } from "@t3tools/contracts"; import { NetService } from "@t3tools/shared/Net"; import { RotatingFileSink } from "@t3tools/shared/logging"; +import { THEME_BG_DARK, THEME_BG_LIGHT } from "@t3tools/shared/theme"; import { showDesktopConfirmDialog } from "./confirmDialog"; import { syncShellEnvironment } from "./syncShellEnvironment"; import { getAutoUpdateDisabledReason, shouldBroadcastDownloadProgress } from "./updateState"; @@ -1104,6 +1105,13 @@ function registerIpcHandlers(): void { } nativeTheme.themeSource = theme; + + // Keep the native window background in sync so resize does not flash + // a stale color while the renderer catches up. + const bg = themeBackgroundColor(); + for (const win of BrowserWindow.getAllWindows()) { + win.setBackgroundColor(bg); + } }); ipcMain.removeHandler(CONTEXT_MENU_CHANNEL); @@ -1220,6 +1228,10 @@ function getIconOption(): { icon: string } | Record { return iconPath ? { icon: iconPath } : {}; } +function themeBackgroundColor(): string { + return nativeTheme.shouldUseDarkColors ? THEME_BG_DARK : THEME_BG_LIGHT; +} + function createWindow(): BrowserWindow { const window = new BrowserWindow({ width: 1100, @@ -1228,6 +1240,7 @@ function createWindow(): BrowserWindow { minHeight: 620, show: false, autoHideMenuBar: true, + backgroundColor: themeBackgroundColor(), ...getIconOption(), title: APP_DISPLAY_NAME, titleBarStyle: "hiddenInset", diff --git a/apps/web/index.html b/apps/web/index.html index 0322f2d019..dd32fae37d 100644 --- a/apps/web/index.html +++ b/apps/web/index.html @@ -12,6 +12,20 @@ rel="stylesheet" /> T3 Code (Alpha) +
diff --git a/packages/shared/package.json b/packages/shared/package.json index 02ae794d64..15107252ab 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -31,6 +31,10 @@ "./schemaJson": { "types": "./src/schemaJson.ts", "import": "./src/schemaJson.ts" + }, + "./theme": { + "types": "./src/theme.ts", + "import": "./src/theme.ts" } }, "scripts": { diff --git a/packages/shared/src/theme.ts b/packages/shared/src/theme.ts new file mode 100644 index 0000000000..151b00ff33 --- /dev/null +++ b/packages/shared/src/theme.ts @@ -0,0 +1,11 @@ +/** + * Native-window background colors that match the app's CSS theme tokens. + * + * Dark → `color-mix(in srgb, neutral-950 95%, white)` ≈ #161616 + * Light → white + * + * Used by the Electron main process to set `BrowserWindow.backgroundColor` + * so resizing never flashes a mismatched color. + */ +export const THEME_BG_DARK = "#161616"; +export const THEME_BG_LIGHT = "#ffffff";