feat: theme syncing

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({