1 files changed, 41 insertions, 0 deletions
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>