VueUse useColorMode 皮肤颜色切换

VueUse useColorMode 皮肤颜色切换并可以在下次打开保持状态，比如可以把网页设置成深色模式、高亮模式等，实现原理是在html标签上加上class样式的名称，需要你自己实现各种模式下的样式。

代码示例

<template>
   <div>
    <button @click="next()">
    <i v-if="state === 'dark'"   ></i>
    <i v-if="state === 'light'"  ></i>
    <i v-if="state === 'cafe'"  ></i>
    <i v-if="state === 'contrast'"></i> 
    <span>{{ state }}</span>
  </button> 
  <span> ← 点击切换颜色模式</span>
   </div>
</template>
<script setup lang="ts">
import { useColorMode, useCycleList } from '@vueuse/core'
import { watchEffect } from 'vue'

const mode = useColorMode({
  emitAuto: true,
  modes: {
    contrast: 'dark contrast',
    cafe: 'cafe',
  },
})

const { state, next } = useCycleList(['dark', 'light', 'cafe'], { initialValue: mode })

watchEffect(() => mode.value = state.value as any)
 
</script>
<style scoped>
.docker{
    padding: 20px;
    background-color: #eeee;
} 
</style>
<style   lang="scss"> 
 //这里需要自己实现各个模式下的样式
 html.cafe {
   filter: sepia(0.9) hue-rotate(315deg) brightness(0.9);
 }
 
 html.contrast {
   filter: contrast(2);
 }
 html.dark {
  
   .dock{
    background-color: #111;
    .docker{
      background-color: #333;
    }
   }
 }
</style>

在线例子

例子