-
Notifications
You must be signed in to change notification settings - Fork 151
/
ThemeSelect.vue
41 lines (36 loc) · 914 Bytes
/
ThemeSelect.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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>