feat: add light/dark mode toggle with system preference detection

- CSS custom properties for all theme-aware colors
- Smooth 0.3s transitions between light and dark themes
- Toggle button (moon/sun) in header with frosted glass effect
- Persists preference in localStorage, respects prefers-color-scheme
- Inline head script prevents flash of wrong theme on load
- Dark palette: deep navy backgrounds with warm light text
- Responsive toggle sizing for mobile

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: Manaiakalani

index.html

@@ -38,6 +38,16 @@
     <!-- External CSS -->
     <link rel="stylesheet" href="style.css">
 
+    <!-- Prevent flash: apply saved theme before paint -->
+    <script>
+        (function() {
+            var t = localStorage.getItem('theme');
+            if (t === 'dark' || (!t && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                document.documentElement.setAttribute('data-theme', 'dark');
+            }
+        })();
+    </script>
+    
     <!-- Structured Data -->
     <script type="application/ld+json">
     {
@@ -67,6 +77,10 @@
             <h1>MANAIAKALANI</h1>
             <p id="typing-effect"></p>
         </div>
+        <button class="theme-toggle" aria-label="Toggle dark mode">
+            <i class="fas fa-moon"></i>
+            <i class="fas fa-sun"></i>
+        </button>
     </header>
 
     <!-- About Me Section -->

script.js

@@ -1,3 +1,22 @@
+// Theme Toggle
+(function() {
+    const toggle = document.querySelector('.theme-toggle');
+    const root = document.documentElement;
+    const stored = localStorage.getItem('theme');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+    if (stored === 'dark' || (!stored && prefersDark)) {
+        root.setAttribute('data-theme', 'dark');
+    }
+
+    toggle.addEventListener('click', function() {
+        const isDark = root.getAttribute('data-theme') === 'dark';
+        const next = isDark ? 'light' : 'dark';
+        root.setAttribute('data-theme', next);
+        localStorage.setItem('theme', next);
+    });
+})();
+
 // Typing Effect
 const typingEffect = document.getElementById('typing-effect');
 const typingText = "Turning problems into solutions, framing memories, and dad 24/7.";

style.css

@@ -1,11 +1,41 @@
+/* Custom Properties — Light Theme (default) */
+:root {
+    --bg-primary: #ffffff;
+    --bg-secondary: #f8f8f8;
+    --bg-footer: #333333;
+    --text-primary: #333333;
+    --text-secondary: #555555;
+    --text-footer: #ffffff;
+    --text-footer-muted: #bbbbbb;
+    --header-text: #ffffff;
+    --accent: #ff6f61;
+    --toggle-bg: rgba(255, 255, 255, 0.2);
+    --toggle-hover: rgba(255, 255, 255, 0.35);
+    --transition-speed: 0.3s;
+}
+
+/* Dark Theme */
+[data-theme="dark"] {
+    --bg-primary: #121218;
+    --bg-secondary: #1a1a24;
+    --bg-footer: #0d0d12;
+    --text-primary: #e4e4e4;
+    --text-secondary: #b0b0b0;
+    --text-footer: #e4e4e4;
+    --text-footer-muted: #888888;
+    --toggle-bg: rgba(255, 255, 255, 0.1);
+    --toggle-hover: rgba(255, 255, 255, 0.2);
+}
+
 /* General Styles */
 body {
     font-family: 'Doto', sans-serif;
     margin: 0;
     padding: 0;
     line-height: 1.6;
-    background-color: #fff;
-    color: #333;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
 }
 
 .container {
@@ -53,9 +83,10 @@ header {
     );
     background-size: 400% 400%;
     animation: gradient 15s ease infinite;
-    color: #fff;
+    color: var(--header-text);
     text-align: center;
     padding: 4rem 0;
+    position: relative;
 }
 
 header p {
@@ -64,22 +95,65 @@ header p {
     text-align: center;
 }
 
+/* Theme Toggle */
+.theme-toggle {
+    position: absolute;
+    top: 1.2rem;
+    right: 1.5rem;
+    background: var(--toggle-bg);
+    border: none;
+    color: var(--header-text);
+    font-size: 1.2rem;
+    width: 2.6rem;
+    height: 2.6rem;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background var(--transition-speed) ease, transform var(--transition-speed) ease;
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+}
+
+.theme-toggle:hover {
+    background: var(--toggle-hover);
+    transform: scale(1.1);
+}
+
+.theme-toggle:active {
+    transform: scale(0.95);
+}
+
+.theme-toggle .fa-sun { display: none; }
+.theme-toggle .fa-moon { display: inline; }
+
+[data-theme="dark"] .theme-toggle .fa-sun { display: inline; }
+[data-theme="dark"] .theme-toggle .fa-moon { display: none; }
+
 /* About Section */
 #about {
     padding: 4rem 0;
-    background-color: #f8f8f8;
+    background-color: var(--bg-secondary);
+    transition: background-color var(--transition-speed) ease;
 }
 
 .about-text {
     margin-top: 2rem;
 }
 
+.about-text p {
+    color: var(--text-primary);
+    transition: color var(--transition-speed) ease;
+}
+
 /* Footer */
 footer {
-    background-color: #333;
-    color: #fff;
+    background-color: var(--bg-footer);
+    color: var(--text-footer);
     text-align: center;
     padding: 2rem 0;
+    transition: background-color var(--transition-speed) ease;
 }
 
 .social-icons {
@@ -89,21 +163,21 @@ footer {
 }
 
 .social-icons a {
-    color: #fff;
+    color: var(--text-footer);
     font-size: 1.8rem;
     margin: 0 1rem;
     transition: transform 0.3s ease, color 0.3s ease;
 }
 
 .social-icons a:hover {
     transform: scale(1.2);
-    color: #ff6f61;
+    color: var(--accent);
 }
 
 .footer-text {
     margin-top: 1rem;
     font-size: 1rem;
-    color: #bbb;
+    color: var(--text-footer-muted);
 }
 
 /* Gradient Animation */
@@ -120,4 +194,5 @@ footer {
     header p { font-size: 1.1rem; }
     .container { width: 90%; }
     .social-icons a { font-size: 1.5rem; margin: 0 0.6rem; }
+    .theme-toggle { top: 0.8rem; right: 0.8rem; width: 2.2rem; height: 2.2rem; font-size: 1rem; }
 }