electron#nativeTheme TypeScript Examples

createTray = () => {
    let iconPath = path.join(FileSystem.resources, "macos", "icons", "tray-icon-dark.png");
    if (!nativeTheme.shouldUseDarkColors)
        iconPath = path.join(FileSystem.resources, "macos", "icons", "tray-icon-light.png");

    // If the tray is already created, just change the icon color
    if (tray) {
        tray.setImage(iconPath);
        return;
    }

    try {
        tray = new Tray(iconPath);
        tray.setToolTip("BlueBubbles");
        tray.setContextMenu(buildTray());

        // Rebuild the tray each time it's clicked
        tray.on("click", () => {
            tray.setContextMenu(buildTray());
        });
    } catch (ex: any) {
        Server().log('Failed to load macOS tray entry!', 'error');
        Server().log(ex?.message ?? String(ex), 'debug');
    }
}

async listenForUpdate(): Promise<ServiceResult> {
    return new Promise((resolve, reject) => {
      nativeTheme.off('updated', this.updateTheme);
      nativeTheme.on('updated', this.updateTheme);
      resolve({
        code: 200,
        result: null
      });
    });
  }

async unlistenForUpdate(): Promise<ServiceResult> {
    return new Promise((resolve, reject) => {
      nativeTheme.off('updated', this.updateTheme);
      resolve({
        code: 200,
        result: null
      });
    });
  }

async getSystemThemeInfo(): Promise<ServiceResult> {
    return new Promise((resolve, reject) => {
      resolve({
        code: 200,
        result: {
          shouldUseDarkColors: nativeTheme.shouldUseDarkColors,
          shouldUseHighContrastColors: nativeTheme.shouldUseHighContrastColors,
          shouldUseInvertedColorScheme: nativeTheme.shouldUseInvertedColorScheme
        }
      });
    });
  }

// 设置顶部APP图标的操作和图标
export function setUpTray() {
  const lightIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_light.png')
  const darkIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_dark.png')

  tray = new Tray(nativeTheme.shouldUseDarkColors ? darkIcon : lightIcon)

  const contextMenu = Menu.buildFromTemplate([
    {
      label: '打开Playground',
      click: () => {
        restoreMainWindow()
      },
    },
    {
      label: '退出',
      click: () => {
        app.quit()
      },
    },
  ])
  tray.setToolTip('Electron-Playground')
  tray.setContextMenu(contextMenu)

  nativeTheme.on('updated', () => {
    tray.setImage(nativeTheme.shouldUseDarkColors ? darkIcon : lightIcon)
  })

  // windows下双击托盘图标打开app
  tray.on('double-click', () => {
    restoreMainWindow()
  })
}

/**
   * Do some side effect when config change, update other services or filesystem
   * @param preference new preference settings
   */
  private async reactWhenPreferencesChanged<K extends keyof IPreferences>(key: K, value: IPreferences[K]): Promise<void> {
    // maybe pauseNotificationsBySchedule or pauseNotifications or ...
    if (key.startsWith('pauseNotifications')) {
      await this.notificationService.updatePauseNotificationsInfo();
    }
    if (key === 'themeSource') {
      nativeTheme.themeSource = value as IPreferences['themeSource'];
    }
    if (key === 'language') {
      await requestChangeLanguage(value as string);
    }
  }

export function setThemeListener(manager: WindowManager) {
    nativeTheme.removeAllListeners()
    nativeTheme.on("updated", () => {
        if (manager.hasWindow()) {
            let contents = manager.mainWindow.webContents
            if (!contents.isDestroyed()) {
                contents.send("theme-updated", nativeTheme.shouldUseDarkColors)
            }
        }
    })
}

ipcMain.handle("import-all-settings", (_, configs: SchemaTypes) => {
    restarting = true
    store.clear()
    for (let [key, value] of Object.entries(configs)) {
        // @ts-ignore
        store.set(key, value)
    }
    performUpdate(store)
    nativeTheme.themeSource = store.get("theme", ThemeSettings.Default)
    setTimeout(
        () => {
            winManager.mainWindow.close()
        },
        process.platform === "darwin" ? 1000 : 0
    ) // Why ???
})

createWindow = () => {
        if (!this.hasWindow()) {
            this.mainWindow = new BrowserWindow({
                title: "Fluent Reader",
                backgroundColor:
                    process.platform === "darwin"
                        ? "#00000000"
                        : nativeTheme.shouldUseDarkColors
                        ? "#282828"
                        : "#faf9f8",
                vibrancy: "sidebar",
                x: this.mainWindowState.x,
                y: this.mainWindowState.y,
                width: this.mainWindowState.width,
                height: this.mainWindowState.height,
                minWidth: 992,
                minHeight: 600,
                frame: process.platform === "darwin",
                titleBarStyle: "hiddenInset",
                fullscreenable: process.platform === "darwin",
                show: false,
                webPreferences: {
                    webviewTag: true,
                    contextIsolation: true,
                    spellcheck: false,
                    preload: path.join(
                        app.getAppPath(),
                        (app.isPackaged ? "dist/" : "") + "preload.js"
                    ),
                    nativeWindowOpen: false,
                },
            })
            this.mainWindowState.manage(this.mainWindow)
            this.mainWindow.on("ready-to-show", () => {
                this.mainWindow.show()
                this.mainWindow.focus()
                if (!app.isPackaged) this.mainWindow.webContents.openDevTools()
            })
            this.mainWindow.loadFile(
                (app.isPackaged ? "dist/" : "") + "index.html"
            )

            this.mainWindow.on("maximize", () => {
                this.mainWindow.webContents.send("maximized")
            })
            this.mainWindow.on("unmaximize", () => {
                this.mainWindow.webContents.send("unmaximized")
            })
            this.mainWindow.on("enter-full-screen", () => {
                this.mainWindow.webContents.send("enter-fullscreen")
            })
            this.mainWindow.on("leave-full-screen", () => {
                this.mainWindow.webContents.send("leave-fullscreen")
            })
            this.mainWindow.on("focus", () => {
                this.mainWindow.webContents.send("window-focus")
            })
            this.mainWindow.on("blur", () => {
                this.mainWindow.webContents.send("window-blur")
            })
            this.mainWindow.webContents.on("context-menu", (_, params) => {
                if (params.selectionText) {
                    this.mainWindow.webContents.send(
                        "window-context-menu",
                        [params.x, params.y],
                        params.selectionText
                    )
                }
            })
        }
    }

ipcMain.on("get-theme-dark-color", event => {
    event.returnValue = nativeTheme.shouldUseDarkColors
})

ipcMain.handle("set-theme", (_, theme: ThemeSettings) => {
    store.set(THEME_STORE_KEY, theme)
    nativeTheme.themeSource = theme
})

function init() {
    performUpdate(store)
    nativeTheme.themeSource = store.get("theme", ThemeSettings.Default)
}

private shouldUseDarkColorsSync(): boolean {
    return nativeTheme.shouldUseDarkColors;
  }

private async init(): Promise<void> {
    const themeSource = await this.preferenceService.get('themeSource');
    // apply theme
    nativeTheme.themeSource = themeSource;
    nativeTheme.addListener('updated', () => {
      this.updateThemeSubject({ shouldUseDarkColors: this.shouldUseDarkColorsSync() });
    });
  }

nativeTheme.themeSource = 'light';

private getTheme() {
        nativeTheme.on("updated", () => {
            this.setTheme(nativeTheme.shouldUseDarkColors);
        });
    }

app.on("ready", () => {
    createTray();
    createWindow();

    nativeTheme.on("updated", () => {
        createTray();
    });
});