Integrate automatic theme in tabbed options

Author: Bleuzen

src/components/common/tabbed-options.tsx

@@ -15,10 +15,9 @@ 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>>;
-    disabled?: boolean;
+    onClick: (tabValue: any) => void,
+    isSelected: (value: any) => boolean,
+    children: Array<React.ReactElement<any, typeof Tab>>
 }) => <nav
     {...omit(p, 'isSelected')}
     onClick={(event: TabClickEvent) => {
@@ -41,11 +40,6 @@ 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,15 +86,11 @@ const AccountContactFooter = styled.div`
     }
 `;
 
-const ThemeAutoButton = styled(SettingsButton)`
-    margin: 10px 0;
-`;
-
 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 }>`
@@ -107,6 +103,7 @@ const EditorContainer = styled.div`
     border: 3px solid #999;
     height: 300px;
     flex-grow: 1;
+    margin: auto 0;
 `;
 
 const AccountUpdateSpinner = styled(Icon).attrs(() => ({
@@ -290,21 +287,23 @@ 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) => {
+                                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'

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

@@ -112,7 +112,6 @@ export class UiStore {
         // closed), but don't get reset when the app starts with stale account data.
         observe(this.accountStore, 'accountDataLastUpdated', () => {
             if (!this.accountStore.isPaidUser) {
-                this.autoTheme = false;
                 this.setTheme('light');
             }
         });
@@ -123,18 +122,16 @@ export class UiStore {
         });
 
         const darkThemeMq = window.matchMedia("(prefers-color-scheme: dark)");
-        this._prefersDarkTheme = darkThemeMq.matches;
-        this._updateAutoTheme();
+        this._setPrefersDarkTheme(darkThemeMq.matches);
         darkThemeMq.addEventListener('change', e => {
-            this._prefersDarkTheme = e.matches;
-            this._updateAutoTheme();
+            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;
@@ -145,42 +142,37 @@ export class UiStore {
     }
 
     @persist @observable
-    private _themeName: ThemeName | 'custom' = 'light';
+    private _themeName: ThemeName | 'automatic' | 'custom' = 'light';
 
     get themeName() {
         return this._themeName;
     }
 
-    @persist('object') @observable
-    private customTheme: Theme | undefined = undefined;
-
-    @computed
-    get theme(): Theme {
-        if (this.themeName === 'custom') {
-            return this.customTheme!;
-        } else {
-            return Themes[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;
 
-    @persist @observable
-    autoTheme: boolean = false;
-
     @action.bound
-    toggleAutoTheme() {
-        this.autoTheme = !this.autoTheme
-        this._updateAutoTheme();
+    private _setPrefersDarkTheme(value: boolean) {
+        this._prefersDarkTheme = value;
     }
 
-    private _updateAutoTheme() {
-        if (!this.autoTheme) return;
-        this.setTheme(this._prefersDarkTheme ? 'dark' : 'light');
+    @persist('object') @observable
+    private customTheme: Theme | undefined = undefined;
+
+    @computed
+    get theme(): Theme {
+        switch(this.themeName) {
+            case 'automatic':
+                return {...Themes[this._prefersDarkTheme ? 'dark' : 'light']}
+            case 'custom':
+                return this.customTheme!;
+            default:
+                return Themes[this.themeName];
+        }
     }
 
     // Set briefly at the moment any card expansion is toggled, to trigger animation for the expansion as it's