vega-frontend-monorepo/libs/ui-toolkit/src/components/theme-switcher/theme-switcher.tsx
2022-03-09 16:09:17 -08:00

35 lines
1.3 KiB
XML

export const ThemeSwitcher = ({
onToggle,
className,
}: {
onToggle: () => void;
className?: string;
}) => (
<button type="button" onClick={() => onToggle()} className={className}>
<span className="dark:hidden text-black">
<svg viewBox="0 0 45 45" className="w-32 h-32">
<g>
<path
d="M22.5 27.79a5.29 5.29 0 1 0 0-10.58 5.29 5.29 0 0 0 0 10.58Z"
fill="currentColor"
></path>
<path
d="M15.01 22.5H10M35 22.5h-5.01M22.5 29.99V35M22.5 10v5.01M17.21 27.79l-3.55 3.55M31.34 13.66l-3.55 3.55M27.79 27.79l3.55 3.55M13.66 13.66l3.55 3.55"
stroke="currentColor"
strokeWidth="1.3"
strokeMiterlimit="10"
></path>
</g>
</svg>
</span>
<span className="hidden dark:inline text-white">
<svg viewBox="0 0 45 45" className="w-32 h-32">
<path
d="M28.75 11.69A12.39 12.39 0 0 0 22.5 10a12.5 12.5 0 1 0 0 25c2.196 0 4.353-.583 6.25-1.69A12.46 12.46 0 0 0 35 22.5a12.46 12.46 0 0 0-6.25-10.81Zm-6.25 22a11.21 11.21 0 0 1-11.2-11.2 11.21 11.21 0 0 1 11.2-11.2c1.246 0 2.484.209 3.66.62a13.861 13.861 0 0 0-5 10.58 13.861 13.861 0 0 0 5 10.58 11.078 11.078 0 0 1-3.66.63v-.01Z"
fill="currentColor"
></path>
</svg>
</span>
</button>
);