The default variant. The toggle opens an icon-only picker; the theme only changes once the user chooses an option — ideal for a navbar. Use align="end" to hang the menu off the toggle's trailing edge:

<script setup lang="ts">
import { VdThemeSwitcher } from "@vanduo-oss/vd3";

const onChange = (mode: "system" | "light" | "dark") => {
  console.log("theme changed:", mode);
};
</script>

<template>
  <!-- Icon menu (default) — recommended for navbars -->
  <VdThemeSwitcher align="end" @change="onChange" />
</template>

Pass :menu="false" for a single button that cycles System → Light → Dark on each click — best for minimal apps where a one-click toggle beats a menu:

<!-- Single button that cycles System -> Light -> Dark -->
<VdThemeSwitcher :menu="false" />

The cycle button changes the theme immediately on each click, so it can flash between modes — prefer the menu in navbars.

The theme layer derives a default primary per scheme (PRIMARY_LIGHT / PRIMARY_DARK). Override them at bootstrap so switching modes swaps the accent automatically:

import { VanduoVue, setThemeDefaults } from "@vanduo-oss/vd3";

// Option A — pass themeDefaults to the plugin once, at bootstrap:
app.use(VanduoVue, {
  themeDefaults: {
    PRIMARY_LIGHT: "black",
    PRIMARY_DARK: "green",
  },
});

// Option B — call the helper directly, before the theme first reads defaults:
setThemeDefaults({ PRIMARY_DARK: "violet" });

While the primary is still one of these defaults, switching modes re-derives it. Once a user picks a specific color in the customizer, it sticks across mode changes.