Migration to Nuxt3

components/ThemeSwitch.vue

@@ -0,0 +1,29 @@
+<template>
+    <button class="rounded-full p-1 hover:bg-slate-200 dark:hover:bg-slate-700" @click="changeTheme">
+        <div class="w-5 h-5 flex items-center justify-center">
+            <div v-if="current_theme === 'light'">
+                <img src="~/assets/images/icons/moon.svg" alt="Dark theme" class="h-full w-full" />
+            </div>
+
+            <div v-if="current_theme === 'dark'">
+                <img src="~/assets/images/icons/sun.svg" alt="Light theme" class="invert h-full w-full" />
+            </div>
+        </div>
+    </button>
+</template>
+
+<script setup lang="ts">
+    import { ref } from "vue";
+
+    const current_theme = ref("");
+
+    onMounted(() => {
+        current_theme.value = getTheme();
+    })
+
+    function changeTheme() {
+        flipTheme();
+        current_theme.value = getTheme();
+        applyTheme(current_theme.value);
+    }
+</script>