yude/yude.jp
0
0
Fork 0
mirror of https://github.com/yude-jp/yude.jp synced 2025-10-13 11:48:37 +09:00
Code Releases Activity

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

Browse Source
This commit is contained in:
yude
2021-05-22 10:07:04 +09:00
parent 1131a1f9dc
commit 37e1a5fca7
5 changed files with 10 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/_app.js
View File

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

17
pages/components/DarkmodeSwitcher.js
View File

@@ -4,26 +4,15 @@ 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";
import { DarkModeToggle } from 'tailwind-darkmode-toggle';
const Layout = (props) => {
const { title, children } = props
const siteTitle = "yude.jp"
const router = useRouter()
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");
}
};
const { locale, locales, defaultLocale, pathname } = router;
return (
<button className="my-4 mx-3 text-2xl" onClick={switchTheme}>🌙</button>
<DarkModeToggle className='inline-block my-3 mx-2 w-10 h-10 text-gray-800 dark:text-gray-300' />
)
}
export default Layout

1
pages/components/Layout.js
View File

@@ -4,7 +4,6 @@ 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