feat: theme syncing

components/smart/AccentModePicker.vue

@@ -38,40 +38,37 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
-import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
+import Vue from "vue"
+import {
+  HoppAccentColors,
+  HoppAccentColor,
+  getSettingSubject,
+  settingsStore,
+  applySetting,
+} from "~/newstore/settings"
 
-export default {
+export default Vue.extend({
   data() {
     return {
-      active: getLocalConfig("THEME_COLOR") || "green",
+      accentColors: HoppAccentColors,
-      accentColors: [
+      active: settingsStore.value.THEME_COLOR,
-        "blue",
-        "green",
-        "teal",
-        "indigo",
-        "purple",
-        "orange",
-        "pink",
-        "red",
-        "yellow",
-      ],
     }
   },
-  watch: {
+  subscriptions() {
-    active(color) {
+    return {
-      setLocalConfig("THEME_COLOR", color)
+      active: getSettingSubject("THEME_COLOR"),
-    },
+    }
   },
-
   methods: {
-    setActiveColor(color) {
+    setActiveColor(color: HoppAccentColor) {
       document.documentElement.setAttribute("data-accent", color)
-      this.active = color
+
+      applySetting("THEME_COLOR", color)
     },
-    capitalized(color) {
+    capitalized(color: HoppAccentColor) {
       return `${color.charAt(0).toUpperCase()}${color.slice(1)}`
     },
   },
-}
+})
 </script>

components/smart/ColorModePicker.vue

@@ -3,11 +3,8 @@
     <label>
       <ColorScheme placeholder="..." tag="span">
         {{ $t("background") }}:
-        {{
+        {{ activeColor.charAt(0).toUpperCase() + activeColor.slice(1) }}
-          $colorMode.preference.charAt(0).toUpperCase() +
+        <span v-if="activeColor === 'system'">
-          $colorMode.preference.slice(1)
-        }}
-        <span v-if="$colorMode.preference === 'system'">
           ({{ $colorMode.value }} mode detected)
         </span>
       </ColorScheme>
@@ -33,10 +30,10 @@
           hover:text-secondary
         "
         :class="[
-          { 'bg-primary': color === $colorMode.preference },
+          { 'bg-primary': color === activeColor },
-          { 'text-accent hover:text-accent': color === $colorMode.value },
+          { 'text-accent hover:text-accent': color === activeColor },
         ]"
-        @click="$colorMode.preference = color"
+        @click="setBGMode(color)"
       >
         <i class="material-icons">{{ getIcon(color) }}</i>
       </span>
@@ -44,15 +41,31 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+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"
@@ -67,5 +80,5 @@ export default {
       }
     },
   },
-}
+})
 </script>

layouts/default.vue

@@ -14,21 +14,24 @@
 </template>
 
 <script>
-import {
+import { setupLocalPersistence } from "~/newstore/localpersistence"
-  setupLocalPersistence,
-  getLocalConfig,
-} from "~/newstore/localpersistence"
 import { performMigrations } from "~/helpers/migrations"
 import { initUserInfo } from "~/helpers/teams/BackendUserInfo"
 import { registerApolloAuthUpdate } from "~/helpers/apollo"
 import { initializeFirebase } from "~/helpers/fb"
+import { getSettingSubject } from "~/newstore/settings"
 
 export default {
   beforeMount() {
     registerApolloAuthUpdate()
 
-    const color = getLocalConfig("THEME_COLOR") || "green"
+    this.$subscribeTo(getSettingSubject("THEME_COLOR"), (color) => {
-    document.documentElement.setAttribute("data-accent", color)
+      document.documentElement.setAttribute("data-accent", color)
+    })
+
+    this.$subscribeTo(getSettingSubject("BG_COLOR"), (color) => {
+      this.$colorMode.preference = color
+    })
   },
   async mounted() {
     performMigrations()
@@ -46,13 +49,13 @@ export default {
     if (workbox) {
       workbox.addEventListener("installed", (event) => {
         if (event.isUpdate) {
-          this.$toast.show(this.$t("new_version_found"), {
+          this.$toast.show(this.$t("new_version_found").toString(), {
             icon: "info",
             duration: 0,
             theme: "toasted-primary",
             action: [
               {
-                text: this.$t("reload"),
+                text: this.$t("reload").toString(),
                 onClick: (_, toastObject) => {
                   toastObject.goAway(0)
                   window.location.reload()

newstore/localpersistence.ts

@@ -3,7 +3,14 @@
 import clone from "lodash/clone"
 import assign from "lodash/assign"
 import eq from "lodash/eq"
-import { settingsStore, bulkApplySettings, defaultSettings } from "./settings"
+import {
+  settingsStore,
+  bulkApplySettings,
+  defaultSettings,
+  applySetting,
+  HoppAccentColor,
+  HoppBgColor,
+} from "./settings"
 import {
   restHistoryStore,
   graphqlHistoryStore,
@@ -55,6 +62,20 @@ function checkAndMigrateOldSettings() {
     delete vuexData.postwoman.environments
     window.localStorage.setItem("vuex", JSON.stringify(vuexData))
   }
+
+  if (window.localStorage.getItem("THEME_COLOR")) {
+    const themeColor = window.localStorage.getItem("THEME_COLOR")
+    applySetting("THEME_COLOR", themeColor as HoppAccentColor)
+
+    window.localStorage.removeItem("THEME_COLOR")
+  }
+
+  if (window.localStorage.getItem("nuxt-color-mode")) {
+    const color = window.localStorage.getItem("nuxt-color-mode") as HoppBgColor
+    applySetting("BG_COLOR", color)
+
+    window.localStorage.removeItem("BG_COLOR")
+  }
 }
 
 function setupSettingsPersistence() {

newstore/settings.ts

@@ -4,7 +4,46 @@ import { Observable } from "rxjs"
 import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
 import type { KeysMatching } from "~/types/ts-utils"
 
-export const defaultSettings = {
+export const HoppBgColors = ["system", "light", "dark", "black"] as const
+
+export type HoppBgColor = typeof HoppBgColors[number]
+
+export const HoppAccentColors = [
+  "blue",
+  "green",
+  "teal",
+  "indigo",
+  "purple",
+  "orange",
+  "pink",
+  "red",
+  "yellow",
+] as const
+
+export type HoppAccentColor = typeof HoppAccentColors[number]
+
+export type SettingsType = {
+  syncCollections: boolean
+  syncHistory: boolean
+  syncEnvironments: boolean
+
+  SCROLL_INTO_ENABLED: boolean
+  PROXY_ENABLED: boolean
+  PROXY_URL: string
+  PROXY_KEY: string
+  EXTENSIONS_ENABLED: boolean
+  EXPERIMENTAL_URL_BAR_ENABLED: boolean
+  URL_EXCLUDES: {
+    auth: boolean
+    httpUser: boolean
+    httpPassword: boolean
+    bearerToken: boolean
+  }
+  THEME_COLOR: HoppAccentColor
+  BG_COLOR: HoppBgColor
+}
+
+export const defaultSettings: SettingsType = {
   syncCollections: true,
   syncHistory: true,
   syncEnvironments: true,
@@ -21,10 +60,10 @@ export const defaultSettings = {
     httpPassword: true,
     bearerToken: true,
   },
+  THEME_COLOR: "green",
+  BG_COLOR: "system",
 }
 
-export type SettingsType = typeof defaultSettings
-
 const validKeys = Object.keys(defaultSettings)
 
 const dispatchers = defineDispatchers({