mirror of
https://github.com/yude-jp/yude.jp
synced 2024-12-22 12:10:11 +09:00
Add dark-mode switcher
This commit is contained in:
parent
bfd432c11d
commit
e76d06ce0a
GPG Key ID:
EB0FE5D925C4A968
@ -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",
|
||||
|
||||
12
pages/_app.js
Normal file
12
pages/_app.js
Normal file
@ -0,0 +1,12 @@
|
||||
import 'tailwindcss/tailwind.css';
|
||||
import { ThemeProvider } from "next-themes";
|
||||
|
||||
function MyApp({ Component, pageProps }) {
|
||||
return (
|
||||
<ThemeProvider attribute="class">
|
||||
<Component {...pageProps} />
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default MyApp;
|
||||
18
pages/_document.js
Normal file
18
pages/_document.js
Normal file
@ -0,0 +1,18 @@
|
||||
import React from "react";
|
||||
import Document, { Html, Head, Main, NextScript } from "next/document";
|
||||
|
||||
class MyDocument extends Document {
|
||||
render() {
|
||||
return (
|
||||
<Html>
|
||||
<Head />
|
||||
<body className="bg-gray-100 text-black dark:bg-gray-800 dark:text-white">
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MyDocument;
|
||||
34
pages/components/DarkmodeSwitcher.js
Normal file
34
pages/components/DarkmodeSwitcher.js
Normal file
@ -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 (
|
||||
<button className="my-4 mx-3 text-2xl" onClick={switchTheme}>🌙</button>
|
||||
)
|
||||
}
|
||||
export default Layout
|
||||
@ -28,7 +28,7 @@ const Dropdown = ({ color }) => {
|
||||
return (
|
||||
<>
|
||||
|
||||
<div className="relative inline-block text-left mr-2 float-right z-10">
|
||||
<div className="text-left mr-2 my-3 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}
|
||||
@ -43,8 +43,6 @@ const Dropdown = ({ color }) => {
|
||||
<path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
|
||||
<div ref={popoverDropdownRef} className={
|
||||
(dropdownPopoverShow ? "block " : "hidden ") + "origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"}>
|
||||
<div className="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
|
||||
|
||||
@ -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 ? `${title} - ${siteTitle}` : siteTitle}</title>
|
||||
<link rel="icon" href="/static/images/favicon.ico" />
|
||||
</Head>
|
||||
<body className="min-h-screen text-black dark:bg-gray-900 dark:text-white subpixel-antialiased">
|
||||
<main>
|
||||
<div className="page-main">
|
||||
{children}
|
||||
@ -36,17 +36,17 @@ const Layout = (props) => {
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="mt-16 flex flex-col items-center">
|
||||
<div className="sm:w-full text-center py-6">
|
||||
<p className="text-sm font-bold mb-2 text-gray-900 dark:text-gray-400">
|
||||
<p className="text-sm font-bold mb-2">
|
||||
{footer} / <Link href="https://github.com/yudejp/yude.jp"><a className="hover:underline">{source}</a></Link>
|
||||
</p>
|
||||
<p className="text-sm font-bold mb-2 text-gray-900 dark:text-gray-400">
|
||||
<p className="text-sm font-bold mb-2">
|
||||
<Link href="https://scrapbox.io/yude/yude.jp_%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E5%88%A9%E7%94%A8%E8%A6%8F%E7%B4%84"><a className="hover:underline">{tos}</a></Link>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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 = () => {
|
||||
</a>
|
||||
</Link>
|
||||
<div className="origin-top-right absolute right-0">
|
||||
<DarkmodeSwitcher />
|
||||
<LangSelector />
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@ -31,15 +31,15 @@ export default function Index(props) {
|
||||
unoptimized = {true}
|
||||
/>
|
||||
</div>
|
||||
<span><Link href="/profile"><a><FontAwesomeIcon icon={faUser} className="w-10 h-10 fill-current inline transition duration-200 text-gray-900 dark:text-white ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></span>
|
||||
<span className="ml-4"><Link href="https://blog.yude.jp"><a><FontAwesomeIcon icon={faBlog} className="w-10 h-10 fill-current inline transition duration-200 text-gray-900 dark:text-white ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></span>
|
||||
<span className="ml-4"><Link href="https://scrapbox.io/yude"><a><FontAwesomeIcon icon={faBook} className="w-10 h-10 fill-current inline transition duration-200 text-gray-900 dark:text-white ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></span>
|
||||
<span className="ml-4"><Link href="https://discord.gg/X6srY7X"><a><FontAwesomeIcon icon={faDiscord} className="w-10 h-10 fill-current inline transition duration-200 text-gray-900 dark:text-white ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></span>
|
||||
<span className="ml-4"><Link href="https://github.com/yudejp"><a><FontAwesomeIcon icon={faGithub} className="w-10 h-10 fill-current inline transition duration-200 text-gray-900 dark:text-white ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></span>
|
||||
<span className="ml-4"><Link href="https://git.yude.jp"><a><FontAwesomeIcon icon={faGit} className="w-10 h-10 fill-current inline transition duration-200 text-gray-900 dark:text-white ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></span>
|
||||
<span className="ml-4"><Link href="https://mstdn.yude.jp"><a><FontAwesomeIcon icon={faMastodon} className="w-10 h-10 fill-current inline transition duration-200 text-gray-900 dark:text-white ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></span>
|
||||
<span className="ml-4"><Link href="/status"><a><FontAwesomeIcon icon={faServer} className="w-10 h-10 fill-current inline transition duration-200 text-gray-900 dark:text-white ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></span>
|
||||
<span className="ml-4"><Link href="/house"><a><FontAwesomeIcon icon={faHouseUser} className="w-10 h-10 fill-current inline transition duration-200 text-gray-900 dark:text-white ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></span>
|
||||
<span><Link href="/profile"><a><FontAwesomeIcon icon={faUser} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></span>
|
||||
<span className="ml-4"><Link href="https://blog.yude.jp"><a><FontAwesomeIcon icon={faBlog} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></span>
|
||||
<span className="ml-4"><Link href="https://scrapbox.io/yude"><a><FontAwesomeIcon icon={faBook} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></span>
|
||||
<span className="ml-4"><Link href="https://discord.gg/X6srY7X"><a><FontAwesomeIcon icon={faDiscord} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></span>
|
||||
<span className="ml-4"><Link href="https://github.com/yudejp"><a><FontAwesomeIcon icon={faGithub} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></span>
|
||||
<span className="ml-4"><Link href="https://git.yude.jp"><a><FontAwesomeIcon icon={faGit} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></span>
|
||||
<span className="ml-4"><Link href="https://mstdn.yude.jp"><a><FontAwesomeIcon icon={faMastodon} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></span>
|
||||
<span className="ml-4"><Link href="/status"><a><FontAwesomeIcon icon={faServer} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></span>
|
||||
<span className="ml-4"><Link href="/house"><a><FontAwesomeIcon icon={faHouseUser} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></span>
|
||||
<p></p>
|
||||
</div>
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user