shotgun/site/src/App.vue

<template>
	<v-app :theme="theme">
		<v-app-bar :elevation="2">
			<v-app-bar-title>Shotgun</v-app-bar-title>
			<template #append>
				<v-btn :icon="themeIcon" @click="toggleDark()"></v-btn>
			</template>
		</v-app-bar>
		<v-main>
			<TheLanding />
		</v-main>
	</v-app>
</template>

<script setup lang="ts">
import {
	useDark,
	useToggle,
} from '@vueuse/core';
import { computed } from 'vue';

const dark = useDark();
const toggleDark = useToggle(dark);

const theme = computed(() => dark.value ? 'dark' : 'light')
const themeIcon = computed(() => dark.value ? 'mdi-moon-waxing-crescent' : 'mdi-white-balance-sunny')
</script>