Merge remote-tracking branch 'origin/main' into refactor/ui

components/smart/ColorModePicker.vue

@@ -15,15 +15,31 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import Vue from "vue"
+import {
+  applySetting,
+  getSettingSubject,
+  HoppBgColor,
+  HoppBgColors,
+} from "~/newstore/settings"
+
+export default Vue.extend({
   data() {
     return {
-      colors: ["system", "light", "dark", "black"],
+      colors: HoppBgColors,
+    }
+  },
+  subscriptions() {
+    return {
+      activeColor: getSettingSubject("BG_COLOR"),
     }
   },
   methods: {
-    getIcon(color) {
+    setBGMode(color: HoppBgColor) {
+      applySetting("BG_COLOR", color)
+    },
+    getIcon(color: HoppBgColor) {
       switch (color) {
         case "system":
           return "desktop_windows"
@@ -38,5 +54,5 @@ export default {
       }
     },
   },
-}
+})
 </script>