feat: store appearance settings globally across accounts

As discussed in https://github.com/status-im/status-desktop/issues/2144#issuecomment-817791172 and https://github.com/status-im/status-desktop/discussions/2145, it's no longer desired
to have different appearance settings across multiple accounts.
Instead, the appearance setting should apply globally to all accounts,
essentially bypassing the individual setting stored in status-go.

This commit introduces a new global setting called `theme` which,
at the time of introducing this commit, can be either:

0 => Light
1 => Dark
2 => System

Because those enum values matches the `AppearanceContainer.Theme` enum,
this commit removes it completely and simply relies on QML's built-in
`Universal.[Light|Dark|System] variants respectively.

Closes #2144

ui/app/AppLayouts/Profile/Sections/AppearanceContainer.qml

@@ -21,14 +21,8 @@ ScrollView {
     }
 
     function updateTheme(theme) {
-        let themeStr = Universal.theme === Universal.Dark ? "dark" : "light"
-        if (theme === AppearanceContainer.Theme.Light) {
-            themeStr = "light"
-        } else if (theme === AppearanceContainer.Theme.Dark) {
-            themeStr = "dark"
-        }
-        profileModel.changeTheme(theme)
-        Style.changeTheme(themeStr)
+        globalSettings.theme = theme
+        Style.changeTheme(theme)
     }
 
     function updateFontSize(fontSize) {
@@ -254,10 +248,10 @@ ScrollView {
                 image.height: 128
                 //% "Light"
                 control.text: qsTrId("light")
-                control.checked: profileModel.profile.appearance === AppearanceContainer.Theme.Light
+                control.checked: globalSettings.theme === Universal.Light
                 onRadioCheckedChanged: {
                     if (checked) {
-                        root.updateTheme(AppearanceContainer.Theme.Light)
+                        root.updateTheme(Universal.Light)
                     }
                 }
             }
@@ -270,10 +264,10 @@ ScrollView {
                 image.height: 128
                 //% "Dark"
                 control.text: qsTrId("dark")
-                control.checked: profileModel.profile.appearance === AppearanceContainer.Theme.Dark
+                control.checked: globalSettings.theme === Universal.Dark
                 onRadioCheckedChanged: {
                     if (checked) {
-                        root.updateTheme(AppearanceContainer.Theme.Dark)
+                        root.updateTheme(Universal.Dark)
                     }
                 }
             }
@@ -286,22 +280,13 @@ ScrollView {
                 image.height: 128
                 //% "System"
                 control.text: qsTrId("system")
-                control.checked: profileModel.profile.appearance === AppearanceContainer.Theme.System
+                control.checked: globalSettings.theme === Universal.System
                 onRadioCheckedChanged: {
                     if (checked) {
-                        root.updateTheme(AppearanceContainer.Theme.System)
+                        root.updateTheme(Universal.System)
                     }
                 }
             }
-
-            // For the case where the theme was finally loaded by status-go in init(),
-            // update the theme in qml
-            Connections {
-                target: profileModel
-                onProfileChanged: {
-                    root.updateTheme(profileModel.profile.appearance)
-                }
-            }
         }
     }
 }

ui/app/AppMain.qml

@@ -150,13 +150,6 @@ RowLayout {
         property bool compatibilityMode: true
     }
 
-    Settings {
-        id: globalSettings
-        category: "global"
-        fileName: profileModel.globalSettingsFile
-        property string locale: "en"
-    }
-
     ErrorSound {
         id: errorSound
     }

ui/imports/Style.qml

@@ -1,6 +1,7 @@
 pragma Singleton
 
 import QtQuick 2.13
+import QtQuick.Controls.Universal 2.12
 import "./Themes"
 
 QtObject {
@@ -10,11 +11,10 @@ QtObject {
 
     property var changeTheme: function (theme) {
         switch (theme) {
-            case "light": current = lightTheme; break;
-            case "dark": current = darkTheme; break;
+            case Universal.Light: current = lightTheme; break;
+            case Universal.Dark: current = darkTheme; break;
             default: current = lightTheme; console.log('Unknown theme. Valid themes are "light" and "dark"')
         }
-
     }
 
     property var changeFontSize: function (fontSize) {

ui/main.qml

@@ -23,6 +23,14 @@ ApplicationWindow {
 
     Universal.theme: Universal.System
 
+    Settings {
+        id: globalSettings
+        category: "global"
+        fileName: profileModel.globalSettingsFile
+        property string locale: "en"
+        property int theme: 2
+    }
+
     id: applicationWindow
     minimumWidth: 900
     minimumHeight: 600
@@ -87,9 +95,7 @@ ApplicationWindow {
     }
 
     Component.onCompleted: {
-        // Change the theme to the system theme (dark/light) until we get the
-        // user's saved setting from status-go (after login)
-        Style.changeTheme(Universal.theme === Universal.Dark ? "dark" : "light")
+        Style.changeTheme(globalSettings.theme)
         setX(Qt.application.screens[0].width / 2 - width / 2);
         setY(Qt.application.screens[0].height / 2 - height / 2);
     }