fix colors if media set to dark

This commit fixes a few edge-cases. First, if you `prefers-color-scheme`
is dark, your background will no longer be dark in light mode.
Furthermore, switching from dark to system theme now works. It did not
before, as we queried our iframe for color-scheme instead of the parent
window (our iframe inherited the color-scheme from the parent document).
Finally, the navbar iframe has its color-scheme set separately, which
caused issues in a few cases.

static/color-scheme.js

@@ -5,10 +5,12 @@ function getTheme() {
 function setTheme(themeName) {
     localStorage.setItem('theme', themeName);
     if (themeName == "system") {
-        themeName = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+        themeName = parent.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
     }
     // the navbar is in an iframe, so we need to set this variable in the parent document
-    parent.document.documentElement.setAttribute('data-theme', themeName);
+    for (const win of [window, parent]) {
+        win.document.documentElement.setAttribute('data-theme', themeName);
+    }
 }
 
 setTheme(getTheme())
@@ -22,7 +24,7 @@ document.addEventListener("DOMContentLoaded", function() {
     });
 
     // also check to see if the user changes their theme settings while the page is loaded.
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+    parent.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
         setTheme(getTheme());
     })
 });

static/style.css

@@ -53,7 +53,6 @@ nav { line-height: normal; }
     --fragment-offset: calc(var(--header-height) + 1em);
     --content-width: 55vw;
 }
-
 /* automatic dark theme if no javascript */
 @media (prefers-color-scheme: dark) {
     :root {
@@ -83,6 +82,41 @@ nav { line-height: normal; }
     }
 }
 
+[data-theme="light"] {
+    color-scheme: light;
+
+    --header-height: 3em;
+    --fragment-offset: calc(var(--header-height) + 1em);
+    --content-width: 55vw;
+
+    --header-bg: #f8f8f8;
+    --body-bg: white;
+    --code-bg: #f3f3f3;
+    --text-color: black;
+    --link-color: hsl(210, 100%, 30%);
+
+    --implicit-arg-text-color: var(--text-color);
+
+    --def-color: #92dce5;
+    --def-color-hsl-angle: 187;
+    --theorem-color: #8fe388;
+    --theorem-color-hsl-angle: 115;
+    --axiom-and-constant-color: #f44708;
+    --axiom-and-constant-color-hsl-angle: 16;
+    --structure-and-inductive-color: #f0a202;
+    --structure-and-inductive-color-hsl-angle: 40;
+    --starting-percentage: 100;
+
+    --hamburger-bg-color: #eee;
+    --hamburger-active-color: white;
+    --hamburger-border-color: #ccc;
+
+    --tags-border-color: #555;
+
+    --fragment-offset: calc(var(--header-height) + 1em);
+    --content-width: 55vw;
+}
+
 [data-theme="dark"] {
     color-scheme: dark;