<template>
  <div class="bg-background text-text flex flex-col min-h-screen transition" :class="{ dark: darkMode }">
    <UiHeader class="flex-none" />
    <NuxtPage class="p-4 sm:p-6 lg:p-8 grow" />
    <UiFooter class="flex-none" />
  </div>
</template>

<script setup lang="ts">
const colourMode = useColorMode();
const darkMode = computed(() => colourMode.value === 'dark');
</script>
