入门
强制颜色模式
学习如何在页面上强制使用特定颜色模式
你可以通过使用 definePageMeta 设置 colorMode 属性,在页面级别强制指定颜色模式:
pages/light.vue
<template>
<h1>此页面被强制为浅色模式</h1>
</template>
<script setup>
definePageMeta({
colorMode: 'light',
})
</script>
此功能非常适合通过将尚未准备好的页面设置为 colorMode: 'light' 来逐步为网站实现暗色模式。
我们建议隐藏或禁用页面上的颜色模式选择器,因为它无法更改当前页面的颜色模式,可以通过使用
$colorMode.forced 值来判断。