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

navbar tests

Browse Source
This commit is contained in:
Owen Rees
2023-06-16 15:15:17 +02:00
parent 7450bc82e3
commit e2d99d8f5a
12 changed files with 184 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/ThemeSwitcher.tsx
+5 -10
View File
@@ -3,6 +3,7 @@
import { MdBrightness2, MdCircle } from "react-icons/md";
import useDarkMode from "@/hooks/useDarkMode";
import { useEffect, useState } from "react";
import "@/css/theme-toggle.css";
const ThemeSwitcher = () => {
const [mounted, setMounted] = useState(false);
@@ -19,18 +20,12 @@ const ThemeSwitcher = () => {
return (
<div>
{colorTheme === "light" ? (
<div
className="relative cursor-pointer h-8 w-12 rounded-[50px] margin-auto bg-gradient-to-r from-blue-900 to-purple-900"
onClick={() => setTheme("light")}
>
<MdBrightness2 className="ml-auto h-8 w-5" />
<div className="toggle-dark" onClick={() => setTheme("light")}>
<MdBrightness2 className="theme-icon-dark" />
</div>
) : (
<div
className="relative cursor-pointer h-8 w-12 rounded-[50px] margin-auto bg-gradient-to-r from-teal-300 to-sky-500"
onClick={() => setTheme("dark")}
>
<MdCircle className="ml-1 h-8 w-5 text-yellow-300" />
<div className="toggle" onClick={() => setTheme("dark")}>
<MdCircle className="theme-icon" />
</div>
)}
</div>