<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  	<meta name='viewport' content='width=device-width'>

    <title>{{ site.title }}</title>
    <meta name='description' content={{ site.description }}>
    <meta name="theme-color" content="#ffffff"/>

    <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon/favicon-32x32.png">
    <link rel="apple-touch-icon" href="/assets/img/favicon/apple-touch-icon.png">
    <link rel="manifest" href="/manifest.json" />

    <link href="https://unpkg.com/prismjs@1.20.0/themes/prism-okaidia.css" rel="stylesheet">
    <link href="/assets/styles/tailwind.css" rel="stylesheet" />
    <link href="/assets/styles/index.css" rel="stylesheet" />
    <script>
      const isDarkMode = () => localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
      if (isDarkMode()) {
        document.documentElement.classList.add('dark')
      } else {
        document.documentElement.classList.remove('dark')
      }
    </script>
  </head>

  <body class="dark:text-white dark:bg-black">
    {{ content }}
    
  <script>
    document.getElementById("toggleDarkMode").addEventListener("click", function() {
      if (isDarkMode()) {
        localStorage.theme = 'light'
        document.documentElement.classList.remove('dark')
      } else {
        localStorage.theme = 'dark'
        document.documentElement.classList.add('dark')
      }
    });
  </script>
  </body>
</html>