fix light/dark theme not currectly initializing on shared report, unify logic

Author: Onatcer

resources/js/Components/AuthenticationCard.vue

@@ -1,13 +1,9 @@
 <script setup lang="ts">
-import { onMounted, watch } from "vue";
-import { theme } from "@/utils/theme.js";
+import { onMounted } from "vue";
+import { useTheme } from "@/utils/theme.js";
 
 onMounted(async () => {
-    document.documentElement.classList.add(theme.value);
-    watch(theme, (newTheme, oldTheme) => {
-        document.documentElement.classList.remove(oldTheme);
-        document.documentElement.classList.add(newTheme);
-    });
+    useTheme()
 });
 </script>
 

resources/js/Layouts/AppLayout.vue

@@ -20,7 +20,7 @@ import {
 import NavigationSidebarItem from '@/Components/NavigationSidebarItem.vue';
 import UserSettingsIcon from '@/Components/UserSettingsIcon.vue';
 import MainContainer from '@/packages/ui/src/MainContainer.vue';
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref } from "vue";
 import NotificationContainer from '@/Components/NotificationContainer.vue';
 import { initializeStores, refreshStores } from '@/utils/init';
 import {
@@ -31,13 +31,13 @@ import {
     canViewProjects, canViewReport,
     canViewTags,
 } from '@/utils/permissions';
-import {isBillingActivated, isInvoicingActivated} from '@/utils/billing';
+import { isBillingActivated, isInvoicingActivated } from '@/utils/billing';
 import type { User } from '@/types/models';
 import { ArrowsRightLeftIcon } from '@heroicons/vue/16/solid';
 import { fetchToken, isTokenValid } from '@/utils/session';
 import UpdateSidebarNotification from '@/Components/UpdateSidebarNotification.vue';
 import BillingBanner from '@/Components/Billing/BillingBanner.vue';
-import { theme } from "@/utils/theme";
+import { useTheme } from "@/utils/theme";
 
 defineProps({
     title: String,
@@ -47,12 +47,7 @@ const showSidebarMenu = ref(false);
 const isUnloading = ref(false);
 onMounted(async () => {
 
-    document.documentElement.classList.add(theme.value);
-    watch(theme, (newTheme, oldTheme) => {
-        document.documentElement.classList.remove(oldTheme);
-        document.documentElement.classList.add(newTheme);
-    });
-
+    useTheme()
     // make sure that the initial requests are only loaded once, this can be removed once we move away from inertia
     if (window.initialDataLoaded !== true) {
         window.initialDataLoaded = true;

resources/js/Pages/SharedReport.vue

@@ -14,6 +14,7 @@ import { api } from '@/packages/api/src';
 import { getRandomColorWithSeed } from '@/packages/ui/src/utils/color';
 import { useReportingStore } from '@/utils/useReporting';
 import { Head } from '@inertiajs/vue3';
+import { useTheme } from "@/utils/theme";
 
 const sharedSecret = ref<string | null>(null);
 
@@ -136,6 +137,10 @@ function getGroupLabel(key: string) {
         return option.value === key;
     })?.label;
 }
+onMounted(async () => {
+    useTheme();
+})
+
 </script>
 
 <template>

resources/js/utils/theme.ts

@@ -22,4 +22,12 @@ const theme = computed(() => {
     return themeSetting.value
 });
 
-export { type themeOption, themeSetting, theme };
+function useTheme() {
+    document.documentElement.classList.add(theme.value);
+    watch(theme, (newTheme, oldTheme) => {
+        document.documentElement.classList.remove(oldTheme);
+        document.documentElement.classList.add(newTheme);
+    });
+}
+
+export { type themeOption, themeSetting, theme, useTheme };