owenrees/echecsfrance
1
0
Fork 0
mirror of https://github.com/TheRealOwenRees/echecsfrance.git synced 2026-07-23 04:26:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

theme-toggle (#52)

Browse Source 
* default to system preferred theme

* theme svg in footer

* accounted for undefined window
This commit is contained in:
Owen Rees
2023-07-04 22:40:39 +02:00
committed by GitHub
parent 8a4f5f08d2
commit 96fda01929
4 changed files with 39 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[lang]/components/ThemeSwitcher.tsx
+27 -23
View File
@@ -1,42 +1,46 @@
"use client";
import { MdBrightness2, MdCircle } from "react-icons/md";
import useDarkMode from "@/hooks/useDarkMode";
import { useEffect, useState } from "react";
import "@/css/theme-toggle.css";
import useDarkMode from "@/hooks/useDarkMode";
const ThemeSwitcher = () => {
const [mounted, setMounted] = useState(false);
const [colorTheme, setTheme] = useDarkMode();
useEffect(() => {
setMounted(true);
}, []);
useEffect(() => setMounted(true), []);
if (!mounted) {
return null;
}
if (!mounted) return null;
return (
<div>
<>
{colorTheme === "light" ? (
<div
className="toggle-dark"
data-test="toggle-dark"
onClick={() => setTheme("light")}
>
<MdBrightness2 className="theme-icon-dark" />
<div data-test="toggle-dark" onClick={() => setTheme("light")}>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="inline-block h-4 w-4"
>
<path
fill-rule="evenodd"
d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z"
clip-rule="evenodd"
/>
</svg>
</div>
) : (
<div
className="toggle"
data-test="toggle"
onClick={() => setTheme("dark")}
>
<MdCircle className="theme-icon" />
<div data-test="toggle" onClick={() => setTheme("dark")}>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="inline-block h-4 w-4"
>
<path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
</svg>
</div>
)}
</div>
</>
);
};