diff options
Diffstat (limited to 'components/DarkSwitch.js')
-rw-r--r-- | components/DarkSwitch.js | 53 |
1 files changed, 53 insertions, 0 deletions
diff --git a/components/DarkSwitch.js b/components/DarkSwitch.js new file mode 100644 index 0000000..0f17c59 --- /dev/null +++ b/components/DarkSwitch.js @@ -0,0 +1,53 @@ +import React, { useState, useEffect } from "react"; +import { useTheme } from "next-themes"; + +const ThemeChanger = () => { + const [mounted, setMounted] = useState(false); + const { theme, setTheme } = useTheme(); + + // When mounted on client, now we can show the UI + useEffect(() => setMounted(true), []); + + if (!mounted) return null; + + return ( + <div className="flex items-center"> + {theme === "dark" ? ( + <button + onClick={() => setTheme("light")} + className="text-gray-300 rounded-full outline-none focus:outline-none"> + <span className="sr-only">Light Mode</span> + + <svg + xmlns="http://www.w3.org/2000/svg" + className="w-5 h-5" + viewBox="0 0 20 20" + fill="currentColor"> + <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" /> + </svg> + </button> + ) : ( + <button + onClick={() => setTheme("dark")} + className="text-gray-500 rounded-full outline-none focus:outline-none focus-visible:ring focus-visible:ring-gray-100 focus:ring-opacity-20"> + <span className="sr-only">Dark Mode</span> + <svg + xmlns="http://www.w3.org/2000/svg" + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + strokeWidth="1" + strokeLinecap="round" + strokeLinejoin="round"> + <circle cx="12" cy="12" r="5" /> + <path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" /> + </svg> + </button> + )} + </div> + ); +}; + +export default ThemeChanger; |