You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
882 B
TypeScript
33 lines
882 B
TypeScript
1 year ago
|
|
||
|
|
import '~/styles/layout.css'
|
||
|
|
|
||
|
|
export default function Layout({ Component, pageProps }) {
|
||
|
|
function toggleDarkMode(ev) {
|
||
|
|
ev.preventDefault()
|
||
|
|
|
||
|
|
const { matches: lightTheme } = window.matchMedia('(prefers-color-scheme: light)')
|
||
|
|
const toggleClass = lightTheme ? 'forceDark' : 'forceLight'
|
||
|
|
|
||
|
|
document.body.parentElement.classList.toggle(toggleClass)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<header>
|
||
|
|
<h1>ashen.earth</h1>
|
||
|
|
<span class="subtitle">
|
||
|
|
code ramblings and technical oddities
|
||
|
|
</span>
|
||
|
|
<nav>
|
||
|
|
<a id="darkLightToggle" href="#" onClick={toggleDarkMode}>appearance</a>
|
||
|
|
<a target="_blank" href="https://github.com/ashen-dawn">github</a>
|
||
|
|
</nav>
|
||
|
|
</header>
|
||
|
|
<main>
|
||
|
|
<Component {...pageProps} />
|
||
|
|
</main>
|
||
|
|
<noscript><style>{'#darkLightToggle { display: none; }'}</style></noscript>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|