useDark(); 如何设置isDark=false
useDark()
返回一个 Vue Ref 对象,你可以改变这个 Ref 对象的 value
属性来设置 Dark Mode。下面是如何设置 isDark = false
:
import { useDark } from '@vueuse/core'
const isDark = useDark()
isDark.value = false // 设置为 Light Mode
export default {
setup() {
return {
isDark
}
}
}
在这个例子中,我们首先调用 useDark()
创建了一个 isDark
响应式引用,然后通过 isDark.value = false
设置为 Light Mode。在你的组件中,你可以使用 isDark.value
来获取或设置当前的模式。
如果你想要在模板或用户交互中切换模式,你可以创建一个方法,比如:
import { useDark } from '@vueuse/core'
export default {
setup() {
const isDark = useDark()
function toggleMode() {
isDark.value = !isDark.value
}
return {
isDark,
toggleMode
}
}
}
然后在你的模板中:
<template>
<div :class="{ dark: isDark.value }">
<button @click="toggleMode">Switch theme</button>
</div>
</template>
点击按钮会切换 Dark Mode 和 Light Mode。