From 09af25c0b28f5561a94ea460b22f6fb0633def00 Mon Sep 17 00:00:00 2001
From: Andrea Diaz Correia <andrea.diaz.correia@gmail.com>
Date: Mon, 13 Jul 2026 22:32:11 -0300
Subject: [PATCH] Add dark mode theme toggle with system preference support

Add theme switcher button in header that toggles between light and dark modes. Theme preference is saved to localStorage and respects system prefers-color-scheme when no manual selection is made. CSS custom properties enable runtime theme switching with smooth transitions.
---
 sass/_footer.scss    |  4 +--
 sass/_global.scss    |  9 +++---
 sass/_header.scss    | 27 ++++++++++++++++--
 sass/_theme.scss     | 33 +++++++++++++++++++++
 sass/style.scss      |  5 ++++
 templates/index.html | 68 ++++++++++++++++++++++++++++++++++++++++++++
 6 files changed, 138 insertions(+), 8 deletions(-)
 create mode 100644 sass/_theme.scss

diff --git a/sass/_footer.scss b/sass/_footer.scss
index 2ab06e1..75c4502 100644
--- a/sass/_footer.scss
+++ b/sass/_footer.scss
@@ -13,11 +13,11 @@
     justify-content: space-between;
 
     a {
-      color: #333;
+      color: var(--font-color);
       opacity: 0.4;
 
       &:hover {
-        color: $primary-color;
+        color: var(--primary-color);
         opacity: 1;
       }
     }
diff --git a/sass/_global.scss b/sass/_global.scss
index 023021e..86d81b6 100644
--- a/sass/_global.scss
+++ b/sass/_global.scss
@@ -2,8 +2,9 @@ html, body {
   font-family: $body-font;
   font-size: 16px;
   line-height: 1.5;
-  background-color: $background-color;
-  color: $font-color;
+  background-color: var(--background-color);
+  color: var(--font-color);
+  transition: background-color 0.2s ease, color 0.2s ease;
 
   @media (max-width: $large-screen) {
     font-size: 14px;
@@ -25,11 +26,11 @@ html, body {
 }
 
 a {
-  color: $primary-color;
+  color: var(--primary-color);
   text-decoration: none;
 
   &:hover {
-    color: rgba($primary-color, 0.8);
+    color: var(--primary-color-hover);
   }
 }
 
diff --git a/sass/_header.scss b/sass/_header.scss
index 9e49637..740f96c 100644
--- a/sass/_header.scss
+++ b/sass/_header.scss
@@ -24,6 +24,7 @@
 
   &-nav {
     display: flex;
+    align-items: center;
     font-size: 1.3rem;
 
     @media (max-width: $small-screen) {
@@ -31,14 +32,36 @@
     }
 
     a {
-      color: #333;
+      color: var(--font-color);
       opacity: 0.4;
       margin-left: 1.5rem;
 
       &:hover {
-        color: $primary-color;
+        color: var(--primary-color);
         opacity: 1;
       }
     }
   }
+
+  &-theme-toggle {
+    background: none;
+    border: 0;
+    padding: 0;
+    margin-left: 1.5rem;
+    font-family: inherit;
+    font-size: 1.3rem;
+    line-height: 1;
+    color: var(--font-color);
+    opacity: 0.4;
+    cursor: pointer;
+
+    @media (max-width: $small-screen) {
+      font-size: 1.1rem;
+    }
+
+    &:hover {
+      color: var(--primary-color);
+      opacity: 1;
+    }
+  }
 }
diff --git a/sass/_theme.scss b/sass/_theme.scss
new file mode 100644
index 0000000..78a4269
--- /dev/null
+++ b/sass/_theme.scss
@@ -0,0 +1,33 @@
+// Theme tokens exposed as CSS custom properties so the palette can switch at
+// runtime. SCSS `$` variables (see style.scss) remain the single source of
+// truth for the values and are interpolated into the custom properties below.
+
+@mixin dark-theme {
+  --background-color: #{$dark-background-color};
+  --font-color: #{$dark-font-color};
+  color-scheme: dark;
+}
+
+:root {
+  --primary-color: #{$primary-color};
+  --primary-color-hover: #{rgba($primary-color, 0.8)};
+  --background-color: #{$background-color};
+  --font-color: #{$font-color};
+  color-scheme: light;
+}
+
+// Follow the operating system preference, unless the user forced light mode.
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    @include dark-theme;
+  }
+}
+
+// Explicit user choice always wins over the system preference.
+:root[data-theme='dark'] {
+  @include dark-theme;
+}
+
+:root[data-theme='light'] {
+  color-scheme: light;
+}
diff --git a/sass/style.scss b/sass/style.scss
index 91020d2..6b5753a 100755
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -7,12 +7,17 @@ $primary-color: #FF9900;
 $background-color: #FFF;
 $font-color: #333;
 
