npx nuxt@latest module add tailwindcss color-mode

    

      export default defineNuxtConfig({
  modules: [
    '@nuxtjs/color-mode',
    '@nuxtjs/tailwindcss'
  ]
});

    

      <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()
</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>

    

      <template>
    <div class="bg-white dark:bg-black">
        <h1 class="text-black dark:text-white">Hello World!</h1>
        <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 x2
            </h1>
        </div>
    </div>
</template>