Usage
Basic Usage
Learn how to use the color mode composable
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)
Example
pages/index.vue
<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>
You can configure the
colorMode.classSuffix option in your nuxt.config.ts to modify these class names. See the configuration section for more details.Tailwind CSS
Since this module adds a .dark class to the <html> element, you can use it with Tailwind CSS dark mode.
Tailwind CSS v4
In Tailwind CSS v4, you need to override the dark variant to use the .dark class instead of the default prefers-color-scheme media query. Add this to your CSS file:
assets/css/main.css
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
You can also create custom variants for any additional color modes:
assets/css/main.css
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
@custom-variant sepia (&:where(.sepia, .sepia *));
Then use the variants in your templates:
<div class="bg-white dark:bg-gray-900 sepia:bg-amber-50">
<h1 class="text-gray-900 dark:text-white sepia:text-amber-900">
Hello world
</h1>
</div>
Tailwind CSS v3
In Tailwind CSS v3, set darkMode to 'selector' (v3.4.1+) or 'class' in your tailwind.config.js:
tailwind.config.js
export default {
darkMode: 'selector',
}
If you are using
@nuxtjs/tailwindcss v6 with Tailwind CSS v3, this is configured automatically.