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={
-              isEqual(this.props.settings, this.state.updatedSettings) &&
-              isEqual(
-                this.props.launcherSettings,
-                this.state.updatedLauncherSettings,
-              )
-            }
+            disabled={settingsPristine}
+            compact
+            padded
+            onClick={this.applyChangesWithoutRestart}>
+            Apply
+          </Button>
+          <Button
+            disabled={settingsPristine}
             type="primary"
             compact
             padded