initial

components/layout/LayoutThemeToggle.vue

@@ -0,0 +1,52 @@
+<template>
+  <button
+    @click="toggleTheme"
+    :class="[$attrs.class, $style.button, { [$style.visible]: visible }]"
+  >
+    <ClientOnly>
+      <IconsMoon fill="currentColor" width="32" height="32" v-if="isDark" />
+      <IconsSun fill="currentColor" width="32" height="32" v-if="!isDark" />
+    </ClientOnly>
+  </button>
+</template>
+
+<script lang="ts" setup>
+const visible = ref(false);
+
+onMounted(() => {
+  visible.value = true;
+});
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  methods: {
+    toggleTheme() {
+      this.$colorMode.preference =
+        this.$colorMode.preference === "dark" ? "light" : "dark";
+    },
+  },
+  computed: {
+    isDark() {
+      return this.$colorMode.preference === "dark";
+    },
+  },
+});
+</script>
+
+<style lang="scss" module>
+.button {
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transform: scale(0) rotate(180deg);
+  transition: all 0.25s ease-out;
+
+  &.visible {
+    transform: scale(1) rotate(0);
+  }
+
+  &:hover {
+    color: var(--color-text);
+  }
+}
+</style>