Add ThemeContext

This implementation uses CSS variables, and not CSS in JS. This is done
so that we can support users who disable JS on their browsers.

Fixes #20

components/playground.module.css

@@ -7,6 +7,6 @@
   width: 250px;
   height: 250px;
   border-radius: 50%;
-  border: 2px solid #333;
-  background-color: #ddd;
+  border: 4px solid var(--blue-2);
+  background-color: var(--off-white);
 }

components/theme.tsx

@@ -0,0 +1,36 @@
+import React, { createContext, ReactElement, useEffect, useState } from "react";
+
+type Theme = "light" | "dark";
+
+const ThemeContext = createContext<{
+  theme: Theme;
+  setTheme(newTheme: Theme): void;
+}>({
+  theme: "light",
+  setTheme: () => {
+    throw new Error("Use ThemeProvider instead.");
+  },
+});
+
+interface Props {
+  theme: Theme;
+  children?: ReactElement;
+}
+
+export function ThemeProvider({ children, theme }: Props) {
+  const [currentTheme, setTheme] = useState(theme);
+
+  useEffect(() => {
+    if (currentTheme === "light") {
+      document.body.classList.remove("dark");
+    } else if (currentTheme === "dark") {
+      document.body.classList.add("dark");
+    }
+  }, [currentTheme]);
+
+  return (
+    <ThemeContext.Provider value={{ theme: currentTheme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}

pages/_app.css

@@ -0,0 +1,30 @@
+/* Default is light theme */
+body {
+  --off-white: #fdf8f5;
+  --teal-1: #76ffdc;
+  --teal-2: #4ed4b2;
+  --blue-1: #5caff9;
+  --blue-2: #5caff9;
+  --purple-1: #525284;
+  --purple-2: #2a2a62;
+  --gradient-blue-green: linear-gradient(
+    99.94deg,
+    #1481e3 -17.95%,
+    #4ed4b2 172.82%
+  );
+}
+
+.dark {
+  --off-white: #fdf8f5;
+  --teal-1: #76ffdc;
+  --teal-2: #4ed4b2;
+  --blue-1: #5caff9;
+  --blue-2: #5caff9;
+  --purple-1: #525284;
+  --purple-2: #2a2a62;
+  --gradient-blue-green: linear-gradient(
+    99.94deg,
+    #1481e3 -17.95%,
+    #4ed4b2 172.82%
+  );
+}

pages/_app.tsx

@@ -1,11 +1,15 @@
 import React from "react";
 import { AppProps } from "next/app";
 import { MDXProvider } from "@mdx-js/react";
+import { ThemeProvider } from "../components/theme";
+import "./_app.css";
 
 export default function App({ Component, pageProps }: AppProps): JSX.Element {
   return (
-    <MDXProvider components={{}}>
-      <Component {...pageProps} />
-    </MDXProvider>
+    <ThemeProvider theme="light">
+      <MDXProvider components={{}}>
+        <Component {...pageProps} />
+      </MDXProvider>
+    </ThemeProvider>
   );
 }