chore: split app to commons and web (squash commit)

packages/hoppscotch-common/src/modules/theming.ts

@@ -0,0 +1,90 @@
+import { usePreferredDark, useStorage } from "@vueuse/core"
+import { App, computed, reactive, Ref, watch } from "vue"
+import type { HoppBgColor } from "~/newstore/settings"
+import { useSettingStatic } from "@composables/settings"
+import { HoppModule } from "."
+import { hoppLocalConfigStorage } from "~/newstore/localpersistence"
+
+export type HoppColorMode = {
+  preference: HoppBgColor
+  value: Readonly<Exclude<HoppBgColor, "system">>
+}
+
+const applyColorMode = (app: App) => {
+  const [settingPref] = useSettingStatic("BG_COLOR")
+
+  const currentLocalPreference = useStorage<HoppBgColor>(
+    "nuxt-color-mode",
+    "system",
+    hoppLocalConfigStorage,
+    {
+      listenToStorageChanges: true,
+    }
+  )
+
+  const systemPrefersDark = usePreferredDark()
+
+  const selection = computed<Exclude<HoppBgColor, "system">>(() => {
+    if (currentLocalPreference.value === "system") {
+      return systemPrefersDark.value ? "dark" : "light"
+    } else return currentLocalPreference.value
+  })
+
+  watch(
+    selection,
+    (newSelection) => {
+      document.documentElement.setAttribute("class", newSelection)
+    },
+    { immediate: true }
+  )
+
+  watch(
+    settingPref,
+    (newPref) => {
+      currentLocalPreference.value = newPref
+    },
+    { immediate: true }
+  )
+
+  const exposed: HoppColorMode = reactive({
+    preference: currentLocalPreference,
+    // Marking as readonly to not allow writes to this ref
+    value: selection as Readonly<Ref<Exclude<HoppBgColor, "system">>>,
+  })
+
+  app.provide("colorMode", exposed)
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const applyAccentColor = (_app: App) => {
+  const [pref] = useSettingStatic("THEME_COLOR")
+
+  watch(
+    pref,
+    (newPref) => {
+      document.documentElement.setAttribute("data-accent", newPref)
+    },
+    { immediate: true }
+  )
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const applyFontSize = (_app: App) => {
+  const [pref] = useSettingStatic("FONT_SIZE")
+
+  watch(
+    pref,
+    (newPref) => {
+      document.documentElement.setAttribute("data-font-size", newPref)
+    },
+    { immediate: true }
+  )
+}
+
+export default <HoppModule>{
+  onVueAppInit(app) {
+    applyColorMode(app)
+    applyAccentColor(app)
+    applyFontSize(app)
+  },
+}