Electron中如何为禁用的窗口按钮设置不同颜色？

问题描述 #

通过以下配置实现了移除Windows默认标题栏、保留控制按钮的需求：

win = new BrowserWindow({
    width: 800,
    height: 600,
    icon: path.join(__dirname, "./src/assets/images/favicon.ico"),
    maximizable: false,
    titleBarStyle: "hidden",
    titleBarOverlay: {
      color: "#FFF",
      symbolColor: "#999",
      height: 30
    }
  })

但titleBarOverlay的symbolColor覆盖了禁用按钮的默认浅色状态，导致设置maximizable: false后，最大化按钮无法通过颜色区分禁用状态，希望在不替换默认图标的前提下解决该问题。

解决方法 #

Electron的titleBarOverlay提供了内置CSS变量用于自定义禁用按钮的颜色，无需替换图标，可通过以下两种方式实现：

方式一：在渲染进程全局CSS中设置 #

在应用的全局样式文件中添加以下CSS代码，自定义禁用按钮的颜色：

/* 全局设置禁用按钮颜色 */
:root {
  --electron-title-bar-button-disabled-color: #ccc; /* 替换为你需要的禁用状态颜色 */
}

/* 可选：区分明暗主题设置不同颜色 */
@media (prefers-color-scheme: dark) {
  :root {
    --electron-title-bar-button-disabled-color: #666;
  }
}

方式二：主进程注入CSS样式 #

如果不想修改渲染进程的CSS文件，可在主进程创建窗口后，通过webContents.insertCSS直接注入样式：

win = new BrowserWindow({
    // 原窗口配置不变
    width: 800,
    height: 600,
    icon: path.join(__dirname, "./src/assets/images/favicon.ico"),
    maximizable: false,
    titleBarStyle: "hidden",
    titleBarOverlay: {
      color: "#FFF",
      symbolColor: "#999",
      height: 30
    }
  })

// 注入禁用按钮颜色样式
win.webContents.insertCSS(`
  :root {
    --electron-title-bar-button-disabled-color: #ccc;
  }
`)

以上两种方式都能让禁用状态的按钮显示自定义颜色，恢复与正常按钮的视觉区分，且无需替换默认图标。

内容的提问来源于stack exchange，提问作者Ranjith M