diff --git a/static/color-scheme.js b/static/color-scheme.js
index cb3af0b..9b6162b 100644
--- a/static/color-scheme.js
+++ b/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());
     })
 });
diff --git a/static/style.css b/static/style.css
index 130d1c4..c6d6f68 100644
--- a/static/style.css
+++ b/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;