yude/yude.jp
0
0
Fork 0
mirror of https://github.com/yude-jp/yude.jp synced 2025-12-16 20:54:17 +09:00
Code Releases Activity

Add dark-mode switcher

Browse Source
This commit is contained in:
yude
2021-05-21 18:36:19 +09:00
parent bfd432c11d
commit e76d06ce0a
10 changed files with 87 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
pages/components/DarkmodeSwitcher.js Normal file
View 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

6
pages/components/LangSelector.js
View File

@@ -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}
@@ -42,9 +42,7 @@ const Dropdown = ({ color }) => {
<svg className="-mr-1 ml-2 h-5 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<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>
</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">

8
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
@@ -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
pages/components/Navbar.js
View File

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