perf(pages): import vue-recaptcha on a per-page basis

app.vue

@@ -1,26 +1,75 @@
 <script lang="ts" setup>
-import { theme } from 'ant-design-vue';
-import { IUser } from './models/user';
-
-  const {data: user}: any = await useApiFetch("/auth/session")
-  provide("dark", user?.profile?.nightMode || false)
-
+	import { theme } from "ant-design-vue";
+	import { IUser } from "./models/user";
 
+	const dop = useAuth().data?.value as any;
+	let darkBool = dop?.user?.profile?.nightMode || false;
+	provide("user", ref(dop?.user || null));
+	provide("dark", darkBool);
+	useHead({
+		bodyAttrs: {
+			"data-theme": computed(() => {
+				return darkBool ? "dark" : undefined;
+			}).value,
+		},
+	});
+	let loaded = ref<boolean>(false);
+	provide("loaded", loaded);
+	// let loaded = ref<boolean[]>([]);
+	// provide("loaded", {
+	// 	loaded,
+	// 	pushState() {
+	// 		loaded.value.push(false)
+	// 	},
+	// 	flipLast() {
+	// 		loaded.value[ loaded.value.length ] = true
+	// 	}
+	// });
 </script>
 <template>
-  <a-config-provider :theme="{
-  token: {
-    colorPrimary: '#ff3c8e',
-    colorSuccess: '#2be396',
-    colorWarning: '#face14',
-    colorInfo: '#17e3ff'
-  },
-  algorithm: ((user as IUser)?.profile?.nightMode || false) ? theme.darkAlgorithm : theme.defaultAlgorithm
-}">
-  
-  <NuxtLayout>
-    <NuxtPage/>
-    <!-- <NuxtWelcome /> -->
-  </NuxtLayout>
-  </a-config-provider>
+	<a-config-provider
+		:theme="{
+			token: {
+				colorPrimary: '#ff2883',
+				colorSuccess: '#2be396',
+				colorWarning: '#face14',
+				colorInfo: '#15c6e3',
+				colorTextBase: darkBool ? '#fff' : '#101010',
+			},
+			algorithm: darkBool ? theme.darkAlgorithm : theme.defaultAlgorithm,
+		}"
+	>
+		<NuxtLayout>
+			<NuxtPage />
+			<!-- <NuxtWelcome /> -->
+		</NuxtLayout>
+	</a-config-provider>
 </template>
+<style>
+	body[data-theme="dark"],
+	body[data-theme="dark"] .alayhead {
+		background-color: #141414;
+		color: #fff;
+	}
+
+	html {
+		background: #f5f5f5;
+	}
+
+	html,
+	body {
+		height: 100%;
+	}
+
+	html:has(body[data-theme="dark"]) {
+		background-color: #141414 !important;
+	}
+
+	body {
+		margin: 0px !important;
+	}
+
+	body:not([data-theme="dark"]) .alayhead {
+		background-color: #f5f5f5 !important;
+	}
+</style>