Start application in the right theme

Summary:
Changelog: Improved dark mode support!

This diff makes sure that the dark mode preference is written to the Flipper config, and applied during startup, so that the ugly light/dark flash when starting Flipper in dark mode disappears

Reviewed By: passy

Differential Revision: D29436059

fbshipit-source-id: 0f762149848298512026fbd216d9a9e0bf4276db

desktop/app/src/init.tsx

@@ -215,7 +215,7 @@ function init() {
   // listen to settings and load the right theme
   sideEffect(
     store,
-    {name: 'loadTheme', fireImmediately: true, throttleMs: 500},
+    {name: 'loadTheme', fireImmediately: false, throttleMs: 500},
     (state) => ({
       dark: state.settingsState.darkMode,
     }),

desktop/static/index.dev.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="style.css">
-    <link id="flipper-theme-import" rel="stylesheet" href="themes/light.css">
+    <link id="flipper-theme-import" rel="stylesheet">
     <link rel="stylesheet" href="graphiql/graphiql.css">
     <link rel="stylesheet" href="vis/vis.min.css">
     <title>Flipper</title>
@@ -78,6 +78,18 @@
           box.textContent = text;
         }
 
+        // load correct theme
+        try {
+          if (JSON.parse(window.process.env.CONFIG).darkMode) {
+            document.getElementById('flipper-theme-import').href="themes/dark.css";
+          } else {
+            document.getElementById('flipper-theme-import').href="themes/light.css";
+          }
+        } catch(e) {
+          console.error("Failed to initialize theme", e);
+          document.getElementById('flipper-theme-import').href="themes/light.css";
+        }
+
         function init() {
           const script = document.createElement('script');
           script.src = window.process.env.BUNDLE_URL;

desktop/static/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="style.css">
-    <link id="flipper-theme-import" rel="stylesheet" href="themes/light.css">
+    <link id="flipper-theme-import" rel="stylesheet">
     <link rel="stylesheet" href="graphiql/graphiql.css">
     <link rel="stylesheet" href="vis/vis.min.css">
     <title>Flipper</title>
@@ -15,6 +15,18 @@
       global.electronRequire = window.require;
     </script>
     <script>
+      // load correct theme
+      try {
+        if (JSON.parse(window.process.env.CONFIG).darkMode) {
+          document.getElementById('flipper-theme-import').href="themes/dark.css";
+        } else {
+          document.getElementById('flipper-theme-import').href="themes/light.css";
+        }
+      } catch(e) {
+        console.error("Failed to initialize theme", e);
+        document.getElementById('flipper-theme-import').href="themes/light.css";
+      }
+
       window.addEventListener('flipper-store-ready', () => global.flipperInit());
     </script>
     <script src="bundle.js"></script>

desktop/static/main.ts

@@ -108,6 +108,9 @@ if (argv['disable-gpu'] || process.env.FLIPPER_DISABLE_GPU === '1') {
 }
 
 process.env.CONFIG = JSON.stringify(config);
+if (config.darkMode) {
+  nativeTheme.themeSource = 'dark';
+}
 
 // possible reference to main app window
 let win: BrowserWindow;
@@ -270,7 +273,6 @@ ipcMain.on('getLaunchTime', (event) => {
 });
 
 ipcMain.on('setTheme', (_e, mode: 'light' | 'dark') => {
-  console.log('Switching to theme ' + mode);
   nativeTheme.themeSource = mode;
 });
 
@@ -362,6 +364,7 @@ function createWindow() {
       configPath,
       JSON.stringify({
         ...config,
+        darkMode: nativeTheme.themeSource === 'dark',
         lastWindowPosition: {
           x,
           y,

desktop/static/setup.ts

@@ -24,6 +24,7 @@ export type Config = {
   launcherMsg?: string | undefined;
   updaterEnabled?: boolean;
   launcherEnabled?: boolean;
+  darkMode?: boolean;
 };
 
 export default function setup(argv: any) {