forked from vueuse/vueuse
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.vue
37 lines (30 loc) · 1.09 KB
/
demo.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
<script setup lang="ts">
import { useColorMode, useCycleList } from '@vueuse/core'
const mode = useColorMode({
omitAuto: false,
modes: {
contrast: 'dark contrast',
cafe: 'cafe',
},
})
const { next } = useCycleList(['dark', 'light', 'cafe', 'contrast', 'auto'], { initialValue: mode })
</script>
<template>
<button @click="next()">
<i v-if="mode === 'dark'" i-carbon-moon inline-block align-middle class="align-middle" />
<i v-if="mode === 'light'" i-carbon-sun inline-block align-middle class="align-middle" />
<i v-if="mode === 'cafe'" i-carbon-cafe inline-block align-middle class="align-middle" />
<i v-if="mode === 'contrast'" i-carbon-contrast inline-block align-middle class="align-middle" />
<i v-if="mode === 'auto'" i-carbon-laptop inline-block align-middle class="align-middle" />
<span class="ml-2 capitalize">{{ mode }}</span>
</button>
<span class="p-4 opacity-50">← Click to change the color mode</span>
</template>
<style>
html.cafe {
filter: sepia(0.9) hue-rotate(315deg) brightness(0.9);
}
html.contrast {
filter: contrast(2);
}
</style>