useDark
的原理是修改元素上的属性值(默认在html标签上添加class=“dark”),不涉及具体样式的修改,用户可以灵活的定义dark的样式。官方文档
1.基础使用方式
<template>
<button @click="() => toggleDark()">{{ isDark ? 'dark' : 'light' }}</button>
</template>
<script setup lang="ts">
const isDark = useDark();
const toggleDark = useToggle(isDark);
</script>
// dark样式示例
<style lang="scss">
// (推荐写在全局样式中)
html.dark {
background-color: #333;
}
</style>
2.Element-Plus实现暗黑模式
// main.ts
// ep 暗黑主题样式
import 'element-plus/theme-chalk/dark/css-vars.css';
<template>
<el-switch
v-model="isDark"
inline-prompt
active-text="dark"
size="large"
inactive-text="light"
@change="toggleDark"
/>
</template>
<script setup lang="ts">
const isDark = useDark();
const toggleDark = useToggle(isDark);
</script>