diff --git a/.prettierrc.toml b/.prettierrc.toml
index 8ca108d..5d819e0 100644
--- a/.prettierrc.toml
+++ b/.prettierrc.toml
@@ -1,2 +1,3 @@
 lineWidth = 70
 proseWrap = "always"
+semi = false
diff --git a/README.md b/README.md
index 5cb1301..7049783 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Hakyll-powered blog
+# gradient ascent
 
 This repository hosts the source code for my blog, powered by
 [hakyll](https://jaspervdj.be/hakyll/).
diff --git a/package.json b/package.json
index dfb63a5..94fedb9 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,8 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "postcss -o src/build/css/bundle.css src/css/*.css",
-    "watch": "postcss -o src/build/css/bundle.css src/css/*.css --watch"
+    "build": "rollup -c",
+    "watch": "rollup -c -w"
   },
   "keywords": [],
   "author": "",
diff --git a/src/css/default.css b/src/css/default.css
index 4664c50..20c3942 100644
--- a/src/css/default.css
+++ b/src/css/default.css
@@ -7,16 +7,16 @@
 
 @layer base {
   body {
-    @apply bg-gray-950 text-gray-100 font-serif;
+    @apply dark:bg-background-dark bg-background-light dark:text-primary-dark text-primary-light font-serif;
   }
 }
 
 @layer utilities {
   .external-link {
-    @apply text-violet-600 pl-1 pr-4 rounded-sm hover:bg-violet-950 transition-colors duration-300 relative;
+    @apply dark:text-violet-600 text-indigo-600 hover:bg-indigo-200 pr-3 rounded-sm dark:hover:bg-violet-950 transition-colors duration-300 relative;
   }
   .external-link::after {
-    @apply absolute top-1 right-2 w-2 h-2 border-2 border-violet-600 rounded-full translate-x-1/2 -translate-y-1/2;
+    @apply absolute top-1 right-2 w-2 h-2 border-2 border-indigo-600 dark:border-violet-600 rounded-full translate-x-1/2 -translate-y-1/2;
     content: "";
   }
   .small-caps {
diff --git a/src/index.html b/src/index.html
index 2f55bce..a7400a5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,27 +3,29 @@ desc: "a blog about computers, math, hacks, games, and life"
 image: "./images/robert-pearce-UwHN0jU_YqQ-unsplash-800w.jpg"
 lang: "en"
 stylesheet: "default"
-title: "gradient ascent"
+title: "blog | youwen wu"
 ---
 
 <main>
   <section>
     <h2 class="text-3xl">Latest</h2>
-    <hr class="sm:mr-2 max-w-sm border-0 h-0.5 bg-gray-500 rounded-md mt-2" />
+    <hr
+      class="sm:mr-2 max-w-sm border-0 h-0.5 dark:bg-muted-dark bg-muted-light rounded-md mt-2"
+    />
     <ul class="mt-6 space-y-4 md:space-y-8">
       $for(posts)$
       <li class="group">
         <div class="rounded-md p-2">
           <a
             href=".$url$"
-            class="w-fit group-hover:text-gray-400 transition-colors"
+            class="w-fit dark:group-hover:text-muted-dark group-hover:text-muted-light transition-colors"
           >
             <h3 class="text-2xl">$title$</h3>
             <p class="text-sm">$date$</p>
           </a>
         </div>
         <hr
-          class="max-w-[200px] border-0 h-1 bg-gray-800 rounded-lg px-2 group-hover:max-w-[250px] group-hover:bg-violet-950 transition-all duration-400"
+          class="max-w-[200px] border-0 h-1 dark:bg-accent-dark bg-accent-light rounded-lg px-2 group-hover:max-w-[250px] dark:group-hover:bg-secondary-dark group-hover:bg-secondary-light transition-all duration-400"
         />
       </li>
       $endfor$
diff --git a/src/js/main.js b/src/js/main.js
index ab2b9a1..36d6c26 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -1 +1,57 @@
-import "../css/default.css";
+import "../css/default.css"
+
+// @ts-check
+
+const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
+const themeSystem = () => {
+  if (prefersDark) {
+    document.documentElement.classList.add("dark")
+  } else {
+    document.documentElement.classList.remove("dark")
+  }
+}
+const themeLight = () => {
+  document.documentElement.classList.remove("dark")
+}
+const themeDark = () => {
+  document.documentElement.classList.add("dark")
+}
+let currentTheme =
+  localStorage.getItem("theme") === "dark"
+    ? 2
+    : localStorage.getItem("theme") === "light"
+      ? 1
+      : 0
+const themeButton = document.getElementById("theme-toggle")
+themeButton.addEventListener("click", () => {
+  currentTheme = (currentTheme + 1) % 3
+  switch (currentTheme) {
+    case 0:
+      localStorage.removeItem("theme")
+      themeSystem()
+      themeButton.innerText = "theme: system"
+      break
+    case 1:
+      if (prefersDark) {
+        localStorage.setItem("theme", "light")
+        themeLight()
+        themeButton.innerText = "theme: light"
+      } else {
+        localStorage.setItem("theme", "dark")
+        themeDark()
+        themeButton.innerText = "theme: dark"
+      }
+      break
+    case 2:
+      if (prefersDark) {
+        localStorage.setItem("theme", "dark")
+        themeDark()
+        themeButton.innerText = "theme: dark"
+      } else {
+        localStorage.setItem("theme", "light")
+        themeLight()
+        themeButton.innerText = "theme: light"
+      }
+      break
+  }
+})
diff --git a/src/out/bundle.css b/src/out/bundle.css
index ddac422..b4fc48d 100644
--- a/src/out/bundle.css
+++ b/src/out/bundle.css
@@ -1 +1 @@
-@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");/* ! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com */*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::before,::after{--tw-content:''}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type='button']),input:where([type='reset']),input:where([type='submit']){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type='search']{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder, textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role="button"]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}body{--tw-bg-opacity:1;background-color:rgb(3 7 18/var(--tw-bg-opacity));font-family:Merriweather,serif;--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity))}*,::before,::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x:;--tw-pan-y:;--tw-pinch-zoom:;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position:;--tw-gradient-via-position:;--tw-gradient-to-position:;--tw-ordinal:;--tw-slashed-zero:;--tw-numeric-figure:;--tw-numeric-spacing:;--tw-numeric-fraction:;--tw-ring-inset:;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246/0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur:;--tw-brightness:;--tw-contrast:;--tw-grayscale:;--tw-hue-rotate:;--tw-invert:;--tw-saturate:;--tw-sepia:;--tw-drop-shadow:;--tw-backdrop-blur:;--tw-backdrop-brightness:;--tw-backdrop-contrast:;--tw-backdrop-grayscale:;--tw-backdrop-hue-rotate:;--tw-backdrop-invert:;--tw-backdrop-opacity:;--tw-backdrop-saturate:;--tw-backdrop-sepia:;--tw-contain-size:;--tw-contain-layout:;--tw-contain-paint:;--tw-contain-style:}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x:;--tw-pan-y:;--tw-pinch-zoom:;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position:;--tw-gradient-via-position:;--tw-gradient-to-position:;--tw-ordinal:;--tw-slashed-zero:;--tw-numeric-figure:;--tw-numeric-spacing:;--tw-numeric-fraction:;--tw-ring-inset:;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246/0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur:;--tw-brightness:;--tw-contrast:;--tw-grayscale:;--tw-hue-rotate:;--tw-invert:;--tw-saturate:;--tw-sepia:;--tw-drop-shadow:;--tw-backdrop-blur:;--tw-backdrop-brightness:;--tw-backdrop-contrast:;--tw-backdrop-grayscale:;--tw-backdrop-hue-rotate:;--tw-backdrop-invert:;--tw-backdrop-opacity:;--tw-backdrop-saturate:;--tw-backdrop-sepia:;--tw-contain-size:;--tw-contain-layout:;--tw-contain-paint:;--tw-contain-style:}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.mx-auto{margin-left:auto;margin-right:auto}.mb-14{margin-bottom:3.5rem}.mb-3{margin-bottom:0.75rem}.mb-4{margin-bottom:1rem}.mt-1{margin-top:0.25rem}.mt-14{margin-top:3.5rem}.mt-2{margin-top:0.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.h-0{height:0px}.h-0\.5{height:0.125rem}.h-1{height:0.25rem}.w-fit{width:-moz-fit-content;width:fit-content}.max-w-3xl{max-width:48rem}.max-w-\[200px\]{max-width:200px}.max-w-sm{max-width:24rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.rounded-xl{border-radius:0.75rem}.border-0{border-width:0px}.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}.p-2{padding:0.5rem}.px-1{padding-left:0.25rem;padding-right:0.25rem}.px-2{padding-left:0.5rem;padding-right:0.5rem}.px-4{padding-left:1rem;padding-right:1rem}.pb-12{padding-bottom:3rem}.font-serif{font-family:Merriweather,serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-medium{font-weight:500}.italic{font-style:italic}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}.external-link{position:relative;border-radius:0.125rem;padding-left:0.25rem;padding-right:1rem;--tw-text-opacity:1;color:rgb(124 58 237/var(--tw-text-opacity));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:300ms}.external-link:hover{--tw-bg-opacity:1;background-color:rgb(46 16 101/var(--tw-bg-opacity))}.external-link::after{position:absolute;top:0.25rem;right:0.5rem;height:0.5rem;width:0.5rem;--tw-translate-x:50%;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:9999px;border-width:2px;--tw-border-opacity:1;border-color:rgb(124 58 237/var(--tw-border-opacity));content:""}.post{h1{font-size:1.5rem;line-height:2rem}h1{font-weight:700}h2,h3,h4,h5,h6{margin-top:1rem}h2,h3,h4,h5,h6{font-size:1.25rem;line-height:1.75rem}h2,h3,h4,h5,h6{font-weight:700}p{margin-top:0.5rem;margin-bottom:0.5rem}p{font-size:1.125rem;line-height:1.75rem}p{line-height:2}img{margin-left:auto;margin-right:auto}img{margin-top:1rem;margin-bottom:1rem}img{border-radius:0.5rem}div.sourceCode{border-radius:0.5rem}div.sourceCode{padding:1rem}}.hover\:text-gray-500:hover{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.group:hover .group-hover\:max-w-\[250px\]{max-width:250px}.group:hover .group-hover\:bg-violet-950{--tw-bg-opacity:1;background-color:rgb(46 16 101/var(--tw-bg-opacity))}.group:hover .group-hover\:text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}@media (min-width:640px){.sm\:mr-2{margin-right:0.5rem}}@media (min-width:768px){.md\:mt-24{margin-top:6rem}.md\:space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.md\:text-5xl{font-size:3rem;line-height:1}}
+@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");/* ! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com */*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::before,::after{--tw-content:''}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type='button']),input:where([type='reset']),input:where([type='submit']){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type='search']{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder, textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role="button"]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}body{--tw-bg-opacity:1;background-color:rgb(214 211 209/var(--tw-bg-opacity));font-family:Merriweather,serif;--tw-text-opacity:1;color:rgb(10 10 10/var(--tw-text-opacity))}body:where(.dark,.dark *){--tw-bg-opacity:1;background-color:rgb(3 7 18/var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity))}*,::before,::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x:;--tw-pan-y:;--tw-pinch-zoom:;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position:;--tw-gradient-via-position:;--tw-gradient-to-position:;--tw-ordinal:;--tw-slashed-zero:;--tw-numeric-figure:;--tw-numeric-spacing:;--tw-numeric-fraction:;--tw-ring-inset:;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246/0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur:;--tw-brightness:;--tw-contrast:;--tw-grayscale:;--tw-hue-rotate:;--tw-invert:;--tw-saturate:;--tw-sepia:;--tw-drop-shadow:;--tw-backdrop-blur:;--tw-backdrop-brightness:;--tw-backdrop-contrast:;--tw-backdrop-grayscale:;--tw-backdrop-hue-rotate:;--tw-backdrop-invert:;--tw-backdrop-opacity:;--tw-backdrop-saturate:;--tw-backdrop-sepia:;--tw-contain-size:;--tw-contain-layout:;--tw-contain-paint:;--tw-contain-style:}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x:;--tw-pan-y:;--tw-pinch-zoom:;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position:;--tw-gradient-via-position:;--tw-gradient-to-position:;--tw-ordinal:;--tw-slashed-zero:;--tw-numeric-figure:;--tw-numeric-spacing:;--tw-numeric-fraction:;--tw-ring-inset:;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246/0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur:;--tw-brightness:;--tw-contrast:;--tw-grayscale:;--tw-hue-rotate:;--tw-invert:;--tw-saturate:;--tw-sepia:;--tw-drop-shadow:;--tw-backdrop-blur:;--tw-backdrop-brightness:;--tw-backdrop-contrast:;--tw-backdrop-grayscale:;--tw-backdrop-hue-rotate:;--tw-backdrop-invert:;--tw-backdrop-opacity:;--tw-backdrop-saturate:;--tw-backdrop-sepia:;--tw-contain-size:;--tw-contain-layout:;--tw-contain-paint:;--tw-contain-style:}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.mx-auto{margin-left:auto;margin-right:auto}.mb-14{margin-bottom:3.5rem}.mb-3{margin-bottom:0.75rem}.mb-4{margin-bottom:1rem}.ml-2{margin-left:0.5rem}.mt-1{margin-top:0.25rem}.mt-14{margin-top:3.5rem}.mt-2{margin-top:0.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.inline{display:inline}.hidden{display:none}.h-0{height:0px}.h-0\.5{height:0.125rem}.h-1{height:0.25rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-1{width:0.25rem}.max-w-3xl{max-width:48rem}.max-w-\[200px\]{max-width:200px}.max-w-sm{max-width:24rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.rounded-sm{border-radius:0.125rem}.rounded-xl{border-radius:0.75rem}.border-0{border-width:0px}.bg-accent-light{--tw-bg-opacity:1;background-color:rgb(120 113 108/var(--tw-bg-opacity))}.bg-muted-light{--tw-bg-opacity:1;background-color:rgb(168 162 158/var(--tw-bg-opacity))}.bg-primary-light{--tw-bg-opacity:1;background-color:rgb(10 10 10/var(--tw-bg-opacity))}.p-1{padding:0.25rem}.p-2{padding:0.5rem}.px-1{padding-left:0.25rem;padding-right:0.25rem}.px-2{padding-left:0.5rem;padding-right:0.5rem}.px-4{padding-left:1rem;padding-right:1rem}.pb-12{padding-bottom:3rem}.font-serif{font-family:Merriweather,serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-medium{font-weight:500}.italic{font-style:italic}.leading-relaxed{line-height:1.625}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}.external-link{position:relative;border-radius:0.125rem;padding-right:0.75rem;--tw-text-opacity:1;color:rgb(79 70 229/var(--tw-text-opacity));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:300ms}.external-link:hover{--tw-bg-opacity:1;background-color:rgb(199 210 254/var(--tw-bg-opacity))}.external-link:where(.dark,.dark *){--tw-text-opacity:1;color:rgb(124 58 237/var(--tw-text-opacity))}.external-link:hover:where(.dark,.dark *){--tw-bg-opacity:1;background-color:rgb(46 16 101/var(--tw-bg-opacity))}.external-link::after{position:absolute;top:0.25rem;right:0.5rem;height:0.5rem;width:0.5rem;--tw-translate-x:50%;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-radius:9999px;border-width:2px;--tw-border-opacity:1;border-color:rgb(79 70 229/var(--tw-border-opacity))}.external-link:where(.dark,.dark *)::after{--tw-border-opacity:1;border-color:rgb(124 58 237/var(--tw-border-opacity))}.external-link::after{content:""}.post{h1{font-size:1.5rem;line-height:2rem}h1{font-weight:700}h2,h3,h4,h5,h6{margin-top:1rem}h2,h3,h4,h5,h6{font-size:1.25rem;line-height:1.75rem}h2,h3,h4,h5,h6{font-weight:700}p{margin-top:0.5rem;margin-bottom:0.5rem}p{font-size:1.125rem;line-height:1.75rem}p{line-height:2}img{margin-left:auto;margin-right:auto}img{margin-top:1rem;margin-bottom:1rem}img{border-radius:0.5rem}div.sourceCode{border-radius:0.5rem}div.sourceCode{padding:1rem}}.hover\:bg-secondary-light:hover{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity))}.group:hover .group-hover\:max-w-\[250px\]{max-width:250px}.group:hover .group-hover\:bg-secondary-light{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity))}.group:hover .group-hover\:text-muted-light{--tw-text-opacity:1;color:rgb(168 162 158/var(--tw-text-opacity))}@media (min-width:640px){.sm\:mr-2{margin-right:0.5rem}}@media (min-width:768px){.md\:mt-24{margin-top:6rem}.md\:space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.md\:text-5xl{font-size:3rem;line-height:1}}.dark\:inline:where(.dark,.dark *){display:inline}.dark\:hidden:where(.dark,.dark *){display:none}.dark\:bg-accent-dark:where(.dark,.dark *){--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}.dark\:bg-muted-dark:where(.dark,.dark *){--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity))}.dark\:bg-primary-dark:where(.dark,.dark *){--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.dark\:hover\:bg-secondary-dark:hover:where(.dark,.dark *){--tw-bg-opacity:1;background-color:rgb(46 16 101/var(--tw-bg-opacity))}.dark\:hover\:text-muted-dark:hover:where(.dark,.dark *){--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.group:hover .dark\:group-hover\:bg-secondary-dark:where(.dark,.dark *){--tw-bg-opacity:1;background-color:rgb(46 16 101/var(--tw-bg-opacity))}.group:hover .dark\:group-hover\:text-muted-dark:where(.dark,.dark *){--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}
diff --git a/src/out/bundle.js b/src/out/bundle.js
index 8b13789..1aeeb16 100644
--- a/src/out/bundle.js
+++ b/src/out/bundle.js
@@ -1 +1 @@
-
+const e=window.matchMedia("(prefers-color-scheme: dark)").matches,t=()=>{document.documentElement.classList.remove("dark")},m=()=>{document.documentElement.classList.add("dark")};let a="dark"===localStorage.getItem("theme")?2:"light"===localStorage.getItem("theme")?1:0;const c=document.getElementById("theme-toggle");c.addEventListener("click",(()=>{switch(a=(a+1)%3,a){case 0:localStorage.removeItem("theme"),e?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark"),c.innerText="theme: system";break;case 1:e?(localStorage.setItem("theme","light"),t(),c.innerText="theme: light"):(localStorage.setItem("theme","dark"),m(),c.innerText="theme: dark");break;case 2:e?(localStorage.setItem("theme","dark"),m(),c.innerText="theme: dark"):(localStorage.setItem("theme","light"),t(),c.innerText="theme: light")}}));
diff --git a/src/templates/default.html b/src/templates/default.html
index a333849..66e4f35 100644
--- a/src/templates/default.html
+++ b/src/templates/default.html
@@ -51,11 +51,34 @@
 
     <link rel="stylesheet" href="./out/bundle.css" />
     <link rel="stylesheet" href="./css/code.css" />
+
+    <script>
+      if (
+        localStorage.theme === "dark" ||
+        (!("theme" in localStorage) &&
+          window.matchMedia("(prefers-color-scheme: dark)").matches)
+      ) {
+        document.documentElement.classList.add("dark")
+      } else {
+        document.documentElement.classList.remove("dark")
+      }
+      window.onload = () => {
+        var themeButton = document.getElementById("theme-toggle")
+        const theme = localStorage.getItem("theme")
+        if (theme === "light") {
+          themeButton.innerText = "theme: light"
+        } else if (theme === "dark") {
+          themeButton.innerText = "theme: dark"
+        } else {
+          themeButton.innerText = "theme: system"
+        }
+      }
+    </script>
   </head>
   <body class="container max-w-3xl mx-auto px-4">
     <header class="mt-14 md:mt-24 mb-14">
       <h1 class="text-4xl md:text-5xl font-serif font-medium">
-        <a href="/" class="hover:text-gray-500 transition-colors"
+        <a href="/" class="dark:hover:text-muted-dark transition-colors"
           >Gradient Ascent</a
         >
       </h1>
@@ -65,19 +88,33 @@
       <a class="text-sm external-link" href="https://youwen.dev"
         >by Youwen Wu</a
       >
+      <span class="ml-2 font-serif">|</span>
+      <button
+        id="theme-toggle"
+        class="ml-2 text-sm hover:bg-secondary-light dark:hover:bg-secondary-dark rounded-sm transition-colors p-1"
+      ></button>
     </header>
     $body$
     <footer class="mt-14 md:mt-24 pb-12">
-      <hr class="border-0 bg-gray-400 rounded-xl h-0.5 mb-4" />
-      <p class="text-sm">
-        &copy; 2024 Youwen Wu. Powered by
+      <hr
+        class="border-0 dark:bg-muted-dark bg-muted-light rounded-xl h-0.5 mb-4"
+      />
+      <p class="text-sm leading-relaxed">
+        &copy; 2024 Youwen Wu. Generated by
         <a
           href="https://jaspervdj.be/hakyll/"
           class="external-link"
           target="__blank"
           >Hakyll.</a
         >
-        Content freely available under
+        View the source
+        <a
+          href="https://github.com/couscousdude/blog"
+          class="external-link"
+          target="__blank"
+          >on GitHub.</a
+        >
+        <br />Content freely available under
         <a
           class="external-link"
           target="__blank"
diff --git a/tailwind.config.js b/tailwind.config.js
index ddd4e6f..8479d32 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: "selector",
   content: ["./src/**/*.{html,js}"],
   theme: {
     extend: {
@@ -7,6 +8,28 @@ module.exports = {
         sans: ["Inter", "sans-serif"],
         serif: ["Merriweather", "serif"],
       },
+      colors: {
+        primary: {
+          dark: "#e2e8f0",
+          light: "#0a0a0a",
+        },
+        secondary: {
+          dark: "#2e1065",
+          light: "#4f46e5",
+        },
+        accent: {
+          dark: "#9ca3af",
+          light: "#78716c",
+        },
+        muted: {
+          dark: "#6b7280",
+          light: "#a8a29e",
+        },
+        background: {
+          light: "#d6d3d1",
+          dark: "#030712",
+        },
+      },
     },
   },
   plugins: [require("@tailwindcss/typography")],