mirror of
https://github.com/yude-jp/yude.jp
synced 2025-10-14 04:08:36 +09:00
[WIP] Add dark-mode switcher
This commit is contained in:
@@ -40,7 +40,7 @@ const Dropdown = ({ color }) => {
|
||||
>
|
||||
言語 / Languages
|
||||
<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 fill-rule="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" clip-rule="evenodd" />
|
||||
<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" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
@@ -1,31 +0,0 @@
|
||||
import Head from "next/head"
|
||||
import Link from "next/link"
|
||||
import "tailwindcss/tailwind.css";
|
||||
|
||||
const Layout = (props) => {
|
||||
const { title, children } = props
|
||||
const siteTitle = "yude.jp"
|
||||
return (
|
||||
<div className="page">
|
||||
<Head>
|
||||
<title>{title ? `${title} - ${siteTitle}` : siteTitle}</title>
|
||||
<link rel="icon" href="/static/images/favicon.ico" />
|
||||
</Head>
|
||||
|
||||
<main>
|
||||
{/*
|
||||
{title ? <h1 className="page-title">{title}</h1> : ``}
|
||||
*/}
|
||||
<div className="page-main">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
<style jsx global>{`
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Layout
|
||||
48
pages/components/Layout.tsx
Normal file
48
pages/components/Layout.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import Head from "next/head"
|
||||
import Link from "next/link"
|
||||
import "tailwindcss/tailwind.css";
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import ToggleDarkMode from '../components/ToggleDarkMode'
|
||||
|
||||
const Layout = (props) => {
|
||||
const { title, children } = props
|
||||
const siteTitle = "yude.jp"
|
||||
return (
|
||||
<div className="page">
|
||||
<Head>
|
||||
<title>{title ? `${title} - ${siteTitle}` : siteTitle}</title>
|
||||
<link rel="icon" href="/static/images/favicon.ico" />
|
||||
</Head>
|
||||
<body className="bg-white text-black dark:bg-black dark:text-white">
|
||||
<main>
|
||||
{/*
|
||||
{title ? <h1 className="page-title">{title}</h1> : ``}
|
||||
*/}
|
||||
<div className="page-main">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
<style jsx global>{`
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
`}</style>
|
||||
<footer>
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="mt-16 border-t-2 border-gray-300 flex flex-col items-center">
|
||||
<div className="sm:w-full text-left py-6">
|
||||
<p className="text-sm text-gray-700 font-bold mb-2">
|
||||
This page is licensed under the MIT License. / Powered by Tailwind CSS and Next.js.
|
||||
</p>
|
||||
<div className="flex justify-center">
|
||||
<ToggleDarkMode />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Layout
|
||||
80
pages/components/ToggleDarkMode.tsx
Normal file
80
pages/components/ToggleDarkMode.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
// components/ToggleDarkMode.tsx
|
||||
import React, { useEffect, useState } from 'react'
|
||||
|
||||
const ToggleDarkMode = () => {
|
||||
const [darkMode, setDarkMode] = useState(false)
|
||||
useEffect(() => {
|
||||
if (
|
||||
localStorage.theme === 'dark' ||
|
||||
(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
|
||||
) {
|
||||
setDarkMode(true)
|
||||
document.querySelector('html')?.classList.add('dark')
|
||||
} else {
|
||||
setDarkMode(false)
|
||||
document.querySelector('html')?.classList.remove('dark')
|
||||
}
|
||||
}, [darkMode])
|
||||
|
||||
const handleChangeDarkMode = () => {
|
||||
if (darkMode) {
|
||||
localStorage.theme = 'light'
|
||||
setDarkMode(false)
|
||||
} else {
|
||||
localStorage.theme = 'dark'
|
||||
setDarkMode(true)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex">
|
||||
<div className="mr-2 text-xs">
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="toggle"
|
||||
id="toggle"
|
||||
checked={darkMode}
|
||||
className="toggle-checkbox"
|
||||
onChange={handleChangeDarkMode}
|
||||
/>
|
||||
<label htmlFor="toggle" className="toggle-label">
|
||||
toggle
|
||||
</label>
|
||||
</div>
|
||||
<div className="text-xs">
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ToggleDarkMode
|
||||
Reference in New Issue
Block a user