Describe the feature or problem you’d like to solve

GitHub Desktop (at least on Mac) supports system preferences for dark/light mode (see desktop#5037). This seems to rely on some systemPreferences APIs, and this does not seem to be a cross-platform solution, and is definitely not working for me on Fedora. Conversations surrounding the issue and feature seem exclusive to macOS despite dark/light being something that exists in some form on nearly every modern OS.

I'm not sure if this is an issue for Desktop itself, Electron, or this fork. It's a feature request here, something already implemented on GitHub Desktop, and seemingly a bug in Electron.

Using GitHub Desktop 2.5.7 on Fedora 29 (I know... A bit outdated).

Proposed solution

Instead of relying on systemPreferences, favor matchMedia('(prefers-color-scheme: dark)') for implementing system preferences.

How will it benefit Desktop and its users?

Using a standard API instead of an Electron one should improve compatibility and maintainability.

Additional context

I've done some experimenting with this approach. query.matches works (mostly) correctly, but query.addListener() does not behave as expected. matchMedia seems to be fixed at launch time, such that query.matches is determined by system theme when first launched.

1. Open GitHub Desktop with "Light Mode"
2. matchMedia('(prefers-color-scheme: dark)').matches is false
3. Switch to "Dark Mode"
4. matchMedia('(prefers-color-scheme: dark)').matches is still false and event is not dispatched
5. Close and re-open GitHub Desktop
6. matchMedia('(prefers-color-scheme: dark)').matches is true now
7. Switch to "Light Mode"
8. matchMedia('(prefers-color-scheme: dark)').matches is still true and event is not dispatched

// If theme preference is set to system/auto...
const query = matchMedia('(prefers-color-scheme: dark)');

if (query.matches) {
  document.body.classList.add('theme-dark');
} else {
    document.body.classList.add('theme-light');
}

query.addListener(({ target }) => {
  // Seems this portion is never run
  document.body.classList.toggle('theme-dark', target.matches);
  document.body.classList.toggle('theme-light', ! target.matches);
});

Add any other context like screenshots or mockups are helpful, if applicable.