From e76d06ce0a7cfbc3b59869aa1a74f8ba0f374b5b Mon Sep 17 00:00:00 2001 From: yudejp Date: Fri, 21 May 2021 18:36:19 +0900 Subject: [PATCH] Add dark-mode switcher --- package.json | 2 +- pages/_app.js | 12 ++++++++++ pages/_document.js | 18 +++++++++++++++ pages/components/DarkmodeSwitcher.js | 34 ++++++++++++++++++++++++++++ pages/components/LangSelector.js | 6 ++--- pages/components/Layout.js | 8 +++---- pages/components/Navbar.js | 2 ++ pages/index.js | 18 +++++++-------- tailwind.config.js | 2 +- yarn.lock | 8 +++---- 10 files changed, 87 insertions(+), 23 deletions(-) create mode 100644 pages/_app.js create mode 100644 pages/_document.js create mode 100644 pages/components/DarkmodeSwitcher.js diff --git a/package.json b/package.json index 68376cd..53276ef 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "@zeit/next-css": "^1.0.1", "autoprefixer": "^10.2.4", "next": "^10.0.6", - "next-themes": "^0.0.12", + "next-themes": "^0.0.14", "next-translate": "^1.0.2", "nightwind": "^1.1.6", "popper.js": "^1.16.1", diff --git a/pages/_app.js b/pages/_app.js new file mode 100644 index 0000000..00e7c95 --- /dev/null +++ b/pages/_app.js @@ -0,0 +1,12 @@ +import 'tailwindcss/tailwind.css'; +import { ThemeProvider } from "next-themes"; + +function MyApp({ Component, pageProps }) { + return ( + + + + ); +} + +export default MyApp; \ No newline at end of file diff --git a/pages/_document.js b/pages/_document.js new file mode 100644 index 0000000..965cba6 --- /dev/null +++ b/pages/_document.js @@ -0,0 +1,18 @@ +import React from "react"; +import Document, { Html, Head, Main, NextScript } from "next/document"; + +class MyDocument extends Document { + render() { + return ( + + + +
+ + + + ); + } +} + +export default MyDocument; \ No newline at end of file diff --git a/pages/components/DarkmodeSwitcher.js b/pages/components/DarkmodeSwitcher.js new file mode 100644 index 0000000..3c6bc53 --- /dev/null +++ b/pages/components/DarkmodeSwitcher.js @@ -0,0 +1,34 @@ +import Head from "next/head" +import Link from "next/link" +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 + const siteTitle = "yude.jp" + const router = useRouter() + const { locale, locales, defaultLocale, pathname } = router + + const { t, lang } = useTranslation("common") + const footer = t('footer') + const source = t('source') + const tos = t('tos') + + const [isMounted, setIsMounted] = useState(false); + const { theme, setTheme } = useTheme(); +useEffect(() => { + setIsMounted(true); + }, []); +const switchTheme = () => { + if (isMounted) { + setTheme(theme === "light" ? "dark" : "light"); + } + }; + return ( + + ) +} +export default Layout \ No newline at end of file diff --git a/pages/components/LangSelector.js b/pages/components/LangSelector.js index f09994b..4376fa0 100644 --- a/pages/components/LangSelector.js +++ b/pages/components/LangSelector.js @@ -28,7 +28,7 @@ const Dropdown = ({ color }) => { return ( <> -
+
- - +
diff --git a/pages/components/Layout.js b/pages/components/Layout.js index 515fc2f..00906e1 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 @@ -21,7 +22,6 @@ const Layout = (props) => { {title ? `${title} - ${siteTitle}` : siteTitle} -
{children} @@ -36,17 +36,17 @@ const Layout = (props) => {
-

+

{footer} / {source}

-

+

{tos} +

-
) } diff --git a/pages/components/Navbar.js b/pages/components/Navbar.js index 1b4569f..a7c7548 100644 --- a/pages/components/Navbar.js +++ b/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 DarkmodeSwitcher from "./DarkmodeSwitcher" const Navbar = () => { return ( @@ -15,6 +16,7 @@ const Navbar = () => {
+
diff --git a/pages/index.js b/pages/index.js index 762c1fe..9d09359 100644 --- a/pages/index.js +++ b/pages/index.js @@ -31,15 +31,15 @@ export default function Index(props) { unoptimized = {true} />
- - - - - - - - - + + + + + + + + +

diff --git a/tailwind.config.js b/tailwind.config.js index 40b0f02..afbab49 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,6 +1,6 @@ module.exports = { purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], - darkMode: "media", + darkMode: "class", theme: { aspectRatio: { none: 0, diff --git a/yarn.lock b/yarn.lock index 83f1806..504a06e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1833,10 +1833,10 @@ native-url@0.3.4: dependencies: querystring "^0.2.0" -next-themes@^0.0.12: - version "0.0.12" - resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.0.12.tgz#8021999f314dc08614f4bcd1f8b7b91f1cd5bf00" - integrity sha512-127ZeerlF/GC17TMVkZkarj3f01weI03b+Ne1xHmmaRs9ouYXVkgyAd60GHRzUnCFVo1NKLcZe0Pr8OnTzrxwQ== +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"