yude/yude.jp
0
0
Fork 0
mirror of https://github.com/yude-jp/yude.jp synced 2024-12-22 12:10:11 +09:00
Code Releases Activity

Revert "Using "tailwind-darkmode-toggle" instead of "next-themes""

Browse Source 
This reverts commit 37e1a5fca7.
This commit is contained in:
yude 2021-05-22 10:12:17 +09:00
parent ca2886afd0
commit efaf3180f6
Signed by: yude
GPG Key ID: EB0FE5D925C4A968
5 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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",

2
pages/_app.js
View File

@ -1,5 +1,5 @@
import 'tailwindcss/tailwind.css';
import { ThemeProvider } from 'tailwind-darkmode-toggle';
import { ThemeProvider } from "next-themes";
function MyApp({ Component, pageProps }) {
return (

17
pages/components/DarkmodeSwitcher.js
View File

@ -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

1
pages/components/Layout.js
View File

@ -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

10
yarn.lock
View File

@ -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"