Follow system theme by default

Author: ajbura

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,4 +1,4 @@
-<!-- Please read https://github.com/ajbura/cinny/CONTRIBUTING.md before submitting your pull request -->
+<!-- Please read https://github.com/ajbura/cinny/blob/dev/CONTRIBUTING.md before submitting your pull request -->
 
 ### Description
 <!-- Please include a summary of the change. Please also include relevant motivation and context. List any dependencies that are required for this change. -->

src/app/organisms/settings/Settings.jsx

@@ -57,23 +57,25 @@ function AppearanceSection() {
           )}
           content={<Text variant="b3">Use light or dark mode based on the system settings.</Text>}
         />
-        {!settings.useSystemTheme && (
-          <SettingTile
-            title="Theme"
-            content={(
-              <SegmentedControls
-                selected={settings.getThemeIndex()}
-                segments={[
-                  { text: 'Light' },
-                  { text: 'Silver' },
-                  { text: 'Dark' },
-                  { text: 'Butter' },
-                ]}
-                onSelect={(index) => settings.setTheme(index)}
-              />
-          )}
-          />
+        <SettingTile
+          title="Theme"
+          content={(
+            <SegmentedControls
+              selected={settings.useSystemTheme ? -1 : settings.getThemeIndex()}
+              segments={[
+                { text: 'Light' },
+                { text: 'Silver' },
+                { text: 'Dark' },
+                { text: 'Butter' },
+              ]}
+              onSelect={(index) => {
+                if (settings.useSystemTheme) toggleSystemTheme();
+                settings.setTheme(index);
+                updateState({});
+              }}
+            />
         )}
+        />
       </div>
       <div className="settings-appearance__card">
         <MenuHeader>Room messages</MenuHeader>

src/client/state/settings.js

@@ -48,31 +48,43 @@ class Settings extends EventEmitter {
     return this.themes[this.themeIndex];
   }
 
-  setTheme(themeIndex) {
-    const appBody = document.getElementById('appBody');
-
-    appBody.classList.remove('system-theme');
+  _clearTheme() {
+    document.body.classList.remove('system-theme');
     this.themes.forEach((themeName) => {
       if (themeName === '') return;
-      appBody.classList.remove(themeName);
+      document.body.classList.remove(themeName);
     });
-    // If use system theme is enabled
-    // we will override current theme choice with system theme
+  }
+
+  applyTheme() {
+    this._clearTheme();
     if (this.useSystemTheme) {
-      appBody.classList.add('system-theme');
-    } else if (this.themes[themeIndex] !== '') {
-      appBody.classList.add(this.themes[themeIndex]);
+      document.body.classList.add('system-theme');
+    } else if (this.themes[this.themeIndex]) {
+      document.body.classList.add(this.themes[this.themeIndex]);
     }
-    setSettings('themeIndex', themeIndex);
+  }
+
+  setTheme(themeIndex) {
     this.themeIndex = themeIndex;
+    setSettings('themeIndex', this.themeIndex);
+    this.applyTheme();
+  }
+
+  toggleUseSystemTheme() {
+    this.useSystemTheme = !this.useSystemTheme;
+    setSettings('useSystemTheme', this.useSystemTheme);
+    this.applyTheme();
+
+    this.emit(cons.events.settings.SYSTEM_THEME_TOGGLED, this.useSystemTheme);
   }
 
   getUseSystemTheme() {
     if (typeof this.useSystemTheme === 'boolean') return this.useSystemTheme;
 
     const settings = getSettings();
-    if (settings === null) return false;
-    if (typeof settings.useSystemTheme === 'undefined') return false;
+    if (settings === null) return true;
+    if (typeof settings.useSystemTheme === 'undefined') return true;
     return settings.useSystemTheme;
   }
 
@@ -138,12 +150,7 @@ class Settings extends EventEmitter {
   setter(action) {
     const actions = {
       [cons.actions.settings.TOGGLE_SYSTEM_THEME]: () => {
-        this.useSystemTheme = !this.useSystemTheme;
-
-        setSettings('useSystemTheme', this.useSystemTheme);
-        this.setTheme(this.themeIndex);
-
-        this.emit(cons.events.settings.SYSTEM_THEME_TOGGLED, this.useSystemTheme);
+        this.toggleUseSystemTheme();
       },
       [cons.actions.settings.TOGGLE_MARKDOWN]: () => {
         this.isMarkdown = !this.isMarkdown;

src/index.jsx

@@ -7,7 +7,7 @@ import settings from './client/state/settings';
 
 import App from './app/pages/App';
 
-settings.setTheme(settings.getThemeIndex());
+settings.applyTheme();
 
 ReactDom.render(
   <App />,