website-2/components/themeSwitch.tsx

34 lines
1.5 KiB
TypeScript
Raw Normal View History

import React, { useState } from "react";
import { useTheme } from "next-themes";
import { Switch } from "@headlessui/react";
export const ThemeSwitch = () => {
const { theme, setTheme } = useTheme();
const [enabled, setEnabled] = useState(true);
// Use theme requires its own hook which uses Strings. Using an enabled, disabled for a bool hook and following translates that to a string.
if (enabled) {
setTheme("dark");
} else {
setTheme("light");
}
return (
<div className="flex justify-start md:justify-end items-center space-x-2 mx-auto relative">
<Switch.Group>
<div className="flex items-center">
<Switch.Label className="mr-3 dark:text-white text-black">Dark Mode</Switch.Label>
<Switch
checked={enabled}
onChange={setEnabled}
className={`${enabled ? 'bg-gray-400' : 'bg-gray-200'} relative inline-flex items-center h-6 rounded-full w-11 transition-colors focus:outline-none focus:ring-1 focus:ring-offset-2 dark:ring-white ring-black dark:focus:bg-gray-400 focus:bg-gray-400`}
>
<span
className={`${enabled ? 'translate-x-6' : 'translate-x-1'} inline-block w-4 h-4 transform bg-black dark:bg-white rounded-full transition-transform`} />
</Switch>
</div>
</Switch.Group>
</div>
);
};