wojtkowiak / meteor-desktop

Build a Meteor's desktop client with hot code push.
MIT License
448 stars 81 forks source link

how to use dark mode support #260

Open LDubya opened 4 years ago

LDubya commented 4 years ago

Hello,

I notice that one of the Mac build settings is "darkModeSupport" (https://www.electron.build/configuration/mac)

How can the Meteor desktop app tell if the device is in dark mode so that it can set its styles to follow the system-wide dark mode setting?

LDubya commented 4 years ago

It seems as though we'd need to do something like this:

const { nativeTheme, systemPreferences } = require('electron')

systemPreferences.subscribeNotification(
  'AppleInterfaceThemeChangedNotification',
  function theThemeHasChanged () {
    updateMyAppTheme(nativeTheme.shouldUseDarkColors)
  }
)

I'll give it a shot

msavin commented 4 years ago

@LDubya

in settings.json:

      "mac": {
          "darkModeSupport": true,
          "extendInfo": {
            "NSRequiresAquaSystemAppearance": false
          }
      }

in desktop.js

eventsBus.on('windowCreated', (window) => {
  const setTheme = function () {
    const darkMode = systemPreferences.isDarkMode();
    desktop.send("darkMode",  darkMode)
  }

  systemPreferences.subscribeNotification('AppleInterfaceThemeChangedNotification', function () {
    setTheme()
  })

  setTheme()
});

This will only work on the build Electron application, not the one in development. It looks like meteor-desktop needs support for enableDarkMode and/or 'extendInfo'. cc @wojtkowiak @darqs

Update: looks like these things are working in development in Electron 8.0.2