--- a/mrjunejune/pages/base.css	Wed Dec 31 11:20:08 2025 -0800
+++ b/mrjunejune/pages/base.css	Wed Dec 31 14:11:21 2025 -0800
@@ -208,3 +208,52 @@
   display: flex;
   justify-content: center;
 }
+
+/* Auto dark mode based on system preference */
+@media (prefers-color-scheme: dark) {
+  :root:not(.light-mode) {
+    --white: hsl(224, 10%, 10%);
+    --black: hsl(0, 0%, 90%);
+    --darkgray: #cccccc;
+    --lightgray: #666666;
+    --green: #3d1ea0;
+    --orange: #025ccc;
+    --purple: #2b5b06;
+    --red: #04bb7a;
+    --blue: #932f0e;
+    --darktext: #bebebe;
+    --awesome: #23cade;
+    --accent: #ffcc00;
+    --accent-dark: #ffb275;
+    --gray: 159, 140, 96;
+    --gray-light: 26, 22, 15;
+    --gray-dark: 221, 214, 198;
+    --gray-gradient: rgba(26, 22, 15, 50%), #000;
+    --box-shadow: 0 -2px -6px rgba(159, 140, 96, 25%),
+      0 -8px -24px rgba(159, 140, 96, 33%), 0 -16px -32px rgba(159, 140, 96, 33%);
+  }
+}
+
+/* Dark mode toggle button */
+.dark-mode-toggle {
+  position: fixed;
+  top: 20px;
+  left: 20px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--white);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  transition: all 0.3s ease;
+  z-index: 1000;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+}
+
+.dark-mode-toggle:hover {
+  transform: scale(1.1);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+}