mirror of https://github.com/ctk-hq/ctk
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
35 lines
864 B
TypeScript
35 lines
864 B
TypeScript
import { MoonIcon, SunIcon } from "@heroicons/react/outline";
|
|
import { useDarkMode } from "./userDarkMode";
|
|
|
|
const DarkModeSwitch = () => {
|
|
const [isDark, setIsDark] = useDarkMode();
|
|
|
|
return (
|
|
<div className="flex flex items-center">
|
|
<button
|
|
onClick={(e) => setIsDark(!isDark)}
|
|
id="theme-toggle"
|
|
type="button"
|
|
className="
|
|
text-gray-500
|
|
dark:text-gray-200
|
|
hover:bg-gray-100
|
|
dark:hover:bg-gray-900
|
|
focus:outline-none
|
|
dark:focus:ring-gray-700
|
|
rounded-lg
|
|
text-sm
|
|
p-2.5"
|
|
>
|
|
{isDark ? (
|
|
<SunIcon id="theme-toggle-light-icon" className="w-5 h-5" />
|
|
) : (
|
|
<MoonIcon id="theme-toggle-dark-icon" className="w-5 h-5" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DarkModeSwitch;
|