feat: theme

package.json

@@ -25,5 +25,6 @@
     "prettier": "^3.6.2",
     "prettier-plugin-astro": "^0.14.1",
     "typescript": "^5.9.3"
-  }
+  },
+  "packageManager": "pnpm@10.17.1+sha512.17c560fca4867ae9473a3899ad84a88334914f379be46d455cbf92e5cf4b39d34985d452d2583baf19967fa76cb5c17bc9e245529d0b98745721aa7200ecaf7a"
 }

public/scripts/index.js

@@ -237,6 +237,30 @@
       true,
     );
 
+    const themeToggle = document.getElementById("theme-toggle");
+    if (themeToggle) {
+      function updateBearVisual() {
+        const currentTheme =
+          document.documentElement.getAttribute("data-theme");
+        if (currentTheme === "dark") {
+          themeToggle.textContent = "ʕ•ᴥ•ʔつ☾";
+        } else {
+          themeToggle.textContent = "ʕ•ᴥ•ʔつ☼";
+        }
+      }
+
+      updateBearVisual();
+
+      themeToggle.addEventListener("click", () => {
+        const currentTheme =
+          document.documentElement.getAttribute("data-theme");
+        const newTheme = currentTheme === "dark" ? "light" : "dark";
+        document.documentElement.setAttribute("data-theme", newTheme);
+        localStorage.setItem("theme", newTheme);
+        updateBearVisual();
+      });
+    }
+
     window.addEventListener("beforeunload", () => {
       const el = promptEl();
       if (el) el.textContent = TERMINAL_PROMPT;

public/styles/common.css

@@ -142,6 +142,40 @@
   font-display: swap;
 }
 
+:root {
+  --bg: #fff;
+  --text: #000;
+  --code-bg: #f4f4f4;
+  --border: #e1e1e1;
+  --grid-color: rgba(200, 200, 200, 0.4);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #000;
+    --text: #fff;
+    --code-bg: #0a0a0a;
+    --border: #1a1a1a;
+    --grid-color: rgba(55, 55, 55, 0.4);
+  }
+}
+
+[data-theme="light"] {
+  --bg: #fff;
+  --text: #000;
+  --code-bg: #f4f4f4;
+  --border: #e1e1e1;
+  --grid-color: rgba(200, 200, 200, 0.4);
+}
+
+[data-theme="dark"] {
+  --bg: #000;
+  --text: #fff;
+  --code-bg: #0a0a0a;
+  --border: #1a1a1a;
+  --grid-color: rgba(55, 55, 55, 0.4);
+}
+
 pre,
 code,
 pre code,
@@ -158,9 +192,11 @@ body {
   font-family: "Signifier", serif;
   margin: 0;
   padding: 0;
-  height: 100%;
+  min-height: 100vh;
   display: flex;
   flex-direction: column;
+  background: var(--bg);
+  color: var(--text);
 }
 
 header,
@@ -191,8 +227,8 @@ li {
 
 .graph-background {
   background-image:
-    linear-gradient(to right, rgba(200, 200, 200, 0.4) 1px, transparent 1px),
-    linear-gradient(to bottom, rgba(200, 200, 200, 0.4) 1px, transparent 1px);
+    linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
   background-size: 3vw 3vw;
 }
 
@@ -200,8 +236,8 @@ li {
   display: inline-block;
   width: 10px;
   height: 1em;
-  background-color: white;
-  border: 1px solid black;
+  background-color: var(--bg);
+  border: 1px solid var(--text);
   vertical-align: text-top;
   animation: blink 1s step-start infinite;
 }

public/styles/posts.css

@@ -41,7 +41,7 @@ li {
 
 .post-meta {
   font-size: 1.3em;
-  color: black;
+  color: var(--text);
   margin-left: 100px;
 }
 
@@ -118,12 +118,12 @@ article pre {
   padding: 1rem;
   overflow-x: auto;
   border-radius: 4px;
-  background: #f4f4f4 !important;
-  border: 1px solid #e1e1e1;
+  background: var(--code-bg) !important;
+  border: 1px solid var(--border);
 }
 
 pre * {
-  background: #f4f4f4 !important;
+  background: var(--code-bg) !important;
 }
 
 :not(pre) > code {
@@ -131,9 +131,9 @@ pre * {
   padding: 4px;
   margin: 0 5px;
   white-space: nowrap;
-  border: 1px solid #e1e1e1;
+  border: 1px solid var(--border);
   border-radius: 4px;
-  background: #f4f4f4 !important;
+  background: var(--code-bg) !important;
 }
 
 .astro-code {

src/components/Footer.astro

@@ -1,5 +1,5 @@
 <footer>
-  <span>ʕ •ᴥ•ʔ</span>
+  <span id="theme-toggle">ʕ•ᴥ•ʔつ☼</span>
   <div class="footer-links">
     <a href="/gist.html" data-topic="gist">gist</a>
     <a href="/git.html" data-topic="git">git</a>
@@ -20,6 +20,10 @@
     align-items: center;
     justify-content: space-between;
   }
+  #theme-toggle {
+    cursor: pointer;
+    user-select: none;
+  }
   .footer-links a {
     margin-left: 25px;
     text-decoration: none;

src/layouts/BaseLayout.astro

@@ -12,6 +12,17 @@ const {
 <!doctype html>
 <html lang="en">
   <head>
+    <script is:inline>
+      (function () {
+        const stored = localStorage.getItem("theme");
+        const theme =
+          stored ||
+          (matchMedia("(prefers-color-scheme: dark)").matches
+            ? "dark"
+            : "light");
+        document.documentElement.setAttribute("data-theme", theme);
+      })();
+    </script>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />