useThemeChange

import { useThemeChange } from "amvasdev-ui";

function ThemeSelector() {
  const { changeTheme } = useThemeChange();

  return (
    <select onChange={(e) => changeTheme(e.target.value)}>
      <option value="light">Light</option>
      <option value="dark">Dark</option>
      <option value="emerald">Emerald</option>
      <option value="dracula">Dracula</option>
      <option value="winter">Winter</option>
      <option value="night">Night</option>
      <option value="halloween">Halloween</option>
      <option value="autumn">Autumn</option>
      <option value="business">Business</option>
      <option value="nord">Nord</option>
      <option value="dim">Dim</option>
      <option value="lemonade">Lemonade</option>
      <option value="sunset">Sunset</option>
      <option value="valentine">Valentine</option>
    </select>
  );
}

import { ColorPalette, useThemeChange } from "amvasdev-ui";
import { useState } from "react";

function ThemeSelector() {
  const { changeTheme } = useThemeChange();
  const [currentTheme, setCurrentTheme] = useState("light");

  const handleThemeChange = (theme) => {
    changeTheme(theme);
    setCurrentTheme(theme);
  };

  const themes = ["light", "dark", "cupcake", "emerald", "dracula"];

  return (
    <div className="flex flex-col gap-2">
      {themes.map((theme) => (
        <ColorPalette
          key={theme}
          theme={theme}
          isSelected={currentTheme === theme}
          onClick={() => handleThemeChange(theme)}
          className="cursor-pointer"
        />
      ))}
    </div>
  );
}