Add automatic theme (syncs with system settings)

src/components/settings/settings-page.tsx

@@ -90,7 +90,7 @@ const ThemeColors = styled.div`
     display: grid;
     grid-template-columns: 1fr 1fr;
     border: 3px solid #999;
-    margin: 0 20px;
+    margin: auto 20px;
 `;
 
 const ThemeColorBlock = styled.div<{ themeColor: keyof Theme }>`
@@ -103,6 +103,7 @@ const EditorContainer = styled.div`
     border: 3px solid #999;
     height: 300px;
     flex-grow: 1;
+    margin: auto 0;
 `;
 
 const AccountUpdateSpinner = styled(Icon).attrs(() => ({
@@ -288,15 +289,21 @@ class SettingsPage extends React.Component<SettingsPageProps> {
                         </header>
                         <TabbedOptionsContainer>
                             <TabsContainer
-                                onClick={(value: ThemeName | Theme) => uiStore.setTheme(value)}
-                                isSelected={(value: ThemeName | Theme) => {
+                                onClick={(value: ThemeName | 'automatic' | Theme) => uiStore.setTheme(value)}
+                                isSelected={(value: ThemeName | 'automatic' | Theme) => {
                                     if (typeof value === 'string') {
-                                        return uiStore.themeName === value
+                                        return uiStore.themeName === value;
                                     } else {
                                         return _.isEqual(value, uiStore.theme);
                                     }
                                 }}
                             >
+                                <Tab
+                                    icon={['fas', 'magic']}
+                                    value='automatic'
+                                >
+                                    Automatic
+                                </Tab>
                                 <Tab
                                     icon={['fas', 'sun']}
                                     value='light'
@@ -311,7 +318,7 @@ class SettingsPage extends React.Component<SettingsPageProps> {
                                 </Tab>
                                 <Tab
                                     icon={['fas', 'adjust']}
-                                    value={'high-contrast'}
+                                    value='high-contrast'
                                 >
                                     High Contrast
                                 </Tab>

src/icons.ts

@@ -37,6 +37,7 @@ import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons/faExcla
 import { faLightbulb } from '@fortawesome/free-solid-svg-icons/faLightbulb';
 import { faCog } from '@fortawesome/free-solid-svg-icons/faCog';
 import { faStar } from '@fortawesome/free-regular-svg-icons/faStar';
+import { faMagic } from '@fortawesome/free-solid-svg-icons/faMagic';
 import { faSun } from '@fortawesome/free-solid-svg-icons/faSun';
 import { faMoon } from '@fortawesome/free-solid-svg-icons/faMoon';
 import { faAdjust } from '@fortawesome/free-solid-svg-icons/faAdjust';
@@ -114,6 +115,7 @@ library.add(
     faLightbulb,
     faCog,
     faStar,
+    faMagic,
     faSun,
     faMoon,
     faAdjust,

src/model/ui/ui-store.ts

@@ -111,19 +111,27 @@ export class UiStore {
         // logout & subscription expiration (even if that happened while the app was
         // closed), but don't get reset when the app starts with stale account data.
         observe(this.accountStore, 'accountDataLastUpdated', () => {
-            if (!this.accountStore.isPaidUser) this.setTheme('light');
+            if (!this.accountStore.isPaidUser) {
+                this.setTheme('light');
+            }
         });
 
         await hydrate({
             key: 'ui-store',
             store: this
         });
 
+        const darkThemeMq = window.matchMedia("(prefers-color-scheme: dark)");
+        this._setPrefersDarkTheme(darkThemeMq.matches);
+        darkThemeMq.addEventListener('change', e => {
+            this._setPrefersDarkTheme(e.matches);
+        });
+
         console.log('UI store initialized');
     });
 
     @action.bound
-    setTheme(themeNameOrObject: Theme | ThemeName) {
+    setTheme(themeNameOrObject: Theme | ThemeName | 'automatic') {
         if (typeof themeNameOrObject === 'string') {
             this._themeName = themeNameOrObject;
             this.customTheme = undefined;
@@ -134,21 +142,36 @@ export class UiStore {
     }
 
     @persist @observable
-    private _themeName: ThemeName | 'custom' = 'light';
+    private _themeName: ThemeName | 'automatic' | 'custom' = 'light';
 
     get themeName() {
         return this._themeName;
     }
 
+    /**
+     * Stores if user prefers a dark color theme (for example when set in system settings).
+     * Used if automatic theme is enabled.
+     */
+    @observable
+    private _prefersDarkTheme: boolean = false;
+
+    @action.bound
+    private _setPrefersDarkTheme(value: boolean) {
+        this._prefersDarkTheme = value;
+    }
+
     @persist('object') @observable
     private customTheme: Theme | undefined = undefined;
 
     @computed
     get theme(): Theme {
-        if (this.themeName === 'custom') {
-            return this.customTheme!;
-        } else {
-            return Themes[this.themeName];
+        switch(this.themeName) {
+            case 'automatic':
+                return {...Themes[this._prefersDarkTheme ? 'dark' : 'light']}
+            case 'custom':
+                return this.customTheme!;
+            default:
+                return Themes[this.themeName];
         }
     }