Merge branch 'master' into sophie-report-manager

1 files changed, 29 insertions, 14 deletions

diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 085ff4bb1..dc852596f 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -20,10 +20,9 @@ import { undoBatch } from './UndoManager';
 export enum ColorScheme {
     Dark = 'Dark',
     Light = 'Light',
-    CoolBlue = 'Cool Blue',
-    Cupcake = 'Cupcake',
-    System = 'Match System',
     Custom = 'Custom',
+    CoolBlue = 'CoolBlue',
+    Cupcake = 'Cupcake',
 }
 
 export enum freeformScrollMode {
@@ -50,7 +49,21 @@ export class SettingsManager extends React.Component<{}> {
     constructor(props: {}) {
         super(props);
         SettingsManager.Instance = this;
+        this.matchSystem();
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+            if (Doc.UserDoc().userThemeSystem) {
+                if (window.matchMedia('(prefers-color-scheme: dark)').matches) this.changeColorScheme(ColorScheme.Dark);
+                if (window.matchMedia('(prefers-color-scheme: light)').matches) this.changeColorScheme(ColorScheme.Light);
+            }
+            // undefined means ColorScheme.Light until all CSS is updated with values for each color scheme (e.g., see MainView.scss, DocumentDecorations.scss)
+        });
     }
+    matchSystem = () => {
+        if (Doc.UserDoc().userThemeSystem) {
+            if (window.matchMedia('(prefers-color-scheme: dark)').matches) this.changeColorScheme(ColorScheme.Dark);
+            if (window.matchMedia('(prefers-color-scheme: light)').matches) this.changeColorScheme(ColorScheme.Light);
+        }
+    };
 
     public close = action(() => (this.isOpen = false));
     public open = action(() => (this.isOpen = true));
@@ -88,6 +101,10 @@ export class SettingsManager extends React.Component<{}> {
     });
     @undoBatch switchUserColor = action((color: string) => (Doc.UserDoc().userColor = color));
     @undoBatch switchUserVariantColor = action((color: string) => (Doc.UserDoc().userVariantColor = color));
+    @undoBatch userThemeSystemToggle = action(() => {
+        Doc.UserDoc().userThemeSystem = !Doc.UserDoc().userThemeSystem;
+        this.matchSystem();
+    });
     @undoBatch playgroundModeToggle = action(() => {
         this.playgroundMode = !this.playgroundMode;
         if (this.playgroundMode) {
@@ -123,18 +140,11 @@ export class SettingsManager extends React.Component<{}> {
                 break;
             case ColorScheme.Custom:
                 break;
-            case ColorScheme.System:
-            default:
-                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-                    e.matches ? ColorScheme.Dark : ColorScheme.Light; // undefined means ColorScheme.Light until all CSS is updated with values for each color scheme (e.g., see MainView.scss, DocumentDecorations.scss)
-                });
-                break;
         }
     });
 
     @computed get colorsContent() {
-        const colorSchemes = [ColorScheme.Light, ColorScheme.Dark, ColorScheme.Cupcake, ColorScheme.CoolBlue, ColorScheme.Custom, ColorScheme.System];
-        const schemeMap = ['Light', 'Dark', 'Cupcake', 'Cool Blue', 'Custom', 'Match System'];
+        const schemeMap = Array.from(Object.keys(ColorScheme));
         const userTheme = StrCast(Doc.UserDoc().userTheme);
         return (
             <div style={{ width: '100%' }}>
@@ -144,15 +154,20 @@ export class SettingsManager extends React.Component<{}> {
                     type={Type.TERT}
                     closeOnSelect={false}
                     selectedVal={userTheme}
-                    setSelectedVal={scheme => this.changeColorScheme(scheme as string)}
-                    items={colorSchemes.map((scheme, i) => ({
-                        text: schemeMap[i],
+                    setSelectedVal={scheme => {
+                        this.changeColorScheme(scheme as string);
+                        Doc.UserDoc().userThemeSystem = false;
+                    }}
+                    items={Object.keys(ColorScheme).map((scheme, i) => ({
+                        text: schemeMap[i].replace(/([a-z])([A-Z])/, '$1 $2'),
                         val: scheme,
                     }))}
                     dropdownType={DropdownType.SELECT}
                     color={SettingsManager.userColor}
                     fillWidth
                 />
+                <Toggle formLabel="Match System" toggleType={ToggleType.SWITCH} color={SettingsManager.userColor} toggleStatus={BoolCast(Doc.UserDoc().userThemeSystem)} onClick={this.userThemeSystemToggle} />
+
                 {userTheme === ColorScheme.Custom && (
                     <Group formLabel="Custom Theme">
                         <ColorPicker