dynamic favicon

Author: John Letey

packages/docs/src/components/head.js

@@ -19,14 +19,30 @@ export default props => {
     <Helmet htmlAttributes={{ lang: 'en-US' }}>
       <title>{title}</title>
       <meta name="description" content={pkg.description} />
-      <link rel="icon" type="image/png" href="/icon.png" />
+      <link
+        rel="icon"
+        media="(prefers-color-scheme:dark)"
+        href="/icon-dark.png"
+        type="image/png"
+      />
+      <link
+        rel="icon"
+        media="(prefers-color-scheme:light)"
+        href="/icon.png"
+        type="image/png"
+      />
       <link rel="apple-touch-icon" type="image/png" href="/icon.png" />
       <meta name="twitter:card" content="summary" />
       <meta name="twitter:site" content="@jxnblk" />
       <meta name="twitter:image" content="https://theme-ui.com/card.png" />
       <meta name="twitter:title" content={title} />
       <meta name="twitter:description" content={pkg.description} />
       <meta name="theme-color" content={theme.colors.background} />
+      <script
+        src="https://unpkg.com/[email protected]/dist/index.js"
+        crossOrigin="anonymous"
+        type="application/javascript"
+      />
     </Helmet>
   )
 }