From adf6077d13e14c39968282a73d0486c38797eba8 Mon Sep 17 00:00:00 2001 From: Aarav Sareen <96787824+arvsrn@users.noreply.github.com> Date: Fri, 3 Jul 2026 10:21:27 +0530 Subject: [PATCH] change traffic light position, fix sequoia bug --- packages/app/src/app.tsx | 6 +++--- packages/desktop/src/main/windows.ts | 14 ++++++++++++-- packages/desktop/src/preload/types.ts | 1 + packages/ui/src/theme/context.tsx | 17 ++++++++++------- 4 files changed, 26 insertions(+), 12 deletions(-) diff --git a/packages/app/src/app.tsx b/packages/app/src/app.tsx index c7cdc73f9b3d..0c9dd6aaf1c8 100644 --- a/packages/app/src/app.tsx +++ b/packages/app/src/app.tsx @@ -186,7 +186,7 @@ declare global { deepLinks?: string[] } api?: { - setTitlebar?: (theme: { mode: "light" | "dark" }) => Promise + setTitlebar?: (theme: { mode: "light" | "dark"; scheme?: "system" | "light" | "dark" }) => Promise exportDebugLogs?: () => Promise } } @@ -318,8 +318,8 @@ export function AppBaseProviders(props: ParentProps<{ locale?: Locale }>) { { - void window.api?.setTitlebar?.({ mode }) + onThemeApplied={(_, mode, scheme) => { + void window.api?.setTitlebar?.({ mode, scheme }) }} > diff --git a/packages/desktop/src/main/windows.ts b/packages/desktop/src/main/windows.ts index a2c7ca617b7b..ba0177142de2 100644 --- a/packages/desktop/src/main/windows.ts +++ b/packages/desktop/src/main/windows.ts @@ -71,7 +71,10 @@ export function setAppQuitting(quitting = true) { export function setBackgroundColor(color: string) { backgroundColor = color - BrowserWindow.getAllWindows().forEach((win) => win.setBackgroundColor(color)) + BrowserWindow.getAllWindows().forEach((win) => { + win.setBackgroundColor(color) + if (process.platform === "darwin") win.invalidateShadow() + }) } export function getBackgroundColor(): string | undefined { @@ -106,6 +109,13 @@ function overlay(theme: Partial = {}, zoom = 1) { export function setTitlebar(win: BrowserWindow, theme: Partial = {}) { titlebarThemes.set(win, theme) + // macOS draws the window frame hairline and shadow using the NSWindow + // appearance, which follows nativeTheme rather than the rendered content. + // Align it with the app theme so a light app on a dark system does not get + // the dark-appearance border and shadow. A "system" scheme must map to + // "system" (not the resolved mode) or prefers-color-scheme stops tracking + // OS appearance changes in the renderer. + if (process.platform === "darwin") nativeTheme.themeSource = theme.scheme ?? theme.mode ?? "system" updateTitlebar(win) } @@ -172,7 +182,7 @@ export function createMainWindow(id: string = randomUUID()) { ...(process.platform === "darwin" ? { titleBarStyle: "hidden" as const, - trafficLightPosition: { x: 12, y: 14 }, + trafficLightPosition: { x: 14, y: 14 }, } : {}), ...(process.platform === "win32" diff --git a/packages/desktop/src/preload/types.ts b/packages/desktop/src/preload/types.ts index 5401c2070d7a..e3427ff70367 100644 --- a/packages/desktop/src/preload/types.ts +++ b/packages/desktop/src/preload/types.ts @@ -31,6 +31,7 @@ export type UpdaterAPI = { export type LinuxDisplayBackend = "wayland" | "auto" export type TitlebarTheme = { mode: "light" | "dark" + scheme?: "system" | "light" | "dark" } export type FatalRendererError = { error: string diff --git a/packages/ui/src/theme/context.tsx b/packages/ui/src/theme/context.tsx index 1051345fbe20..f225ee33ac08 100644 --- a/packages/ui/src/theme/context.tsx +++ b/packages/ui/src/theme/context.tsx @@ -173,7 +173,10 @@ function cacheThemeVariants(theme: DesktopTheme, themeId: string) { export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({ name: "Theme", - init: (props: { defaultTheme?: string; onThemeApplied?: (theme: DesktopTheme, mode: "light" | "dark") => void }) => { + init: (props: { + defaultTheme?: string + onThemeApplied?: (theme: DesktopTheme, mode: "light" | "dark", scheme: ColorScheme) => void + }) => { const themeId = normalize(read(STORAGE_KEYS.THEME_ID) ?? props.defaultTheme) ?? "oc-2" const colorScheme = (read(STORAGE_KEYS.COLOR_SCHEME) as ColorScheme | null) ?? "system" const mode = colorScheme === "system" ? getSystemMode() : colorScheme @@ -212,9 +215,9 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({ return task } - const applyTheme = (theme: DesktopTheme, themeId: string, mode: "light" | "dark") => { + const applyTheme = (theme: DesktopTheme, themeId: string, mode: "light" | "dark", scheme: ColorScheme) => { applyThemeCss(theme, themeId, mode) - props.onThemeApplied?.(theme, mode) + props.onThemeApplied?.(theme, mode, scheme) } const ids = () => { @@ -278,7 +281,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({ createEffect(() => { const theme = store.themes[store.themeId] if (!theme) return - applyTheme(theme, store.themeId, store.mode) + applyTheme(theme, store.themeId, store.mode, store.colorScheme) }) const setTheme = (id: string) => { @@ -333,7 +336,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({ ? getSystemMode() : store.previewScheme : store.mode - applyTheme(theme, next, mode) + applyTheme(theme, next, mode, store.previewScheme ?? store.colorScheme) }) }, previewColorScheme: (scheme: ColorScheme) => { @@ -344,7 +347,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({ if (!theme) return if ((store.previewThemeId ?? store.themeId) !== id) return if (store.previewScheme !== scheme) return - applyTheme(theme, id, mode) + applyTheme(theme, id, mode, scheme) }) }, commitPreview: () => { @@ -362,7 +365,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({ setStore("previewScheme", null) void load(store.themeId).then((theme) => { if (!theme) return - applyTheme(theme, store.themeId, store.mode) + applyTheme(theme, store.themeId, store.mode, store.colorScheme) }) }, }