@adecore/shell 0.26.2 → 0.27.0

package/dist/bridge/theme.d.ts

@@ -2,4 +2,8 @@ export interface ThemeState {
     resolved: 'light' | 'dark';
     followsSystem: boolean;
     background: string;
+    overlay?: {
+        color: string;
+        symbolColor: string;
+    };
 }

package/dist/theme.d.ts

@@ -2,10 +2,7 @@ import type { BrowserWindow, BrowserWindowConstructorOptions, NativeTheme } from
 import type { ThemeState } from './bridge/theme.ts';
 export interface TitleBarOverlay {
     height: number;
-    colors: Record<ThemeState['resolved'], {
-        color: string;
-        symbolColor: string;
-    }>;
+    colors: Record<ThemeState['resolved'], NonNullable<ThemeState['overlay']>>;
 }
 export interface ThemeOptions {
     nativeTheme: Pick<NativeTheme, 'themeSource'>;

package/dist/theme.js

@@ -7,12 +7,22 @@
 export const createTheme = (options) => {
     const platform = options.platform ?? process.platform;
     let current = null;
-    const overlayOf = (resolved) => options.overlay ? { height: options.overlay.height, ...options.overlay.colors[resolved] } : undefined;
+    /*
+     * The colors a page reports win over the ones per theme, so the controls stay on its ground after it
+     * changed and a window opened later starts on it too. Only the two colors are taken from what crossed IPC.
+     */
+    const overlayOf = (theme) => {
+        if (!options.overlay) {
+            return undefined;
+        }
+        const { color, symbolColor } = theme.overlay ?? options.overlay.colors[theme.resolved];
+        return { height: options.overlay.height, color, symbolColor };
+    };
     return {
         apply: (theme) => {
             current = theme;
             options.nativeTheme.themeSource = theme.followsSystem ? 'system' : theme.resolved;
-            const overlay = platform === 'darwin' ? undefined : overlayOf(theme.resolved);
+            const overlay = platform === 'darwin' ? undefined : overlayOf(theme);
             for (const window of options.windows()) {
                 if (window.isDestroyed()) {
                     continue;
@@ -26,8 +36,7 @@ export const createTheme = (options) => {
         current: () => current,
         /* The constructor options of a new window: its own chrome and the ground the others have. Dark until a page says otherwise. */
         windowOptions: () => {
-            const resolved = current?.resolved ?? 'dark';
-            const overlay = overlayOf(resolved);
+            const overlay = overlayOf(current ?? { resolved: 'dark' });
             const chrome = platform === 'darwin'
                 ? { titleBarStyle: 'hiddenInset', trafficLightPosition: options.trafficLights ?? { x: 17, y: 17 } }
                 : { titleBarStyle: 'hidden', ...(overlay ? { titleBarOverlay: overlay } : {}) };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/shell",
-  "version": "0.26.2",
+  "version": "0.27.0",
   "description": "The main process of an Electron app: its menu, its updater and the guards around its page.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",

package/src/bridge/theme.ts

@@ -5,4 +5,9 @@ export interface ThemeState {
     followsSystem: boolean;
     /* The page's ground, so the window paints it before the page does. */
     background: string;
+    /*
+     * The colors of the native window controls off macOS, for a page whose ground is not one fixed color per
+     * theme. Without it the shell takes the colors it was given for `resolved`.
+     */
+    overlay?: { color: string; symbolColor: string };
 }

package/src/theme.ts

@@ -4,7 +4,7 @@ import type { ThemeState } from './bridge/theme.ts';
 /* The native window controls a page leaves room for off macOS, with their colors per theme. */
 export interface TitleBarOverlay {
     height: number;
-    colors: Record<ThemeState['resolved'], { color: string; symbolColor: string }>;
+    colors: Record<ThemeState['resolved'], NonNullable<ThemeState['overlay']>>;
 }
 
 export interface ThemeOptions {
@@ -29,14 +29,23 @@ export const createTheme = (options: ThemeOptions) => {
     const platform = options.platform ?? process.platform;
     let current: ThemeState | null = null;
 
-    const overlayOf = (resolved: ThemeState['resolved']) =>
-        options.overlay ? { height: options.overlay.height, ...options.overlay.colors[resolved] } : undefined;
+    /*
+     * The colors a page reports win over the ones per theme, so the controls stay on its ground after it
+     * changed and a window opened later starts on it too. Only the two colors are taken from what crossed IPC.
+     */
+    const overlayOf = (theme: Pick<ThemeState, 'resolved' | 'overlay'>) => {
+        if (!options.overlay) {
+            return undefined;
+        }
+        const { color, symbolColor } = theme.overlay ?? options.overlay.colors[theme.resolved];
+        return { height: options.overlay.height, color, symbolColor };
+    };
 
     return {
         apply: (theme: ThemeState): void => {
             current = theme;
             options.nativeTheme.themeSource = theme.followsSystem ? 'system' : theme.resolved;
-            const overlay = platform === 'darwin' ? undefined : overlayOf(theme.resolved);
+            const overlay = platform === 'darwin' ? undefined : overlayOf(theme);
             for (const window of options.windows()) {
                 if (window.isDestroyed()) {
                     continue;
@@ -52,8 +61,7 @@ export const createTheme = (options: ThemeOptions) => {
 
         /* The constructor options of a new window: its own chrome and the ground the others have. Dark until a page says otherwise. */
         windowOptions: (): BrowserWindowConstructorOptions => {
-            const resolved = current?.resolved ?? 'dark';
-            const overlay = overlayOf(resolved);
+            const overlay = overlayOf(current ?? { resolved: 'dark' });
             const chrome: BrowserWindowConstructorOptions =
                 platform === 'darwin'
                     ? { titleBarStyle: 'hiddenInset', trafficLightPosition: options.trafficLights ?? { x: 17, y: 17 } }