74 lines
2.0 KiB
TypeScript
74 lines
2.0 KiB
TypeScript
/*import Button from "../button/button.jsx";
|
|
import { useState, useEffect } from "react";
|
|
import styles from "./ThemeSwitcher.module.css";
|
|
|
|
|
|
export default function ThemeSwitcher() {
|
|
|
|
const [theme, setTheme] = useState("");
|
|
|
|
useEffect(() => {
|
|
const t = localStorage.getItem("theme");
|
|
if(t) setTheme(t);
|
|
else setTheme("light");
|
|
}, []);
|
|
|
|
const switchTheme = () => {
|
|
|
|
let newTheme = theme === "light" ? "dark" : "light";
|
|
|
|
if(theme === null || theme === "") newTheme = "dark";
|
|
|
|
localStorage.setItem("theme", newTheme);
|
|
setTheme(newTheme);
|
|
|
|
window.dispatchEvent(new Event("theme-changed"));
|
|
};
|
|
|
|
return <Button variant={"default"} onClick={switchTheme} className={styles.themeBtn}>
|
|
<img src={`/icons/theme/${theme}.svg`} alt={`${theme} icon`} className={styles.themeIcon} />
|
|
<p>Changer de thème </p>
|
|
</Button>
|
|
}*/
|
|
|
|
import Button from "../button/button";
|
|
import { useState, useEffect } from "react";
|
|
import styles from "./ThemeSwitcher.module.css";
|
|
|
|
type Theme = "light" | "dark";
|
|
|
|
export default function ThemeSwitcher() {
|
|
const [theme, setTheme] = useState<Theme | "">("");
|
|
|
|
useEffect(() => {
|
|
const savedTheme = localStorage.getItem("theme") as Theme | null;
|
|
if (savedTheme) {
|
|
setTheme(savedTheme);
|
|
} else {
|
|
setTheme("light");
|
|
}
|
|
}, []);
|
|
|
|
const switchTheme = () => {
|
|
const newTheme: Theme = theme === "light" ? "dark" : "light";
|
|
localStorage.setItem("theme", newTheme);
|
|
setTheme(newTheme);
|
|
window.dispatchEvent(new Event("theme-changed"));
|
|
};
|
|
|
|
return (
|
|
<Button
|
|
variant="default"
|
|
onClick={switchTheme}
|
|
className={styles.themeBtn}
|
|
>
|
|
<img
|
|
src={`/icons/theme/${theme}.svg`}
|
|
alt={`${theme} icon`}
|
|
className={styles.themeIcon}
|
|
/>
|
|
<p>Changer de thème</p>
|
|
</Button>
|
|
);
|
|
}
|