0

I have an Electron app that uses CSS prefers-color-scheme to implement dark mode. This works fine on Windows and Mac, but not on Linux (presumably because Chromium doesn't have a way of querying the desktop theme).

I would like to provide an option to override the value that Chromium automatically finds for prefers-color-scheme. Is there a way to do this using the Electron API?

Timmmm
  • 88,195
  • 71
  • 364
  • 509

1 Answers1

1

There is an API! You can nativeTheme.themeSource to system, light or dark.

For example, in my background.ts, add this code:

import { /* existing stuff */, nativeTheme } from "electron";

nativeTheme.themeSource = 'light';
Timmmm
  • 88,195
  • 71
  • 364
  • 509
  • I've never gotten it to work, is it undefined outside of Linux or something? – Nathan Hawks Jan 06 '20 at 17:37
  • Would it be too much trouble to ask you how? `if (app) app.on('ready', function() { nativeTheme = electron.nativeTheme; nativeTheme.themeSource = 'dark'; });` always crashes into a tree for me on Windows. (`nativeTheme` being undefined.) – Nathan Hawks Jan 07 '20 at 15:41
  • 1
    I pretty much did the same thing but put it at the top level. I assume you're using Typescript (if not you should fix that now!) - do you get a type error for `electron.nativeTheme`? Might be worth posting more of your code in a new question. – Timmmm Jan 07 '20 at 17:16
  • Good suggestion: https://stackoverflow.com/questions/59633484/electron-trying-to-set-nativetheme-themesource-but-nativetheme-is-undefine if you feel like taking a crack at it. And no, I'm an old dog and Typescript is a new trick :) Frankly I considered Javascript to be a fad until about 10 years after node came along. PS, thanks for adding a code sample :) – Nathan Hawks Jan 07 '20 at 18:50