React 18 (#863)

* gymnastics to make theme script work with react 18 hydration

* try next 12.1.3 canary to fix SSG head tags?

* revert theme script changes

* next 12.1.3-canary.3

* double-revert some of the use-theme.tsx changes

* separate theme restoration script & move to _document

* bump next

* bump next (again)

* clean up some theme stuff

* use hashed image URLs in webmanifest and feeds

* text experimental react config

* Update ThemeScript.tsx

* switch selfie image to `layout="raw"`

* use `layout="raw"` for all non-imported images

* revert raw images in some places, messes up responsiveness

* fix nitpicky "no divs inside buttons" html validation error

* fix react-player hydration errors

* fix hydration errors from server/client time zone differences

* clean up hydration fixes

* Update format-date.ts

* last-minute cleanup

lib/styles/helpers/themes.ts

@@ -0,0 +1,22 @@
+import { theme, darkTheme } from "../stitches.config";
+
+// theme classnames are generated dynamically by stitches, so have ThemeProvider pull them from there
+export const themeClassNames = {
+  light: theme.className,
+  dark: darkTheme.className,
+};
+
+// colors used for `<meta name="theme-color" .../>` (see components/Layout/Layout.tsx)
+export const themeColors = {
+  light: theme.colors.backgroundOuter?.value,
+  dark: darkTheme.colors.backgroundOuter?.value,
+};
+
+// default to a simple light or dark binary option
+export const colorSchemes = ["light", "dark"];
+
+// https://web.dev/prefers-color-scheme/#the-prefers-color-scheme-media-query
+export const darkModeQuery = "(prefers-color-scheme: dark)";
+
+// local storage key
+export const themeStorageKey = "theme";

lib/styles/stitches.config.ts

@@ -1,7 +1,7 @@
 import { createStitches, defaultThemeMap } from "@stitches/react";
 
 // modified modern-normalize.css in object form:
-// https://github.com/jakejarvis/stitches-normalize/blob/main/index.js
+// https://github.com/jakejarvis/stitches-normalize/blob/main/src/index.ts
 import normalizeCss from "stitches-normalize";
 
 // web fonts