Introduce dark theme

Summary: Adds support for switching dark mode on the fly. Also added the option to apply certain settings without restarting Flipper, as that isn't needed in all cases.

Reviewed By: cekkaewnumchai

Differential Revision: D23625854

fbshipit-source-id: 82175ba10524daf1b48a65feec8c610460df9418

desktop/app/src/chrome/SettingsSheet.tsx

@@ -81,6 +81,13 @@ class SettingsSheet extends Component<Props, State> {
     });
   };
 
+  applyChangesWithoutRestart = async () => {
+    this.props.updateSettings(this.state.updatedSettings);
+    this.props.updateLauncherSettings(this.state.updatedLauncherSettings);
+    await flush();
+    this.props.onHide();
+  };
+
   render() {
     const {
       enableAndroid,
@@ -90,8 +97,14 @@ class SettingsSheet extends Component<Props, State> {
       enablePrefetching,
       idbPath,
       reactNative,
+      enableSandy,
+      darkMode,
     } = this.state.updatedSettings;
 
+    const settingsPristine =
+      isEqual(this.props.settings, this.state.updatedSettings) &&
+      isEqual(this.props.launcherSettings, this.state.updatedLauncherSettings);
+
     return (
       <Container>
         <Title>Settings</Title>
@@ -195,6 +208,20 @@ class SettingsSheet extends Component<Props, State> {
             });
           }}
         />
+        {enableSandy && (
+          <ToggledSection
+            label="Enable dark theme"
+            toggled={darkMode}
+            onChange={(enabled) => {
+              this.setState((prevState) => ({
+                updatedSettings: {
+                  ...prevState.updatedSettings,
+                  darkMode: enabled,
+                },
+              }));
+            }}
+          />
+        )}
         <ToggledSection
           label="React Native keyboard shortcuts"
           toggled={reactNative.shortcuts.enabled}
@@ -256,13 +283,14 @@ class SettingsSheet extends Component<Props, State> {
             Cancel
           </Button>
           <Button
-            disabled={
+            disabled={settingsPristine}
-              isEqual(this.props.settings, this.state.updatedSettings) &&
+            compact
-              isEqual(
+            padded
-                this.props.launcherSettings,
+            onClick={this.applyChangesWithoutRestart}>
-                this.state.updatedLauncherSettings,
+            Apply
-              )
+          </Button>
-            }
+          <Button
+            disabled={settingsPristine}
             type="primary"
             compact
             padded

desktop/app/src/init.tsx

@@ -34,6 +34,7 @@ import QuickPerformanceLogger, {FLIPPER_QPL_EVENTS} from './fb-stubs/QPL';
 import {PopoverProvider} from './ui/components/PopoverProvider';
 import {initializeFlipperLibImplementation} from './utils/flipperLibImplementation';
 import {enableConsoleHook} from './chrome/ConsoleLogs';
+import {sideEffect} from './utils/sideEffect';
 
 if (process.env.NODE_ENV === 'development' && os.platform() === 'darwin') {
   // By default Node.JS has its internal certificate storage and doesn't use
@@ -96,6 +97,23 @@ function init() {
   registerRecordingHooks(store);
   enableConsoleHook();
   window.flipperGlobalStoreDispatch = store.dispatch;
+
+  // listen to settings and load the right theme
+  sideEffect(
+    store,
+    {name: 'loadTheme', fireImmediately: true, throttleMs: 500},
+    (state) =>
+      state.settingsState.enableSandy
+        ? state.settingsState.darkMode
+          ? 'themes/dark'
+          : 'themes/light'
+        : 'none',
+    (theme) => {
+      (document.getElementById(
+        'flipper-theme-import',
+      ) as HTMLLinkElement).href = `${theme}.css`;
+    },
+  );
 }
 
 // rehydrate app state before exposing init

desktop/app/src/reducers/settings.tsx

@@ -44,6 +44,7 @@ export type Settings = {
     };
   };
   enableSandy: boolean;
+  darkMode: boolean;
 };
 
 export type Action =
@@ -77,6 +78,7 @@ const initialState: Settings = {
     },
   },
   enableSandy: false,
+  darkMode: false,
 };
 
 export default function reducer(

desktop/app/src/store.tsx

@@ -8,7 +8,7 @@
  */
 
 import {createStore} from 'redux';
-import reducers, {Actions, State as StoreState} from './reducers/index';
+import reducers, {Actions, State as StoreState, Store} from './reducers/index';
 import {stateSanitizer} from './utils/reduxDevToolsConfig';
 import isProduction from './utils/isProduction';
 import produce from 'immer';
@@ -17,7 +17,7 @@ import {
   getPluginKey,
 } from './utils/pluginUtils';
 
-export const store = createStore<StoreState, Actions, any, any>(
+export const store: Store = createStore<StoreState, Actions, any, any>(
   rootReducer,
   // @ts-ignore Type definition mismatch
   window.__REDUX_DEVTOOLS_EXTENSION__

desktop/package.json

@@ -243,7 +243,7 @@
     "build:babel-transformer": "cd babel-transformer && yarn build",
     "build:pkg": "cd pkg && yarn build",
     "build:eslint": "cd eslint-plugin-flipper && yarn build",
-    "build:themes": "lessc --js themes/light.less static/themes/light.css",
+    "build:themes": "lessc --js themes/light.less static/themes/light.css && lessc --js themes/dark.less static/themes/dark.css",
     "prebuild": "yarn build:pkg && yarn rm-dist && yarn build:themes",
     "build": "cross-env NODE_ENV=production ./ts-node scripts/build-release.ts $@",
     "build:dev": "cross-env NODE_ENV=development ./ts-node scripts/build-release.ts $@",

desktop/static/empy.css

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+/*
+ used as theme in case Sandy is not enabled
+*/

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" href="empty.css">
     <link rel="stylesheet" href="graphiql/graphiql.css">
     <link rel="stylesheet" href="vis/vis.min.css">
     <title>Flipper</title>

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" href="empty.css">
     <link rel="stylesheet" href="graphiql/graphiql.css">
     <link rel="stylesheet" href="vis/vis.min.css">
     <title>Flipper</title>

desktop/themes/dark.less

@@ -0,0 +1,4 @@
+@import '../node_modules/antd/lib/style/themes/dark.less';
+@import '../node_modules/antd/dist/antd.less'; 
+
+@primary-color: yellow;