From 0e08abc46f9f72bc6d427950aed6e29aa0815b1a Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Wed, 13 Oct 2021 17:00:56 +0530
Subject: [PATCH] feat: init theming in empty layout

---
 packages/hoppscotch-app/layouts/empty.vue     | 41 +++++++++++++++++++
 .../hoppscotch-app/pages/teams-invite.vue     | 34 ++++++++++-----
 2 files changed, 65 insertions(+), 10 deletions(-)

diff --git a/packages/hoppscotch-app/layouts/empty.vue b/packages/hoppscotch-app/layouts/empty.vue
index 5d3ae9c40..23e5674c6 100644
--- a/packages/hoppscotch-app/layouts/empty.vue
+++ b/packages/hoppscotch-app/layouts/empty.vue
@@ -1,3 +1,44 @@
 <template>
   <Nuxt />
 </template>
+
+<script lang="ts">
+import {
+  useContext,
+  onBeforeMount,
+  watch,
+  defineComponent,
+} from "@nuxtjs/composition-api"
+import { useSetting } from "~/newstore/settings"
+
+function updateThemes() {
+  const { $colorMode } = useContext() as any
+
+  // Apply theme updates
+  const themeColor = useSetting("THEME_COLOR")
+  const bgColor = useSetting("BG_COLOR")
+  const fontSize = useSetting("FONT_SIZE")
+
+  // Initially apply
+  onBeforeMount(() => {
+    document.documentElement.setAttribute("data-accent", themeColor.value)
+    $colorMode.preference = bgColor.value
+    document.documentElement.setAttribute("data-font-size", fontSize.value)
+  })
+
+  // Listen for updates
+  watch(themeColor, () =>
+    document.documentElement.setAttribute("data-accent", themeColor.value)
+  )
+  watch(bgColor, () => ($colorMode.preference = bgColor.value))
+  watch(fontSize, () =>
+    document.documentElement.setAttribute("data-font-size", fontSize.value)
+  )
+}
+
+export default defineComponent({
+  setup() {
+    updateThemes()
+  },
+})
+</script>
diff --git a/packages/hoppscotch-app/pages/teams-invite.vue b/packages/hoppscotch-app/pages/teams-invite.vue
index 1cd0c0eaa..f8958f143 100644
--- a/packages/hoppscotch-app/pages/teams-invite.vue
+++ b/packages/hoppscotch-app/pages/teams-invite.vue
@@ -23,18 +23,32 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref } from "@nuxtjs/composition-api"
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
 import { initializeFirebase } from "~/helpers/fb"
 import { currentUser$ } from "~/helpers/fb/auth"
 import { useReadonlyStream } from "~/helpers/utils/composables"
-initializeFirebase()
 
-const currentUser = useReadonlyStream(currentUser$, null)
-
-// const loading = ref(false)
-// const error = ref(null)
-const showLogin = ref(false)
-
-const joinTeam = () => {}
+export default defineComponent({
+  layout: "empty",
+  setup() {
+    return {
+      currentUser: useReadonlyStream(currentUser$, null),
+    }
+  },
+  data() {
+    return {
+      showLogin: false,
+      //  loading : false
+      //  error : null
+    }
+  },
+  beforeMount() {
+    initializeFirebase()
+  },
+  async mounted() {},
+  methods: {
+    joinTeam() {},
+  },
+})
 </script>