feat: init theming in empty layout

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>

packages/hoppscotch-app/pages/teams-invite.vue

@@ -23,18 +23,32 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
-import { ref } from "@nuxtjs/composition-api"
+import { defineComponent } from "@nuxtjs/composition-api"
 import { initializeFirebase } from "~/helpers/fb"
 import { currentUser$ } from "~/helpers/fb/auth"
 import { useReadonlyStream } from "~/helpers/utils/composables"
+
+export default defineComponent({
+  layout: "empty",
+  setup() {
+    return {
+      currentUser: useReadonlyStream(currentUser$, null),
+    }
+  },
+  data() {
+    return {
+      showLogin: false,
+      //  loading : false
+      //  error : null
+    }
+  },
+  beforeMount() {
     initializeFirebase()
-
+  },
-const currentUser = useReadonlyStream(currentUser$, null)
+  async mounted() {},
-
+  methods: {
-// const loading = ref(false)
+    joinTeam() {},
-// const error = ref(null)
+  },
-const showLogin = ref(false)
+})
-
-const joinTeam = () => {}
 </script>