import React from "react";
import clsx from "clsx";
import { useColorMode } from "@docusaurus/theme-common";
import { LightModeIcon } from "./icons/light-mode";
import { DarkModeIcon } from "./icons/dark-mode";
type Props = {
className?: string;
};
export const CommonThemeToggle = ({ className }: Props) => {
const { colorMode, setColorMode } = useColorMode();
const toggle = () => {
setColorMode(colorMode === "dark" ? "light" : "dark");
};
return (
);
};
const themes = [
{ name: "light", icon: LightModeIcon, label: "Light" },
{ name: "dark", icon: DarkModeIcon, label: "Dark" },
];
export const CommonThemeToggleAlt = ({ className }: Props) => {
const { colorMode, setColorMode } = useColorMode();
const toggle = (next: string) => {
setColorMode(next as typeof colorMode);
};
return (
{themes.map(({ name, label, icon: Icon }) => (
))}
);
};