Add option for automatic dark theme (#2759)

Summary:
Add an setting option to allow automatic dark theme

A feature requested by swrobel https://github.com/facebook/flipper/issues/2708

## Changelog

### UI change
Replace the `Enable Dark Theme` Toggle button with a Radio group containing three Radio buttons.

The available options are `Dark`, `Light` and `Use System Default`, of which `Use System Default` is the default value

<img width="548" alt="Screenshot 2021-08-31 at 3 32 44 PM" src="https://user-images.githubusercontent.com/410850/131462798-4e74f757-41fc-4a3f-ba28-53d00fc1cf03.png">

### Data structure change

The `darkMode` property of [Settings](c0cd32564a/desktop/app/src/reducers/settings.tsx (L20)) is changed from `boolean` to `string`, the available values are `dark`, `light` and `auto`

Pull Request resolved: https://github.com/facebook/flipper/pull/2759

Test Plan:
### Test 1
- Step: Choose `Dark` in the Settings page and click on `Apply and Restart` button
- Expect: The application is displayed in Dark mode
### Test 2
- Step: Choose `Light` in the Settings page and click on `Apply and Restart` button
- Expect: The application is displayed in Light mode
### Test 3
- Step: Choose `Use System Default` in the Settings page and click on `Apply and Restart` button
- Expect: The application is displayed in System Default mode

Reviewed By: mweststrate

Differential Revision: D30666966

Pulled By: passy

fbshipit-source-id: a63e91f2d0dbff96890e267062cb75bffd0007f4

desktop/app/src/init.tsx

@@ -49,7 +49,7 @@ import styled from '@emotion/styled';
 import {CopyOutlined} from '@ant-design/icons';
 import {getVersionString} from './utils/versionString';
 import {PersistGate} from 'redux-persist/integration/react';
-import {ipcRenderer} from 'electron';
+import {ipcRenderer, remote} from 'electron';
 
 if (process.env.NODE_ENV === 'development' && os.platform() === 'darwin') {
   // By default Node.JS has its internal certificate storage and doesn't use
@@ -213,14 +213,26 @@ function init() {
   sideEffect(
     store,
     {name: 'loadTheme', fireImmediately: false, throttleMs: 500},
-    (state) => ({
-      dark: state.settingsState.darkMode,
-    }),
-    (theme) => {
+    (state) => {
+      const theme = state.settingsState.darkMode;
+      let shouldUseDarkMode = remote.nativeTheme.shouldUseDarkColors;
+      if (theme === 'dark') {
+        shouldUseDarkMode = true;
+      } else if (theme === 'light') {
+        shouldUseDarkMode = false;
+      } else if (theme === 'system') {
+        shouldUseDarkMode = remote.nativeTheme.shouldUseDarkColors;
+      }
+      return {
+        shouldUseDarkMode: shouldUseDarkMode,
+        theme: theme,
+      };
+    },
+    (result) => {
       (
         document.getElementById('flipper-theme-import') as HTMLLinkElement
-      ).href = `themes/${theme.dark ? 'dark' : 'light'}.css`;
-      ipcRenderer.send('setTheme', theme.dark ? 'dark' : 'light');
+      ).href = `themes/${result.shouldUseDarkMode ? 'dark' : 'light'}.css`;
+      ipcRenderer.send('setTheme', result.theme);
     },
   );
 }