Boost Azure Demo

Frontend/src/components/dashboard/shared/dashboard-theme-toggle.tsx

@@ -0,0 +1,29 @@
+// 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;