You can access the color mode helper by either calling useColorMode() or accessing $colorMode directly in your template. This helper has the following properties:
preference: Actual color-mode selected (can be 'system'), update it to change the user preferred color modevalue: Useful to know what color mode has been detected when $colorMode === 'system', you should not update itunknown: Useful to know if during SSR or Generate, we need to render a placeholderforced: Useful to know if the current color mode is forced by the current page (useful to hide the color picker)<template>
<div>
<h1>Color mode: {{ $colorMode.value }}</h1>
<select v-model="$colorMode.preference">
<option value="system">System</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="sepia">Sepia</option>
</select>
</div>
</template>
<script setup>
const colorMode = useColorMode()
console.log(colorMode.preference)
</script>
<style>
body {
background-color: #fff;
color: rgba(0,0,0,0.8);
}
.dark body {
background-color: #091a28;
color: #ebf4f1;
}
.sepia body {
background-color: #f1e7d0;
color: #433422;
}
</style>
colorMode.classSuffix option in your nuxt.config.ts to modify these class names. See the configuration section for more details.