Light mode :ohno:

site/404.tsx

@@ -35,7 +35,7 @@ export default (_data: Lume.Data, helpers: Lume.Helpers) => {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         grid-template-rows: repeat(2, 1fr);
-        box-shadow: 0 0 10px whitesmoke;
+        box-shadow: 0 0 10px var(--foreground);
       }
 
       .square {

site/_includes/base.vto

@@ -110,6 +110,22 @@
         src: url("/assets/JetBrainsMonoBoldItalic.woff2") format("woff2");
       }
 
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --background: black;
+          --foreground: white;
+          --link: yellow;
+        }
+      }
+
+      @media (prefers-color-scheme: light) {
+        :root {
+          --background: white;
+          --foreground: black;
+          --link: red;
+        }
+      }
+
       html {
         font-family: "Bai Jamjuree";
       }
@@ -127,8 +143,8 @@
 
       html,
       body {
-        background-color: black;
+        background-color: var(--background);
-        color: white;
+        color: var(--foreground);
 
         height: 100dvh;
         width: 100dvw;

site/_includes/cube.tsx

@@ -38,7 +38,7 @@ const Cube = (props: CubeProps) => (
       }
 
       .frame:hover {
-        background-color: yellow;
+        background-color: var(--link);
       }
 
       .scene {

site/_includes/text.vto

@@ -50,6 +50,13 @@ layout: base.vto
     border-top-right-radius: 1em;
   }
 
+  @media (prefers-color-scheme: light) {
+    nav {
+      border: 0.15em solid black;
+      border-bottom-width: 0;
+    }
+  }
+
   nav a {
     color: black;
     font-weight: bold;
@@ -57,7 +64,7 @@ layout: base.vto
   }
 
   a {
-    color: yellow;
+    color: var(--link);
   }
 
   a:hover {
@@ -65,7 +72,7 @@ layout: base.vto
   }
 
   footer {
-    border-top: 0.15em solid white;
+    border-top: 0.15em solid var(--foreground);
 
     display: flex;
     justify-content: center;