From f9c8bf8941a39b6384b5c44db8133de9b364900d Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Fri, 10 Sep 2021 07:01:41 -0700
Subject: [PATCH] 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              | 2 +-
 desktop/app/src/reducers/settings.tsx | 4 ++--
 desktop/static/index.dev.html         | 4 ++--
 desktop/static/index.html             | 4 ++--
 desktop/static/main.ts                | 4 +++-
 5 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/desktop/app/src/init.tsx b/desktop/app/src/init.tsx
index 294624601..3148269b9 100644
--- a/desktop/app/src/init.tsx
+++ b/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') {
diff --git a/desktop/app/src/reducers/settings.tsx b/desktop/app/src/reducers/settings.tsx
index 56e3e316b..665d3bb24 100644
--- a/desktop/app/src/reducers/settings.tsx
+++ b/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,
 };
diff --git a/desktop/static/index.dev.html b/desktop/static/index.dev.html
index bad0f4859..aa5b5e3ff 100644
--- a/desktop/static/index.dev.html
+++ b/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";
diff --git a/desktop/static/index.html b/desktop/static/index.html
index 689fb0a8f..475260e2f 100644
--- a/desktop/static/index.html
+++ b/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";
diff --git a/desktop/static/main.ts b/desktop/static/main.ts
index f549f8299..1c4486bd3 100644
--- a/desktop/static/main.ts
+++ b/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;