From 014e571f74790617cb91713bf8356651a358f593 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Tue, 29 Jun 2021 08:38:33 -0700
Subject: [PATCH] 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      |  2 +-
 desktop/static/index.dev.html | 14 +++++++++++++-
 desktop/static/index.html     | 14 +++++++++++++-
 desktop/static/main.ts        |  5 ++++-
 desktop/static/setup.ts       |  1 +
 5 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/desktop/app/src/init.tsx b/desktop/app/src/init.tsx
index 5b5822a82..3680a379e 100644
--- a/desktop/app/src/init.tsx
+++ b/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,
     }),
diff --git a/desktop/static/index.dev.html b/desktop/static/index.dev.html
index 7c686980b..bad0f4859 100644
--- a/desktop/static/index.dev.html
+++ b/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;
diff --git a/desktop/static/index.html b/desktop/static/index.html
index c497636bd..689fb0a8f 100644
--- a/desktop/static/index.html
+++ b/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>
diff --git a/desktop/static/main.ts b/desktop/static/main.ts
index 736495dd6..69af30d25 100644
--- a/desktop/static/main.ts
+++ b/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,
diff --git a/desktop/static/setup.ts b/desktop/static/setup.ts
index 1c4667109..987390527 100644
--- a/desktop/static/setup.ts
+++ b/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) {