Nuxt UI v3-alpha has been released!

Try it out

ColorModeSelect

SelectMenuGitHub
A Select to switch between color mode.

Usage

You can pass any prop of the Select component to override the style or size, they will be forwarded.

<template>
  <UColorModeSelect class="w-28" />
</template>
A class prop has been added to avoid layout shift here.

ColorModeImage

An <img> with a different src for light and dark mode.

ColorModeToggle

A Toggle to switch between color mode.