69 lines
1.6 KiB
TypeScript
69 lines
1.6 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import { SearchIndex } from '../utils/search'
|
|
import Footer from './Footer'
|
|
import Header from './Header'
|
|
|
|
function darkModeDefault() {
|
|
if (typeof window === 'undefined') {
|
|
return false
|
|
} else {
|
|
const theme = localStorage.getItem('theme')
|
|
return (
|
|
theme === 'dark' ||
|
|
(!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)
|
|
)
|
|
}
|
|
}
|
|
|
|
interface LayoutProps {
|
|
children: React.ReactNode
|
|
searchIndex: SearchIndex
|
|
}
|
|
|
|
export default function Layout({ children, searchIndex }: LayoutProps) {
|
|
const [darkMode, setDarkMode] = useState(darkModeDefault())
|
|
|
|
useEffect(() => {
|
|
if (darkMode) {
|
|
document.documentElement.classList.add('dark')
|
|
localStorage.setItem('theme', 'dark')
|
|
} else {
|
|
document.documentElement.classList.remove('dark')
|
|
localStorage.setItem('theme', 'light')
|
|
}
|
|
}, [darkMode])
|
|
|
|
useEffect(() => {
|
|
const darkQuery = window.matchMedia('(prefers-color-scheme: dark)')
|
|
|
|
darkQuery.onchange = (e) => {
|
|
if (e.matches) {
|
|
setDarkMode(true)
|
|
} else {
|
|
setDarkMode(false)
|
|
}
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<div>
|
|
<div className="sticky top-0 z-10 h-16">
|
|
<Header
|
|
searchIndex={searchIndex}
|
|
name="Conky"
|
|
darkMode={darkMode}
|
|
setDarkMode={setDarkMode}
|
|
/>
|
|
</div>
|
|
<div className="relative pb-4">
|
|
<div className="flex flex-col items-center max-w-3xl w-full mx-auto">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
<div className="relative">
|
|
<Footer />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|