33 lines
956 B
TypeScript
33 lines
956 B
TypeScript
// Path: Frontend/src/components/shell/TopBar/ThemeToggle.tsx
|
|
|
|
import type { JSX } from "solid-js";
|
|
import type { Theme } from "../../../theme/runtime";
|
|
import { Moon, Sun } from "../../../lib/icons";
|
|
import styles from "./ThemeToggle.module.scss";
|
|
|
|
type ThemeToggleProps = {
|
|
theme: Theme;
|
|
onToggle: VoidFunction;
|
|
};
|
|
|
|
export const ThemeToggle = (props: ThemeToggleProps): JSX.Element => {
|
|
return (
|
|
<button
|
|
class={styles.toggleButton}
|
|
type="button"
|
|
onClick={props.onToggle}
|
|
aria-label={`Switch to ${props.theme === "dark" ? "light" : "dark"} theme`}
|
|
title={`Switch to ${props.theme === "dark" ? "light" : "dark"} theme`}
|
|
>
|
|
<span class={styles.iconContainer} aria-hidden="true">
|
|
<span class={`${styles.iconLayer} ${styles.moonLayer}`}>
|
|
<Moon size={18} strokeWidth={2} />
|
|
</span>
|
|
<span class={`${styles.iconLayer} ${styles.sunLayer}`}>
|
|
<Sun size={18} strokeWidth={2} />
|
|
</span>
|
|
</span>
|
|
</button>
|
|
);
|
|
};
|