text: /* eslint-disable react/require-default-props */
  /* eslint-disable react/no-danger */
  /* eslint-disable react/forbid-prop-types */
  /* eslint-disable jsx-a11y/html-has-lang */
  import React from 'react';
  import PropTypes from 'prop-types';
  
  // Theme change forked from https://github.com/gaearon/overreacted.io/
  export default function HTML({
    htmlAttributes,
    headComponents,
    bodyAttributes,
    preBodyComponents,
    postBodyComponents,
    body,
  }) {
    return (
      <html {...htmlAttributes}>
        <head>
          <meta charSet="utf-8" />
          <meta httpEquiv="x-ua-compatible" content="ie=edge" />
          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
          {headComponents}
        </head>
        <body {...bodyAttributes}>
          <script
            dangerouslySetInnerHTML={{
              __html: `
                (function() {
                  if (typeof window === undefined) return; 
  
                  window.__onThemeChange = function() {};
                  
                  function setTheme(newTheme) {
                    window.__theme = newTheme;
                    preferredTheme = newTheme;
                    document.body.className = newTheme;
                    window.__onThemeChange(newTheme);
                  }
                  
                  let preferredTheme;
                  try {
                    preferredTheme = localStorage.getItem('theme');
                  } catch (err) { }
  
                  window.__setPreferredTheme = function(newTheme) {
                    setTheme(newTheme);
                    try {
                      localStorage.setItem('theme', newTheme);
                    } catch (err) {}
                  }
  
                  let darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
                  darkQuery.addListener(function(e) {
                    window.__setPreferredTheme(e.matches ? 'dark' : 'light')
                  });
                  
                  setTheme(preferredTheme || (darkQuery.matches ? 'dark' : 'light'));
                })();
              `,
            }}
          />
          {preBodyComponents}
          <div key="body" id="___gatsby" dangerouslySetInnerHTML={{ __html: body }} />
          {postBodyComponents}
        </body>
      </html>
    );
  }
  
  HTML.propTypes = {
    htmlAttributes: PropTypes.object,
    headComponents: PropTypes.array,
    bodyAttributes: PropTypes.object,
    preBodyComponents: PropTypes.array,
    body: PropTypes.string,
    postBodyComponents: PropTypes.array,
  };
  