Fix dark mode startup error

Summary:
Changelog: Fixed startup error when loading default theme

The theme defaulted to `auto`, instead of `system`, causing an startup exception. Fixed by adding types and having a more defensive startup check.

Fixes https://github.com/facebook/flipper/issues/2835

Reviewed By: jknoxville

Differential Revision: D30866648

fbshipit-source-id: 83b6d9fc235eaa0a7e959df4276d3f378eed7d1f

desktop/app/src/init.tsx

@@ -215,7 +215,7 @@ function init() {
     {name: 'loadTheme', fireImmediately: false, throttleMs: 500},
     (state) => {
       const theme = state.settingsState.darkMode;
-      let shouldUseDarkMode = remote.nativeTheme.shouldUseDarkColors;
+      let shouldUseDarkMode = false;
       if (theme === 'dark') {
         shouldUseDarkMode = true;
       } else if (theme === 'light') {

desktop/app/src/reducers/settings.tsx

@@ -43,7 +43,7 @@ export type Settings = {
       openDevMenu: string;
     };
   };
-  darkMode: string;
+  darkMode: 'dark' | 'light' | 'system';
   showWelcomeAtStartup: boolean;
   suppressPluginErrors: boolean;
 };
@@ -78,7 +78,7 @@ const initialState: Settings = {
       openDevMenu: 'Alt+Shift+D',
     },
   },
-  darkMode: 'auto',
+  darkMode: 'light',
   showWelcomeAtStartup: true,
   suppressPluginErrors: false,
 };

desktop/static/index.dev.html

@@ -78,9 +78,9 @@
           box.textContent = text;
         }
 
-        // load correct theme
+        // load correct theme (n.b. this doesn't handle system value specifically, will assume light in such cases)
         try {
-          if (JSON.parse(window.process.env.CONFIG).darkMode) {
+          if (JSON.parse(window.process.env.CONFIG).darkMode === 'dark') {
             document.getElementById('flipper-theme-import').href="themes/dark.css";
           } else {
             document.getElementById('flipper-theme-import').href="themes/light.css";

desktop/static/index.html

@@ -15,9 +15,9 @@
       global.electronRequire = window.require;
     </script>
     <script>
-      // load correct theme
+      // load correct theme (n.b. this doesn't handle system value specifically, will assume light in such cases)
       try {
-        if (JSON.parse(window.process.env.CONFIG).darkMode) {
+        if (JSON.parse(window.process.env.CONFIG).darkMode === 'dark') {
           document.getElementById('flipper-theme-import').href="themes/dark.css";
         } else {
           document.getElementById('flipper-theme-import').href="themes/light.css";

desktop/static/main.ts

@@ -109,7 +109,9 @@ if (argv['disable-gpu'] || process.env.FLIPPER_DISABLE_GPU === '1') {
 }
 
 process.env.CONFIG = JSON.stringify(config);
-nativeTheme.themeSource = config.darkMode || 'light';
+nativeTheme.themeSource = ['light', 'dark', 'system'].includes(config.darkMode)
+  ? config.darkMode
+  : 'light';
 
 // possible reference to main app window
 let win: BrowserWindow;