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>
    </>
  )
}