30 lines
1.0 KiB
TypeScript
30 lines
1.0 KiB
TypeScript
// Path: Frontend/src/components/dashboard/shared/dashboard-theme-toggle.tsx
|
|
|
|
import type { Component } from "solid-js";
|
|
import { useTheme } from "../../../context/theme/context";
|
|
import styles from "./dashboard-theme-toggle.module.scss";
|
|
|
|
const DashboardThemeToggle: Component = () => {
|
|
const { toggleMode } = useTheme();
|
|
|
|
return (
|
|
<button type="button" aria-label="Toggle colour scheme" class={styles.toggleButton} onClick={toggleMode}>
|
|
<div class={styles.iconContainer}>
|
|
<span class={`${styles.colorIcon} ${styles.moonWrapper}`}>
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M15.5 3.5A7.5 7.5 0 1 0 20.5 16a8 8 0 1 1-5-12.5Z" />
|
|
</svg>
|
|
</span>
|
|
<span class={`${styles.colorIcon} ${styles.sunWrapper}`}>
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<circle cx="12" cy="12" r="4.5" />
|
|
<path d="M12 2.5v2.2M12 19.3v2.2M4.7 4.7l1.6 1.6M17.7 17.7l1.6 1.6M2.5 12h2.2M19.3 12h2.2M4.7 19.3l1.6-1.6M17.7 6.3l1.6-1.6" />
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default DashboardThemeToggle;
|