如何在Electron中实现深色窗口标题栏？

单纯设置nativeTheme.themeSource = "dark"无法生效，是因为Electron标题栏的外观还受窗口配置和平台特性的影响，以下分场景给出具体解决方案：

1. 调整基础配置顺序 #

把主题设置放在窗口创建之前，确保窗口初始化时就应用深色主题：

app.on("ready", () => {
  // 先设置主题，再创建窗口
  nativeTheme.themeSource = "dark";
  createWindow();
});

2. 分平台针对性处理 #

macOS 平台 #

macOS标题栏与系统主题深度绑定，若基础配置无效，可尝试：

• 保持窗口默认frame: true（不使用自定义标题栏），自定义标题栏会覆盖系统样式
• 若需要半透明深色效果，在窗口配置中添加vibrancy属性：

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  vibrancy: "dark",
  titleBarStyle: "default"
});

Windows 平台 #

Windows标题栏需结合专属配置实现深色效果：

方案一：使用titleBarOverlay（Electron 15+支持）

强制设置深色标题栏背景与按钮颜色：

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  titleBarStyle: "hidden",
  titleBarOverlay: {
    color: "#2b2b2b", // 深色标题栏背景
    symbolColor: "#ffffff" // 控制按钮颜色
  }
});

方案二：跟随系统深色模式

确保Windows系统开启深色模式后，保持窗口默认框架并隐藏菜单栏，标题栏会自动适配：

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  frame: true,
  autoHideMenuBar: true
});

Linux 平台 #

Linux标题栏样式由窗口管理器控制，可尝试：

• 确保系统已开启深色主题
• 在窗口配置中添加darkTheme: true（部分窗口管理器支持）：

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  darkTheme: true
});

3. 跨平台通用：自定义标题栏 #

若上述方案都不满足，可完全自定义标题栏：

1. 隐藏系统标题栏：

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  frame: false,
  titleBarStyle: "hidden"
});

2. 在渲染进程中实现深色标题栏UI：

<div class="custom-titlebar">
  <div class="title">我的应用</div>
  <div class="controls">
    <button id="min-btn">-</button>
    <button id="max-btn">□</button>
    <button id="close-btn">×</button>
  </div>
</div>

.custom-titlebar {
  background-color: #2b2b2b;
  color: #fff;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  -webkit-app-region: drag; /* 允许拖动窗口 */
}
.custom-titlebar .controls button {
  -webkit-app-region: no-drag; /* 按钮禁止拖动 */
  background: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

3. 通过IPC实现窗口控制逻辑（主进程）：

ipcMain.on('window-minimize', () => {
  mainWindow.minimize();
});
ipcMain.on('window-maximize', () => {
  mainWindow.isMaximized() ? mainWindow.unmaximize() : mainWindow.maximize();
});
ipcMain.on('window-close', () => {
  mainWindow.close();
});

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