fix: embeds system theme (#3659)

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>

packages/hoppscotch-common/src/components/share/templates/Embeds.vue

@@ -1,28 +1,28 @@
 <template>
   <div
     class="flex flex-col p-4 border rounded border-dividerDark"
-    :class="[embedColours]"
+    :class="embedColours"
   >
-    <div class="flex items-stretch space-x-2" :class="[embedColours]">
+    <div class="flex items-stretch space-x-2">
       <span
         class="flex items-center flex-1 min-w-0 border rounded"
-        :class="[embedColours]"
+        :class="embedColours"
       >
         <span
           class="flex max-w-[4rem] rounded-l h-full items-center justify-center border-r text-tiny"
-          :class="[embedColours]"
+          :class="embedColours"
         >
           <span class="px-3 truncate text-xs">
             {{ method }}
           </span>
         </span>
-        <span class="px-3 truncate" :class="[embedColours]">
+        <span class="px-3 truncate">
           {{ endpoint }}
         </span>
       </span>
       <button
         class="flex items-center justify-center flex-shrink-0 px-3 py-2 font-semibold border rounded"
-        :class="[embedColours]"
+        :class="embedColours"
       >
         {{ t("action.send") }}
       </button>
@@ -38,7 +38,6 @@
         class="p-2"
         :class="[
           {
-            embedColours,
             'border-b ':
               embedOptions.tabs.filter((tab) => tab.enabled)[0]?.value ===
               option.value,
@@ -53,10 +52,10 @@
 </template>
 
 <script lang="ts" setup>
-import { useVModel } from "@vueuse/core"
+import { usePreferredDark, useVModel } from "@vueuse/core"
 import { computed } from "vue"
+
 import { useI18n } from "~/composables/i18n"
-import { useSetting } from "~/composables/settings"
 
 type Tabs = "parameters" | "body" | "headers" | "authorization"
 
@@ -84,19 +83,20 @@ const noActiveTab = computed(() => {
   return embedOptions.value.tabs.every((tab) => !tab.enabled)
 })
 
-const systemTheme = useSetting("BG_COLOR")
+const systemPrefersDark = usePreferredDark()
 
 const embedColours = computed(() => {
-  const theme = embedOptions.value.theme
+  const { theme } = embedOptions.value
 
-  const darkThemeColours = "bg-dark-800 text-white !border-dark-50"
+  const darkThemeClasses = "bg-dark-800 text-white !border-dark-50"
-  const lightThemeColours = "bg-white text-black !border-white-50"
+  const lightThemeClasses = "bg-white text-black !border-white-50"
 
-  if (theme === "dark") {
+  const colorThemeMap = {
-    return darkThemeColours
+    light: lightThemeClasses,
-  } else if (theme === "light") {
+    dark: darkThemeClasses,
-    return lightThemeColours
+    system: systemPrefersDark.value ? darkThemeClasses : lightThemeClasses,
   }
-  return systemTheme.value === "light" ? lightThemeColours : darkThemeColours
+
+  return colorThemeMap[theme]
 })
 </script>

packages/hoppscotch-common/src/pages/e/_id.vue

@@ -83,7 +83,7 @@ watch(
           applySetting("BG_COLOR", "dark")
         } else if (parsedProperties.theme === "light") {
           applySetting("BG_COLOR", "light")
-        } else if (parsedProperties.theme === "auto") {
+        } else if (parsedProperties.theme === "system") {
           applySetting("BG_COLOR", "system")
         }
         properties.value = parsedProperties.options