From d24789d8ba83c50961a66ef57e2211d89628bd21 Mon Sep 17 00:00:00 2001
From: RGBCube <git@rgbcu.be>
Date: Sat, 24 Feb 2024 10:52:00 +0300
Subject: [PATCH] Light mode :ohno:

---
 site/404.tsx            |  2 +-
 site/_includes/base.vto | 20 ++++++++++++++++++--
 site/_includes/cube.tsx |  2 +-
 site/_includes/text.vto | 11 +++++++++--
 4 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/site/404.tsx b/site/404.tsx
index 0d25099..91f62ab 100644
--- a/site/404.tsx
+++ b/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 {
diff --git a/site/_includes/base.vto b/site/_includes/base.vto
index d4440a8..4bd6879 100644
--- a/site/_includes/base.vto
+++ b/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;
-        color: white;
+        background-color: var(--background);
+        color: var(--foreground);
 
         height: 100dvh;
         width: 100dvw;
diff --git a/site/_includes/cube.tsx b/site/_includes/cube.tsx
index dc8a9f0..9440a12 100644
--- a/site/_includes/cube.tsx
+++ b/site/_includes/cube.tsx
@@ -38,7 +38,7 @@ const Cube = (props: CubeProps) => (
       }
 
       .frame:hover {
-        background-color: yellow;
+        background-color: var(--link);
       }
 
       .scene {
diff --git a/site/_includes/text.vto b/site/_includes/text.vto
index d36288f..a1a07f2 100644
--- a/site/_includes/text.vto
+++ b/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;