Electron BrowserWindow переходит в темный режим при открытии DevTools

Путаница в темном режиме и DevTools

Я создаю базовое электронное приложение из учебника.

У меня запускается BrowserWindow с некоторыми базовыми стилями HTML и CSS - просто слово "Awesome" синим цветом на белом фоне. Однако моя Windows и большинство приложений, которые позволяют мне (Chrome, VS Code и т. Д.), Установлены в темный режим.

Когда я запускаю приложение, у него появляется белый фон, но как только я использую Ctrl+ Shift+ i для открытия инструментов разработчика, WebView преобразуется в темный режим как для инструментов разработчика, так и для экрана вывода.

Исходный вид:

После открытия DevTools:

Еще более странно - если я закрою DevTools, он вернется к белому фону, а затем, если я снова открою DevTools, он ОСТАЕТСЯ с исходным белым фоном в представлении главного окна (хотя сам DevTools, похоже, находится в темном режиме).

Вопрос:

Как мне запретить Dev Tools переключать режимы при открытии - по крайней мере, на основном дисплее моего приложения Electron?


Код для веб-просмотра Electron BrowserWindow

countdown.html:

<html>
    <head>
        <link rel="stylesheet" href="./countdown.css" />
    </head>
    <body>
        <h1>Awesome!</h1>
    </body>
</html>

countdown.css:

h1 {
    font-family: sans-serif;
    color: blue;
}

3 ответа

Простое решение, но один из вариантов - явно установить backgroundColor опция при создании окна:

app.on('ready', _ => {
    mainWindow = new BrowserWindow({
        backgroundColor: '#FFF', // Add this new line
        height: 400,
        width: 900
    })

Этот код установит белый цвет фона, и переход в темный режим не произойдет при первом запуске DevTools (или в любое время).

Это хак, но... Если вы переключите инструменты разработчика открытыми / закрытыми / открытыми, это исчезнет.

Мы можем изменить это поведение, настроив настройки инструментов разработчика, для этого перейдите в настройки инструментов разработчика (щелкнув маленькое зубчатое колесо в правом верхнем углу инструментов разработчика), затем Настройки -> Внешний вид, выберите «свет» в раскрывающемся списке.

BrowserWindow следует перезапустить; путем повторного запуска процесса.

Спасибо

Другие вопросы по тегам