Change UI

src/domain/session/settings/SettingsViewModel.js

@@ -51,6 +51,7 @@ export class SettingsViewModel extends ViewModel {
         this.maxSentImageSizeLimit = 4000;
         this.pushNotifications = new PushNotificationStatus();
         this._activeTheme = undefined;
+        this._activeVariant = undefined;
     }
 
     get _session() {
@@ -79,6 +80,7 @@ export class SettingsViewModel extends ViewModel {
         this.pushNotifications.enabled = await this._session.arePushNotificationsEnabled();
         if (!import.meta.env.DEV) {
             this._activeTheme = await this.platform.themeLoader.getActiveTheme();
+            this._activeVariant = await this.platform.themeLoader.getCurrentVariant();
         }
         this.emitChange("");
     }
@@ -139,6 +141,10 @@ export class SettingsViewModel extends ViewModel {
         return this._activeTheme;
     }
 
+    get activeVariant() {
+        return this._activeVariant;
+    }
+
     setTheme(name) {
         this.platform.themeLoader.setTheme(name);
     }
@@ -195,5 +201,16 @@ export class SettingsViewModel extends ViewModel {
         this.emitChange("themeOption");
     }
 
+    get preferredColorScheme() {
+        return this.platform.themeLoader.preferredColorScheme;
+    } 
+
+    persistVariantToStorage(variant) {
+        this.platform.themeLoader.persistVariantToStorage(variant);
+    }
+
+    removeVariantFromStorage() {
+        this.platform.themeLoader.removeVariantFromStorage();
+    }
 }
 

src/platform/web/ui/session/settings/SettingsView.js

@@ -16,6 +16,7 @@ limitations under the License.
 
 import {TemplateView} from "../../general/TemplateView";
 import {KeyBackupSettingsView} from "./KeyBackupSettingsView.js"
+import {ColorSchemePreference} from "../../../ThemeLoader";
 
 export class SettingsView extends TemplateView {
     render(t, vm) {
@@ -142,38 +143,49 @@ export class SettingsView extends TemplateView {
     _themeOptions(t, vm) {
         const activeTheme = vm.activeTheme;
         const optionTags = [];
-        let isDarkSelected = null, isLightSelected = null; 
+        const isDarkSelected = vm.activeVariant === "dark";
+        const isLightSelected = vm.activeVariant === "light";
+        // 1. render the dropdown containing the themes
         for (const [name, details] of Object.entries(vm.themeMapping)) {
-            let isSelected = null;
+            const isSelected = (details.id ?? details.dark?.id ?? details.light?.id) === activeTheme;
-            if (details.id === activeTheme) {
-                isSelected = true;
-            }
-            else if (details.dark?.id === activeTheme) {
-                isSelected = true;
-                isDarkSelected = true;
-            }
-            else if (details.light?.id === activeTheme) {
-                isSelected = true;
-                isLightSelected = true;
-            }
             optionTags.push( t.option({ value: details.id ?? "", selected: isSelected} , name));
         }
         const select = t.select({
             onChange: (e) => {
                 const themeId = e.target.value;
-                vm.changeThemeOption(themeId)
+                if (themeId) {
-            }
+                    /* if the <option ..> has a value then this is not a theme
-        }, optionTags);
+                     that has dark and light default variants.
-        const radioButtons = t.form({
+                     remove any stored variant from localStorage.
-            className: { hidden: () => select.options[select.selectedIndex].value !== "" },
+                    */
-            onChange: (e) => {
+                    vm.removeVariantFromStorage();
-                const selectedThemeName = select.options[select.selectedIndex].text;
+                }
-                const colorScheme = e.target.value;
+                else {
-                const themeId = vm.themeMapping[selectedThemeName][colorScheme].id;
+                    const colorScheme = isDarkSelected ? "dark" : isLightSelected ? "light" : "default";
+                    // execute the radio-button callback so that the theme actually changes!
+                    // otherwise the theme would only change when another radio-button is selected.
+                    radioButtonCallback(colorScheme);
+                }
                 vm.changeThemeOption(themeId);
             }
+        }, optionTags);
+        // 2. render the radio-buttons used to choose variant
+        const radioButtonCallback = (colorScheme) => {
+            const selectedThemeName = select.options[select.selectedIndex].text;
+            vm.persistVariantToStorage(colorScheme);
+            if (colorScheme === "default") {
+                colorScheme = vm.preferredColorScheme === ColorSchemePreference.Dark ? "dark" : "light";
+            }
+            const themeId = vm.themeMapping[selectedThemeName][colorScheme].id;
+            vm.changeThemeOption(themeId);
+        };
+        const radioButtons = t.form({
+            className: { hidden: () => select.options[select.selectedIndex].value !== "" },
+            onChange: (e) => radioButtonCallback(e.target.value)
         },
         [
+            t.input({ type: "radio", name: "radio-chooser", value: "default", id: "default", checked: !(isDarkSelected || isLightSelected)}),
+            t.label({for: "default"}, "default"),
             t.input({ type: "radio", name: "radio-chooser", value: "dark", id: "dark", checked: isDarkSelected }),
             t.label({for: "dark"}, "dark"),
             t.input({ type: "radio", name: "radio-chooser", value: "light", id: "light", checked: isLightSelected }),