33 lines
987 B
TypeScript
33 lines
987 B
TypeScript
import { Show } from "solid-js";
|
|
import MoonIcon from "./icons/MoonIcon";
|
|
import SunIcon from "./icons/SunIcon";
|
|
import { Typewriter } from "./Typewriter";
|
|
import { useDarkMode } from "~/context/darkMode";
|
|
|
|
export function DarkModeToggle() {
|
|
const { isDark, toggleDarkMode } = useDarkMode();
|
|
|
|
return (
|
|
<button
|
|
onClick={toggleDarkMode}
|
|
class="hover:bg-surface0 flex w-full items-center gap-3 rounded-lg p-3 transition-all duration-200 ease-in-out hover:scale-105"
|
|
aria-label="Toggle dark mode"
|
|
>
|
|
<Show
|
|
when={isDark()}
|
|
fallback={<SunIcon size={24} fill="var(--color-text)" />}
|
|
>
|
|
<MoonIcon size={24} fill="var(--color-text)" />
|
|
</Show>
|
|
<span class="text-lg font-semibold">
|
|
<Show
|
|
when={isDark()}
|
|
fallback={<Typewriter keepAlive={false}>Light Mode</Typewriter>}
|
|
>
|
|
<Typewriter keepAlive={false}>Dark Mode</Typewriter>
|
|
</Show>
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|