From 3adc965dd09490b7efa1cce9f09b0a3b30970277 Mon Sep 17 00:00:00 2001
From: 简律纯 <hsiangnianian@outlook.com>
Date: Wed, 19 Apr 2023 17:30:39 +0800
Subject: ✨优化文档
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/app/ThemeSelect.vue | 41 +++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 docs/components/app/ThemeSelect.vue

(limited to 'docs/components/app/ThemeSelect.vue')

diff --git a/docs/components/app/ThemeSelect.vue b/docs/components/app/ThemeSelect.vue
new file mode 100644
index 0000000..158b965
--- /dev/null
+++ b/docs/components/app/ThemeSelect.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const colorMode = useColorMode()
+const onClick = () => {
+  const values = ['system', 'light', 'dark']
+  const index = values.indexOf(colorMode.preference)
+  const next = (index + 1) % values.length
+
+  colorMode.preference = values[next]
+}
+</script>
+
+<template>
+  <button aria-label="Color Mode" @click="onClick">
+    <ColorScheme placeholder="...">
+      <Icon v-if="colorMode.preference === 'dark'" name="uil:moon" />
+      <Icon v-else-if="colorMode.preference === 'light'" name="uil:sun" />
+      <Icon v-else name="uil:desktop" />
+    </ColorScheme>
+  </button>
+</template>
+
+<style lang="ts" scoped>
+css({
+  button: {
+    display: 'flex',
+    padding: '{space.4}',
+
+    color: '{color.gray.500}',
+    '@dark': {
+      color: '{color.gray.400}'
+    },
+
+    '&:hover': {
+      color: '{color.gray.700}',
+      '@dark': {
+        color: '{color.gray.200}',
+      }
+    },
+  }
+})
+</style>
-- 
cgit v1.2.3-70-g09d2

