mirror of https://github.com/astral-sh/ruff
51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
/**
|
|
* Button to toggle between light and dark mode themes.
|
|
*/
|
|
import { Theme } from "./theme";
|
|
import AstralButton from "./AstralButton";
|
|
|
|
export default function ThemeButton({
|
|
theme,
|
|
onChange,
|
|
}: {
|
|
theme: Theme;
|
|
onChange: (theme: Theme) => void;
|
|
}) {
|
|
return (
|
|
<AstralButton
|
|
type="button"
|
|
className="sm:ml-0 dark:shadow-copied"
|
|
onClick={() => onChange(theme === "light" ? "dark" : "light")}
|
|
>
|
|
<span className="sr-only">
|
|
<span className="dark:hidden">Switch to dark theme</span>
|
|
<span className="hidden dark:inline">Switch to light theme</span>
|
|
</span>
|
|
<svg
|
|
width="36"
|
|
height="36"
|
|
viewBox="-6 -6 36 36"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="stroke-black hover:stroke-white hover:fill-black fill-radiate"
|
|
>
|
|
<g className="dark:opacity-0">
|
|
<path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"></path>
|
|
<path
|
|
d="M12 4v.01M17.66 6.345l-.007.007M20.005 12.005h-.01M17.66 17.665l-.007-.007M12 20.01V20M6.34 17.665l.007-.007M3.995 12.005h.01M6.34 6.344l.007.007"
|
|
fill="none"
|
|
/>
|
|
</g>
|
|
<g className="opacity-0 dark:opacity-100">
|
|
<path d="M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z" />
|
|
<path
|
|
d="M12 3v1M18.66 5.345l-.828.828M21.005 12.005h-1M18.66 18.665l-.828-.828M12 21.01V20M5.34 18.666l.835-.836M2.995 12.005h1.01M5.34 5.344l.835.836"
|
|
fill="none"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
</AstralButton>
|
|
);
|
|
}
|