60 lines
2.4 KiB
TypeScript
60 lines
2.4 KiB
TypeScript
/*
|
|
* Copyright (C) 2024 Aleksander <alekswilc> Wilczyński (aleks@alekswilc.dev)
|
|
*
|
|
* This program is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as published
|
|
* by the Free Software Foundation, either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* See LICENSE for more.
|
|
*/
|
|
|
|
import useColorMode from "../../../hooks/useColorMode";
|
|
import { DarkIcon, LightIcon } from "../icons/DarkModeSwitchIcons.tsx";
|
|
|
|
const DarkModeSwitcher = () =>
|
|
{
|
|
const [ colorMode, setColorMode ] = useColorMode();
|
|
|
|
return (
|
|
<li>
|
|
<label
|
|
className={ `relative m-0 block h-7.5 w-14 rounded-full ${
|
|
colorMode === "dark" ? "bg-primary" : "bg-stroke"
|
|
}` }
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
onChange={ () =>
|
|
{
|
|
if (typeof setColorMode === "function")
|
|
{
|
|
setColorMode(colorMode === "light" ? "dark" : "light");
|
|
}
|
|
} }
|
|
className="dur absolute top-0 z-50 m-0 h-full w-full cursor-pointer opacity-0"
|
|
/>
|
|
<span
|
|
className={ `absolute top-1/2 left-[3px] flex h-6 w-6 -translate-y-1/2 translate-x-0 items-center justify-center rounded-full bg-white shadow-switcher duration-75 ease-linear ${
|
|
colorMode === "dark" && "!right-[3px] !translate-x-full"
|
|
}` }
|
|
>
|
|
<span className="dark:hidden">
|
|
<LightIcon/>
|
|
</span>
|
|
<span className="hidden dark:inline-block">
|
|
<DarkIcon/>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</li>
|
|
);
|
|
};
|
|
|
|
export default DarkModeSwitcher;
|