DarkMode

The Dark mode component provides a toggle for switching between light and dark color schemes.
It uses system preferences, persists user choices, and follows accessibility best practices.

---
import { DarkMode } from '@yatoday/astro-ui/astro';
---

<!-- Default with system preference -->
<DarkMode />

<!-- With custom options -->
<DarkMode
  initialMode="system"
  label="Toggle between Dark and Light mode"
  class="size=12"
  iconName="tabler:sun"
  iconClass="text-red-500"
/>

<!-- With custom slot content -->
<DarkMode> Toggle </DarkMode>

<!-- or icon -->
<DarkMode>
  <Icon name="tabler:sun" class="size-12" />
</DarkMode>

Props