From efaf3180f6b85b6fc8e8c8b99fe11e29fb34cd8d Mon Sep 17 00:00:00 2001
From: yudejp <i@yude.jp>
Date: Sat, 22 May 2021 10:12:17 +0900
Subject: [PATCH] Revert "Using "tailwind-darkmode-toggle" instead of
 "next-themes""

This reverts commit 37e1a5fca799611915372988f40aee5c132efca5.
---
 package.json                         |  2 +-
 pages/_app.js                        |  2 +-
 pages/components/DarkmodeSwitcher.js | 17 ++++++++++++++---
 pages/components/Layout.js           |  1 +
 yarn.lock                            | 10 +++++-----
 5 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 0ac7eca..53276ef 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "@zeit/next-css": "^1.0.1",
     "autoprefixer": "^10.2.4",
     "next": "^10.0.6",
+    "next-themes": "^0.0.14",
     "next-translate": "^1.0.2",
     "nightwind": "^1.1.6",
     "popper.js": "^1.16.1",
@@ -35,7 +36,6 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-switch": "^6.0.0",
-    "tailwind-darkmode-toggle": "^1.0.5",
     "tailwindcss": "^2.0.2",
     "tailwindcss-filters": "^3.0.0",
     "tailwindcss-responsive-embed": "^1.0.0",
diff --git a/pages/_app.js b/pages/_app.js
index 17ea08a..00e7c95 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,5 +1,5 @@
 import 'tailwindcss/tailwind.css';
-import { ThemeProvider } from 'tailwind-darkmode-toggle';
+import { ThemeProvider } from "next-themes";
 
 function MyApp({ Component, pageProps }) {
   return (
diff --git a/pages/components/DarkmodeSwitcher.js b/pages/components/DarkmodeSwitcher.js
index 3dd59ff..53c16d8 100644
--- a/pages/components/DarkmodeSwitcher.js
+++ b/pages/components/DarkmodeSwitcher.js
@@ -4,15 +4,26 @@ import "tailwindcss/tailwind.css";
 import useTranslation from 'next-translate/useTranslation'
 import { useRouter } from 'next/router'
 import React, { useEffect, useState } from 'react'
-import { DarkModeToggle } from 'tailwind-darkmode-toggle';
+import { useTheme } from "next-themes";
 
 const Layout = (props) => {
   const { title, children } = props
   const siteTitle = "yude.jp"
   const router = useRouter()
-  const { locale, locales, defaultLocale, pathname } = router;
+  const { locale, locales, defaultLocale, pathname } = router
+  
+  const [isMounted, setIsMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+useEffect(() => {
+    setIsMounted(true);
+  }, []);
+const switchTheme = () => {
+    if (isMounted) {
+      setTheme(theme === "light" ? "dark" : "light");
+    }
+  };
   return (
-    <DarkModeToggle className='inline-block my-3 mx-2 w-10 h-10 text-gray-800 dark:text-gray-300' />
+    <button className="my-4 mx-3 text-2xl" onClick={switchTheme}>🌙</button>
   )
 }
 export default Layout
\ No newline at end of file
diff --git a/pages/components/Layout.js b/pages/components/Layout.js
index 1f09f66..58473e5 100644
--- a/pages/components/Layout.js
+++ b/pages/components/Layout.js
@@ -4,6 +4,7 @@ import "tailwindcss/tailwind.css";
 import useTranslation from 'next-translate/useTranslation'
 import { useRouter } from 'next/router'
 import React, { useEffect, useState } from 'react'
+import { useTheme } from "next-themes";
 
 const Layout = (props) => {
   const { title, children } = props
diff --git a/yarn.lock b/yarn.lock
index 923327a..504a06e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1833,6 +1833,11 @@ native-url@0.3.4:
   dependencies:
     querystring "^0.2.0"
 
+next-themes@^0.0.14:
+  version "0.0.14"
+  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.0.14.tgz#2b9861990bc453149e23d8e6ef1a25a119e36675"
+  integrity sha512-x09OaM+wg3SIlEjOv8B21aw/E36jxTtfW3Dm/DPwMsSMluGt7twe1LigA6nc+mXP1u0qu9MxBaIrPPH6UTiKnA==
+
 next-translate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/next-translate/-/next-translate-1.0.2.tgz#af93208221d08a09b96545b2e3d853b69a6ddeb5"
@@ -2888,11 +2893,6 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-tailwind-darkmode-toggle@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/tailwind-darkmode-toggle/-/tailwind-darkmode-toggle-1.0.5.tgz#5db99164edb0a00240dc1462ee03d10c1ab3e4bd"
-  integrity sha512-TJA8CaP7pFN5ckYckBhdKtv39U4hLroHC1k2NaokwuB29P0t906OjhCilygi+74ee/iRzcvInMczfXKkJ0EU8g==
-
 tailwindcss-aspect-ratio@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/tailwindcss-aspect-ratio/-/tailwindcss-aspect-ratio-3.0.0.tgz#4f9fc7ca0f3468373290faaa8b92652157bee6a4"