Toggle Sidebar B
header.lightDarkMode D

Color Mode Buttons

Three-way colour mode picker (light, dark, system) with thumbnail previews. Drop into a settings panel to let users pick a theme.

When to use Buttons vs Toggle

Use ColorModeButtons in a settings page where the user explicitly chooses light, dark, or system with previews. Use ColorModeToggle in the header for a quick one-click flip.

Default

Renders three thumbnail-buttons; current mode shows a check.

API Reference

Props, events, and slots for each sub-component.

ColorModeButtons

Props

PropTypeDefaultDescription
No props. Reads and writes the Nuxt color-mode store directly.