Add dark mode theme toggle with system preference support

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;
       }
     }

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);
   }
 }
 

sass/_header.scss

@@ -24,21 +24,44 @@
 
   &-nav {
     display: flex;
+    align-items: center;
     font-size: 1.3rem;
 
     @media (max-width: $small-screen) {
       font-size: 1.1rem;
     }
 
     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;
+    }
+  }
 }

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;
+}

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';

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>