next/app.vue

<script lang="ts" setup>
	import { theme } from "ant-design-vue";

	const { getSession, signIn } = useAuth();

	await getSession({ force: true });

	const { data } = await useAuth();

	const dop = 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: '#f14668',
				colorSuccess: '#2be396',
				colorWarning: '#face14',
				colorInfo: '#15c6e3',
				colorTextBase: darkBool ? '#fff' : '#101010',
			},
			algorithm: darkBool ? theme.darkAlgorithm : theme.defaultAlgorithm,
		}"
	>
		<template #renderEmpty>
			<a-typography-title> ¯\_(ツ)_/¯ </a-typography-title>
			<i> Nothing here but crickets. </i>
		</template>
		<NuxtLayout>
			<NuxtPage v-if="$loaded" />
			<div v-else>
				<a-skeleton-title />
				<a-skeleton />
				<a-skeleton />
			</div>
			<!-- <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>