32 lines
920 B
React
32 lines
920 B
React
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>
|
|
} |