less ugly appearance switch

.vitepress/config.mts

@@ -5,6 +5,7 @@ import { presetUno, presetAttributify, presetIcons } from "unocss";
 import { commitRef, meta } from "./constants";
 import { pwa } from "./pwa";
 import { generateMeta } from "./hooks/meta";
+import { fileURLToPath } from "url";
 
 export default defineConfig({
   title: "FMHY",
@@ -54,6 +55,16 @@ export default defineConfig({
       // Shut the fuck up
       chunkSizeWarningLimit: Infinity,
     },
+    resolve: {
+      alias: [
+				{
+					find: /^.*VPSwitchAppearance\.vue$/,
+					replacement: fileURLToPath(
+						new URL("./theme/components/ThemeSwitch.vue", import.meta.url),
+					),
+				},
+      ]
+    }
   },
   themeConfig: {
     search: {

.vitepress/theme/Layout.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import DefaultTheme from "vitepress/theme";
+import Sidebar from "./components/SidebarCard.vue";
+
+const { Layout } = DefaultTheme;
+</script>
+
+<template>
+  <Layout>
+    <template #sidebar-nav-after>
+      <Sidebar />
+    </template>
+    <template>
+    <Content />
+
+    </template>
+  </Layout>
+</template>

.vitepress/theme/components/ThemeSwitch.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { inject  } from "vue";
+import { useData } from "vitepress";
+
+import VPIconMoon from "vitepress/dist/client/theme-default/components/icons/VPIconMoon.vue";
+import VPIconSun from "vitepress/dist/client/theme-default/components/icons/VPIconSun.vue";
+
+const { isDark } = useData();
+
+const toggleAppearance = inject("toggle-appearance", () => {
+  isDark.value = !isDark.value;
+});
+</script>
+
+<template>
+  <button
+    type="button"
+    role="switch"
+    title="Toggle dark mode"
+    class="VPSwitchAppearance"
+    :aria-checked="isDark"
+    @click="toggleAppearance">
+    <ClientOnly>
+      <Transition name="fade" mode="out-in">
+        <VPIconSun v-if="!isDark" class="sun" />
+        <VPIconMoon v-else class="moon" />
+      </Transition>
+    </ClientOnly>
+  </button>
+</template>
+
+<style scoped>
+.VPSwitchAppearance {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 36px;
+  height: 36px;
+  color: var(--vp-c-text-2);
+  transition: color 0.5s;
+
+  &:hover {
+    color: var(--vp-c-text-1);
+    transition: color 0.25s;
+  }
+
+  & > :deep(svg) {
+    width: 20px;
+    height: 20px;
+    fill: currentColor;
+  }
+}
+</style>

.vitepress/theme/index.ts

@@ -2,16 +2,14 @@ import { h } from "vue";
 import { type Theme, inBrowser } from "vitepress";
 import DefaultTheme from "vitepress/theme";
 import Sidebar from "./components/SidebarCard.vue";
+import Layout from "./Layout.vue";
 import "./style.css";
 import "uno.css";
 
 // if (inBrowser) import("./pwa");
 
 export default {
-  Layout: () => {
-    return h(DefaultTheme.Layout, null, {
-      "sidebar-nav-after": () => h(Sidebar),
-    });
-  },
+  extends: DefaultTheme,
+  Layout: Layout,
   enhanceApp({ app, router, siteData }) {},
 } satisfies Theme;

.vitepress/vue-shim.d.ts

@@ -1,4 +1,4 @@
 declare module "*.vue" {
-  import Vue from "vue";
-  export default Vue;
+  const component: import("vue").Component;
+  export default component;
 }