aboutsummaryrefslogtreecommitdiffstats
path: root/components/DarkSwitch.js
diff options
context:
space:
mode:
Diffstat (limited to 'components/DarkSwitch.js')
-rw-r--r--components/DarkSwitch.js53
1 files changed, 0 insertions, 53 deletions
diff --git a/components/DarkSwitch.js b/components/DarkSwitch.js
deleted file mode 100644
index 0f17c59..0000000
--- a/components/DarkSwitch.js
+++ /dev/null
@@ -1,53 +0,0 @@
-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;