Electron中如何在mainWindow.loadURL加载前编程更新index.html

核心目标是在页面初始渲染前就把data-color-scheme属性设置为和nativeTheme匹配的值，从根源避免默认黑色文本触发的不必要颜色过渡，不需要修改本地存储的源index.html文件，直接在主进程完成内容处理再加载即可。

• 依赖说明：仅使用Node.js和Electron内置模块，无需安装第三方依赖，需要用到fs（文件读取）、path（路径拼接）、nativeTheme（系统主题读取）三个内置能力。
• 实现逻辑：
  1. 读取本地index.html的原始文本内容
  2. 根据当前nativeTheme.shouldUseDarkColors的返回值，判断应该设置为dark还是light主题，将HTML中默认的data-color-scheme="auto"字符串替换为对应值
  3. 将处理完成的HTML内容转义后拼接为Data URL，传入mainWindow.loadURL完成加载，此时页面初始渲染拿到的就是匹配当前系统主题的属性值，不会触发额外过渡

完整代码示例 #

主进程核心代码如下：

const { app, BrowserWindow, nativeTheme } = require('electron')
const fs = require('node:fs')
const path = require('node:path')

function createMainWindow() {
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    // 其他窗口配置项
  })

  // 读取本地index.html源文件
  const indexHtmlPath = path.join(app.getAppPath(), 'index.html')
  let htmlContent = fs.readFileSync(indexHtmlPath, 'utf-8')

  // 预替换color-scheme属性为当前系统匹配值
  const currentScheme = nativeTheme.shouldUseDarkColors ? 'dark' : 'light'
  htmlContent = htmlContent.replace(
    'data-color-scheme="auto"',
    `data-color-scheme="${currentScheme}"`
  )

  // 加载处理完成的HTML内容
  mainWindow.loadURL(
    `data:text/html;charset=utf-8,${encodeURIComponent(htmlContent)}`
  )
}

app.whenReady().then(createMainWindow)

补充说明：如果需要支持运行时系统主题动态切换，可在页面dom-ready事件触发后，再监听nativeTheme的updated事件动态更新document.documentElement的data-color-scheme属性即可。初始加载阶段提前注入正确属性值，就能完全规避首次渲染时的颜色闪烁、无意义过渡问题。

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