+// Dark theme colors
+$dark-background-color: #121212;
+$dark-font-color: #e6e6e6;
+
 // Screen size for responsiveness
 $small-screen: 400px;
 $mid-screen: 768px;
 $large-screen: 1024px;
 
 @import './reset';
+@import './theme';
 @import './global';
 @import './header';
 @import './footer';
diff --git a/templates/index.html b/templates/index.html
index 2cb01de..0a72569 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -11,6 +11,23 @@
         />
         <link rel="icon" href="/favicon.ico" type="image/x-icon" />
 
+        <script>
+            // Apply the saved theme before first paint to avoid a flash of the
+            // wrong colors. With no saved choice the CSS falls back to the OS
+            // preference via prefers-color-scheme.
+            (function () {
+                try {
+                    var stored = localStorage.getItem("theme");
+                    if (stored === "dark" || stored === "light") {
+                        document.documentElement.setAttribute(
+                            "data-theme",
+                            stored
+                        );
+                    }
+                } catch (e) {}
+            })();
+        </script>
+
         <link rel="stylesheet" href="/style.css" />
         <link
             href="https://fonts.googleapis.com/css?family=Source+Code+Pro"
@@ -33,6 +50,12 @@
                             rel="noopener nofollow"
                             >Apoyo</a
                         >
+                        <button
+                            class="Header-theme-toggle"
+                            type="button"
+                            aria-label="Cambiar tema"
+                            title="Cambiar tema"
+                        ></button>
                     </nav>
                 </div>
                 <div class="Header-border">
@@ -131,5 +154,50 @@ <h2 class="Home-posts-title">Upcoming and Recent Events</h2>
                 </div>
             </footer>
         </div>
+
+        <script>
+            (function () {
+                var root = document.documentElement;
+                var toggle = document.querySelector(".Header-theme-toggle");
+                if (!toggle) return;
+
+                var media = window.matchMedia("(prefers-color-scheme: dark)");
+
+                function currentTheme() {
+                    var attr = root.getAttribute("data-theme");
+                    if (attr === "dark" || attr === "light") return attr;
+                    return media.matches ? "dark" : "light";
+                }
+
+                function render() {
+                    var isDark = currentTheme() === "dark";
+                    toggle.textContent = isDark ? "☀" : "☾";
+                    toggle.setAttribute(
+                        "aria-label",
+                        isDark ? "Activar modo claro" : "Activar modo oscuro"
+                    );
+                }
+
+                toggle.addEventListener("click", function () {
+                    var next = currentTheme() === "dark" ? "light" : "dark";
+                    root.setAttribute("data-theme", next);
+                    try {
+                        localStorage.setItem("theme", next);
+                    } catch (e) {}
+                    render();
+                });
+
+                // Track the OS preference while the user has not chosen manually.
+                media.addEventListener("change", function () {
+                    var stored = null;
+                    try {
+                        stored = localStorage.getItem("theme");
+                    } catch (e) {}
+                    if (stored !== "dark" && stored !== "light") render();
+                });
+
+                render();
+            })();
+        </script>
     </body>
 </html>