Add toggle button to switch dark-mode

next.config.js

@@ -1,6 +1,9 @@
 const nextTranslate = require('next-translate')
 
 module.exports = nextTranslate({
+  experimental: {
+    darkModeVariant: true
+  },
     i18n: {
       // These are all the locales you want to support in
       // your application

pages/components/LangSelector.js

@@ -28,7 +28,7 @@ const Dropdown = ({ color }) => {
   return (
     <>
 
-<div className="relative inline-block text-left mr-2">
+<div className="relative inline-block text-left mr-2 float-right">
     <button type="button" className="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500" id="options-menu" aria-haspopup="true" aria-expanded="true"
     style={{ transition: "all .15s ease" }}
     ref={btnDropdownRef}

pages/components/Layout.js

@@ -3,7 +3,6 @@ import Link from "next/link"
 import "tailwindcss/tailwind.css";
 import React, { useEffect, useState } from 'react'
 import { ThemeProvider } from "./themeContext"
-import Toggle from "./toggle"
 
 const Layout = (props) => {
   const { title, children } = props
@@ -23,24 +22,26 @@ const Layout = (props) => {
         <div className="page-main">
           {children}
         </div>
-      </main>
+      
       <style jsx global>{`
         body {
             text-align: center;
         }
+        
       `}</style>
       <footer>
       <div className="container mx-auto px-6">
         <div className="mt-16 border-t-2 border-gray-300 flex flex-col items-center">
             <div className="sm:w-full text-left py-6">
                 <p className="text-sm text-gray-700 font-bold mb-2">
-                    This page is licensed under the MIT License. / Powered by Tailwind CSS and Next.js.
+                    This page is licensed under the MIT License.
                 </p>
-                <Toggle />
+                
             </div>
           </div>
         </div>
       </footer>
+      </main>
       </body>
       </ThemeProvider>
     </div>

pages/components/Navbar.js

@@ -2,6 +2,7 @@ import "tailwindcss/tailwind.css";
 import Popper from "popper.js";
 import Link from 'next/link';
 import LangSelector from "./LangSelector"
+import Toggle from "./toggle"
 import { useState } from 'react';
 
 const Navbar = () => {
@@ -21,9 +22,9 @@ const Navbar = () => {
             </span>
           </a>
         </Link>
-            
             <div className="origin-top-right absolute right-0">
                 <LangSelector />
+                <Toggle />
             </div>
       </nav>
       </>

pages/components/toggle.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import ThemeContext from './themeContext'
+import "tailwindcss/tailwind.css";
 
 const Toggle = () => {
     const { theme, setTheme } = React.useContext(ThemeContext)
@@ -7,16 +8,43 @@ const Toggle = () => {
     function isDark() {
       return theme === "dark"
     }
-  
     return (
-      <label>
+      <div className="float-right mr-3 my-2">
-        <input
+          <label 
-          type="checkbox"
+    for="toogleA"
-          checked={isDark()}
+    className="flex items-center cursor-pointer"
-          onChange={e => setTheme(e.target.checked ? "dark" : "light")}
+  >
-        ></input>
+    <div className="relative">
-        ダーク モード
+      <input id="toogleA" type="checkbox" className="hidden" checked={isDark()} onChange={e => setTheme(e.target.checked ? "dark" : "light")} />
-      </label>
+      <div
+        className="toggle__line w-10 h-4 bg-gray-400 rounded-full shadow-inner"
+      ></div>
+      <div
+        className="toggle__dot absolute w-6 h-6 bg-white rounded-full shadow inset-y-0 left-0"
+      ></div>
+    </div>
+    <div
+      className="ml-3 font-medium"
+    >
+      <span class="text-black dark:text-white">ダークモード</span>
+    </div>
+  </label>
+        <style jsx>
+        {`
+        .toggle__dot {
+          top: -.25rem;
+          left: -.25rem;
+          transition: all 0.3s ease-in-out;
+        }
+
+        input:checked ~ .toggle__dot {
+          transform: translateX(100%);
+          background-color: #0A0E14;
+        }
+        `}
+        </style>
+      </div>
+      
     )
   }