Electron scrollbars are not dark in dark mode

user_1099019 0
Viewed 755

https://github.com/electron/electron/blob/master/docs/api/native-theme.md

electron.nativeTheme.themeSource = 'dark';

When changing to dark mode, the native scrollbars stay light. Is there another step required to get them to display dark?

In the shot below, the left shows my browser window, right is the dev tools. Dev tools has the dark scrollbar, so the support is there somewhere.

enter image description here

electron
1 Answers

Ugh this was soooo complicated to work out. There are two things you need to do:

  1. Use the color-scheme CSS/meta tag to indicate to Chrome that your page is happy being rendered in light and dark mode. I think this also changes the default User Agent stylesheet to dark mode in dark mode. This really seems like a stupid design.

I only tested the meta tag, and it's probably the best option: add this to your <head>:

<meta name="color-scheme" content="light dark">

(dark light works too, supposedly the order encodes the author's preference but I seriously doubt it has any effect.)

  1. Dark scrollbars are still an experimental feature in Chrome, so you need to enable the feature flag. You can do this with the following flag when you create windows:
new BrowserWindow({
      webPreferences: {
        enableBlinkFeatures: "CSSColorSchemeUARendering",
      },
      ...
    }),

The corresponding flag under chrome://flags is called Web Platform Controls Dark Mode (yeay consistency).

You can probably also do it using app.commandLine.addSwitch("enable-features", "CSSColorSchemeUARendering"); but I think the above method is cleaner.

With that I finally have dark scrollbars.

user_2655210
Related