Merge pull request #5 from barrett-ruth/theme

dark 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,23 +192,27 @@ 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,
 footer {
   padding: 20px;
-}
-
-header {
   font-size: 1.5em;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
+#theme-toggle {
+  cursor: pointer;
+  user-select: none;
+}
+
 .main {
   display: flex;
   justify-content: center;
@@ -191,8 +229,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 +238,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,6 +1,12 @@
 <footer>
-  <span>ʕ •ᴥ•ʔ</span>
-  <div class="footer-links">
+  <div class="footer-links-left">
+    <a href="/resume.pdf" data-topic="resume" target="_blank">resume</a>
+    <a href="/transcript.pdf" data-topic="transcript" target="_blank"
+      >transcript</a
+    >
+    <a href="/about.html" data-topic="about">about</a>
+  </div>
+  <div class="footer-links-right">
     <a href="/gist.html" data-topic="gist">gist</a>
     <a href="/git.html" data-topic="git">git</a>
     <a
@@ -13,18 +19,23 @@
 </footer>
 
 <style>
-  footer {
-    padding: 20px;
-    font-size: 1.5em;
+  .footer-links-left,
+  .footer-links-right {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
+    gap: 25px;
   }
-  .footer-links a {
-    margin-left: 25px;
+  .footer-links-left a,
+  .footer-links-right a {
     text-decoration: none;
     cursor: pointer;
   }
+  @media (max-width: 768px) {
+    .footer-links-left,
+    .footer-links-right {
+      flex-direction: column;
+      gap: 5px;
+    }
+  }
 </style>
 
 <script type="module" src="/scripts/index.js"></script>

src/components/Header.astro

@@ -21,35 +21,21 @@ const promptText = topic ? `barrett@ruth:~$ ${topic}` : "barrett@ruth:~$";
       <span class="terminal-cursor"></span>
     </div>
   </a>
-  <div class="header-links">
-    <a href="/resume.pdf" data-topic="resume" target="_blank">resume</a>
-    <a href="/transcript.pdf" data-topic="transcript" target="_blank"
-      >transcript</a
-    >
-    <a href="/about.html" data-topic="about">about</a>
-  </div>
+  <span id="theme-toggle">☼⊂ʕ•ᴥ•ʔ</span>
 </header>
 
 <style>
-  .header-links a {
-    margin-left: 25px;
-    text-decoration: none;
+  #theme-toggle {
     cursor: pointer;
+    user-select: none;
   }
   @media (max-width: 768px) {
     header {
       flex-direction: column;
       align-items: flex-start;
     }
-    .header-links {
+    #theme-toggle {
       align-self: flex-end;
-      display: flex;
-      flex-direction: column;
-      text-align: right;
-      gap: 5px;
-    }
-    .header-links a {
-      margin-left: 0;
     }
   }
 </style>

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" />