Usage
Force Color Mode
Learn how to force a specific color mode on a page
You can force the color mode at the page level by setting the colorMode property using definePageMeta:
pages/light.vue
<template>
<h1>This page is forced with light mode</h1>
</template>
<script setup>
definePageMeta({
colorMode: 'light',
})
</script>
This feature is perfect for implementing dark mode to a website incrementally by setting the not-ready pages to colorMode: 'light'.
We recommend to hide or disable the color mode picker on the page since it won't be able to change the current page color mode, using
$colorMode.forced value.