Add automatic theme

Author: Bleuzen

src/components/common/tabbed-options.tsx

@@ -15,9 +15,10 @@ interface TabClickEvent extends React.MouseEvent {
 }
 
 export const TabsContainer = styled((p: {
-    onClick: (tabValue: any) => void,
-    isSelected: (value: any) => boolean,
-    children: Array<React.ReactElement<any, typeof Tab>>
+    onClick: (tabValue: any) => void;
+    isSelected: (value: any) => boolean;
+    children: Array<React.ReactElement<any, typeof Tab>>;
+    disabled?: boolean;
 }) => <nav
     {...omit(p, 'isSelected')}
     onClick={(event: TabClickEvent) => {
@@ -40,6 +41,11 @@ export const TabsContainer = styled((p: {
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
+
+    ${p => p.disabled && css`
+        opacity: 0.5;
+        pointer-events: none;
+    `}
 `;
 
 export const Tab = styled((p: {

src/components/settings/settings-page.tsx

@@ -86,6 +86,10 @@ const AccountContactFooter = styled.div`
     }
 `;
 
+const ThemeAutoButton = styled(SettingsButton)`
+    margin: 10px 0;
+`;
+
 const ThemeColors = styled.div`
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -286,8 +290,12 @@ class SettingsPage extends React.Component<SettingsPageProps> {
                                 Themes
                             </CollapsibleCardHeading>
                         </header>
+                        <ThemeAutoButton onClick={uiStore.toggleAutoTheme}>
+                            {uiStore.autoTheme ?  'Use specific theme' : 'Use automatic theme'}
+                        </ThemeAutoButton>
                         <TabbedOptionsContainer>
                             <TabsContainer
+                                disabled={uiStore.autoTheme}
                                 onClick={(value: ThemeName | Theme) => uiStore.setTheme(value)}
                                 isSelected={(value: ThemeName | Theme) => {
                                     if (typeof value === 'string') {
@@ -311,7 +319,7 @@ class SettingsPage extends React.Component<SettingsPageProps> {
                                 </Tab>
                                 <Tab
                                     icon={['fas', 'adjust']}
-                                    value={'high-contrast'}
+                                    value='high-contrast'
                                 >
                                     High Contrast
                                 </Tab>

src/model/ui/ui-store.ts

@@ -111,14 +111,25 @@ 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.autoTheme = false;
+                this.setTheme('light');
+            }
         });
 
         await hydrate({
             key: 'ui-store',
             store: this
         });
 
+        const darkThemeMq = window.matchMedia("(prefers-color-scheme: dark)");
+        this._prefersDarkTheme = darkThemeMq.matches;
+        this._updateAutoTheme();
+        darkThemeMq.addEventListener('change', e => {
+            this._prefersDarkTheme = e.matches;
+            this._updateAutoTheme();
+        });
+
         console.log('UI store initialized');
     });
 
@@ -152,6 +163,26 @@ export class UiStore {
         }
     }
 
+    /**
+     * Stores if user prefers a dark color theme (for example when set in system settings).
+     * Used if automatic theme is enabled.
+     */
+    private _prefersDarkTheme: boolean = false;
+
+    @persist @observable
+    autoTheme: boolean = false;
+
+    @action.bound
+    toggleAutoTheme() {
+        this.autoTheme = !this.autoTheme
+        this._updateAutoTheme();
+    }
+
+    private _updateAutoTheme() {
+        if (!this.autoTheme) return;
+        this.setTheme(this._prefersDarkTheme ? 'dark' : 'light');
+    }
+
     // Set briefly at the moment any card expansion is toggled, to trigger animation for the expansion as it's
     // applied, not always (to avoid animating expanded cards when they're rendered e.g. when selecting a request).
     @observable