ModeSwitcher

The ModeSwitcher component provides a simple way to toggle between light and dark color modes.

Usage

Copy<script setup lang="ts">
import { ModeSwitcher } from '@/components/ModeSwitcher'
</script>

<template>
  <ModeSwitcher />
</template>

Features

• Cycles between light and dark modes
• Uses Nuxt Color Mode module
• Custom theme icon
• Accessible with screen reader text

API Reference

ModeSwitcher

No props. Automatically uses useColorMode() composable.

Behavior

• Click to cycle: light → dark → light
• Persists preference in localStorage
• Updates immediately on click
• Uses system preference as default

Customization

The component uses a custom SVG icon. To customize:

1. Replace the SVG path in ModeSwitcher.vue
2. Or use a Lucide icon instead

Integration

Requires @nuxtjs/color-mode module to be installed and configured in nuxt.config.ts.