feat(projects): 新增网址导航页面

src/components/custom/ThemeSwitch/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="flex-center w-40px h-40px text-14px hover:text-primary cursor-pointer" @click="toggleDarkMode">
+    <icon-mdi-moon-waning-crescent v-if="dark" />
+    <icon-mdi-white-balance-sunny v-else />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { watch } from 'vue';
+import { useBoolean } from '@/hooks';
+
+interface Props {
+  /** 暗黑模式 */
+  dark?: boolean;
+}
+
+interface Emits {
+  (e: 'update', darkMode: boolean): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  dark: false
+});
+
+const emit = defineEmits<Emits>();
+
+const { bool: darkMode, setBool: setDarkMode, toggle: toggleDarkMode } = useBoolean(props.dark);
+
+watch(
+  () => props.dark,
+  newValue => {
+    setDarkMode(newValue);
+  }
+);
+watch(darkMode, newValue => {
+  emit('update', newValue);
+});
+</script>
+<style scoped></style>

src/components/custom/index.ts

@@ -5,5 +5,6 @@ import ChromeTab from './ChromeTab/index.vue';
 import BetterScroll from './BetterScroll/index.vue';
 import WebSiteLink from './WebSiteLink/index.vue';
 import GithubLink from './GithubLink/index.vue';
+import ThemeSwitch from './ThemeSwitch/index.vue';
 
-export { CountTo, IconClose, ButtonTab, ChromeTab, BetterScroll, WebSiteLink, GithubLink };
+export { CountTo, IconClose, ButtonTab, ChromeTab, BetterScroll, WebSiteLink, GithubLink, ThemeSwitch };