61 lines
1.2 KiB
Vue
61 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
const colorMode = useColorMode();
|
|
|
|
const isDark = computed({
|
|
get() {
|
|
return colorMode.value === "dark";
|
|
},
|
|
set() {
|
|
colorMode.preference = colorMode.value === "dark" ? "light" : "dark";
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="pb-1.5 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center"
|
|
>
|
|
<h1 class="text-2xl sm:text-4xl font-bold">Simple QRCode</h1>
|
|
|
|
<ClientOnly>
|
|
<div class="flex gap-x-1 animate-fadeIn">
|
|
<UButton
|
|
color="neutral"
|
|
variant="ghost"
|
|
icon="i-bi-git"
|
|
aria-label="Git repo"
|
|
class="w-8 h-8"
|
|
target="_blank"
|
|
to="https://git.pihkaal.me/simple-qr"
|
|
/>
|
|
|
|
<UButton
|
|
:icon="
|
|
isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'
|
|
"
|
|
color="neutral"
|
|
variant="ghost"
|
|
aria-label="Theme"
|
|
class="w-8 h-8"
|
|
@click="isDark = !isDark"
|
|
/>
|
|
</div>
|
|
</ClientOnly>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.animate-fadeIn {
|
|
animation: fadeIn 200ms ease-in-out forwards;
|
|
}
|
|
</style>
|