diff --git a/static/style.css b/static/style.css
index 6266c45..bbd4327 100644
--- a/static/style.css
+++ b/static/style.css
@@ -27,13 +27,14 @@ input[type="text"] {
 }
 
 body {
-    background: radial-gradient(circle at top, #0f172a 0%, #0b1120 45%, #020617 100%);
+    background: var(--page-bg);
     background-attachment: fixed;
     position: relative;
     z-index: auto;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
     margin: 20px;
-    color: #e2e8f0;
+    color: var(--text-primary);
+    transition: background 0.3s ease, color 0.3s ease;
 }
 
 header nav {
@@ -52,18 +53,18 @@ header nav a:hover {
 }
 
 h1 {
-    color: #333;
+    color: var(--text-primary);
     margin-bottom: 20px;
 }
 
 .af-body h2,
 .af-body h3,
 .af-body h4 {
-    color: #f8fafc;
+    color: var(--text-primary);
 }
 
 .background-roster {
-    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background for better readability */
+    background-color: var(--surface);
     padding: 20px;
     border-radius: 10px;
     z-index: 1;
@@ -74,7 +75,7 @@ table {
     border-collapse: collapse;
     margin-bottom: 20px;
     overflow: visible;
-    background-color: rgba(255, 255, 255, 0.8);
+    background-color: var(--surface);
 }
 
 table, th, td {
@@ -87,20 +88,20 @@ th, td {
 }
 
 th {
-    color: #333;
-    background-color: rgba(255, 255, 255, 0.9);
+    color: var(--text-primary);
+    background-color: var(--surface);
 }
 
 button {
     padding: 5px 10px;
-    background-color: red;
+    background-color: var(--accent);
     color: white;
     border: none;
     cursor: pointer;
 }
 
 button:hover {
-    background-color: red;
+    background-color: var(--accent-strong);
 }
 
 input {
@@ -115,7 +116,7 @@ input {
 #search {
     width: 100%;
     padding: 6px;
-    border: 2px black solid;
+    border: 2px solid var(--border);
     margin-top: 8px;
     margin-right: 16px;
     font-size: 17px;
@@ -125,13 +126,13 @@ input {
 main {
     position: relative;
     z-index: 1;
-    background-color: rgba(255, 255, 255, 0.75);
+    background-color: var(--surface);
     margin-top: 8vh;
     padding: 24px 32px 32px 32px;
     border-radius: 16px;
-    border: 1px solid rgba(0, 0, 0, 0.08);
+    border: 1px solid var(--border);
     overflow: auto;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
+    box-shadow: var(--shadow);
     backdrop-filter: blur(8px);
 }
 
@@ -150,13 +151,13 @@ nav {
     position: absolute;
     right: 50px;
     top: 10px;
-    background-color: #333;
+    background-color: var(--nav-bg);
     overflow: visible;
     z-index: 1000;
 }
 
 .topnav a {
-    color: #f2f2f2;
+    color: var(--text-primary);
     text-align: center;
     text-decoration: none;
     font-size: 17px;
@@ -166,7 +167,7 @@ nav {
     font-size: 17px;
     border: none;
     outline: none;
-    color: white;
+    color: var(--text-primary);
     background-color: inherit;
     padding: 14px 16px;
     cursor: pointer;
@@ -175,7 +176,7 @@ nav {
 .dropdown-content {
     display: none;
     position: absolute;
-    background-color: #f9f9f9;
+    background-color: var(--surface);
     min-width: 160px;
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
     right: 0;
@@ -184,7 +185,7 @@ nav {
 
 .dropdown-content a {
     float: none;
-    color: black;
+    color: var(--text-primary);
     padding: 12px 16px;
     text-decoration: none;
     display: block;
@@ -192,13 +193,13 @@ nav {
 }
 
 .topnav a:hover, .dropdown:hover .dropbtn {
-    background-color: #555;
+    background-color: var(--accent);
     color: white;
 }
 
 .dropdown-content a:hover {
-    background-color: #ddd;
-    color: black;
+    background-color: var(--accent-soft);
+    color: var(--text-primary);
 }
 
 .dropdown.show .dropdown-content {
@@ -251,19 +252,19 @@ nav {
 }
 
 .button1 {
-    background-color: black;
+    background-color: var(--accent);
 }
 
 main h1 {
     font-size: 2.5em;
-    color: black;
+    color: var(--text-primary);
     text-align: center;
     margin-bottom: 20px;
 }
 
 .suggestion-title {
     font-size: 1.5em;
-    color: black;
+    color: var(--text-primary);
     text-align: center;
     margin-bottom: 30px;
 }
@@ -271,7 +272,7 @@ main h1 {
 article label {
     font-weight: bold;
     font-size: 1.1em;
-    color: #333;
+    color: var(--text-primary);
     margin-bottom: 10px;
     display: block;
 }
@@ -280,17 +281,18 @@ input[type="text"], input[type="number"], textarea {
     width: 95%;
     padding: 12px;
     font-size: 1em;
-    border: 1px solid #ccc;
+    border: 1px solid var(--border);
     border-radius: 8px;
     margin-bottom: 20px;
-    background-color: #f9f9f9;
+    background-color: var(--input-bg);
+    color: var(--text-primary);
     transition: border-color 0.3s, box-shadow 0.3s;
 }
 
 input[type="text"]:focus, input[type="number"]:focus, textarea:focus {
-    border-color: #60a5fa;
-    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.35);
-    background-color: #0f172a;
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-soft);
+    background-color: var(--surface-strong);
     outline: none;
 }
 
@@ -300,7 +302,7 @@ textarea {
 }
 
 .button1 {
-    background-color: darkred;
+    background-color: var(--accent);
     color: white;
     font-size: 1.2em;
     padding: 12px 24px;
@@ -313,13 +315,13 @@ textarea {
 }
 
 .button1:hover {
-    background-color: red;
+    background-color: var(--accent-strong);
     transform: scale(1.05);
 }
 
 #successMessage {
     font-size: 1.1em;
-    color: green;
+    color: var(--success);
     text-align: center;
     margin-top: 20px;
 }
@@ -367,8 +369,8 @@ textarea {
 }
 
 .weapon-stats-table th {
-    background-color: #f2f2f2;
-    color: black;
+    background-color: var(--surface-strong);
+    color: var(--text-primary);
 }
 
 .horizontal-table tr:first-child th {
@@ -383,7 +385,7 @@ textarea {
     width: 3rem;
     height: 3rem;
     padding: 0.5rem;
-    background: rgba(0, 0, 0, 0.6);
+    background: var(--nav-bg);
     border-radius: 50%;
     display: flex;
     flex-direction: column;
@@ -434,7 +436,7 @@ textarea {
     right: -100%;
     width: 250px;
     height: 100vh;
-    background-color: rgba(255, 255, 255, 0.95);
+    background-color: var(--surface);
     display: flex;
     flex-direction: column;
     padding: 4rem 1.5rem;
@@ -445,7 +447,7 @@ textarea {
 }
 
 .nav-menu a {
-    color: #333;
+    color: var(--text-primary);
     text-decoration: none;
     font-size: 1.1rem;
     font-weight: 500;
@@ -469,9 +471,9 @@ body.menu-open {
     width: 100%;
     padding: 8px 12px;
     font-size: 16px;
-    border: 1px solid #ccc;
+    border: 1px solid var(--border);
     border-radius: 8px;
-    background-color: #f9f9f9;
+    background-color: var(--input-bg);
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -491,8 +493,8 @@ body.menu-open {
 .select-wrapper > input[type="text"]:focus,
 .select-wrapper > select:focus {
     outline: none;
-    border-color: darkred;
-    box-shadow: 0 0 5px rgba(139, 0, 0, 0.5);
+    border-color: var(--accent);
+    box-shadow: 0 0 5px var(--accent-glow);
 }
 
 .select-wrapper > input[type="text"]::placeholder {
@@ -514,21 +516,21 @@ body.menu-open {
 }
 
 #weapon-form > div {
-    background: #fff;
+    background: var(--surface);
     padding: 24px;
     border-radius: 12px;
     width: 90%;
     max-width: 480px;
     max-height: 90vh;
     overflow-y: auto;
-    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
+    box-shadow: var(--shadow);
 }
 
 .af-body {
     margin: 0;
     min-height: 100vh;
-    background: radial-gradient(circle at top, #1e293b 0%, #0f172a 45%, #020617 100%);
-    color: #e2e8f0;
+    background: var(--page-bg);
+    color: var(--text-primary);
     font-family: "Inter", "Segoe UI", system-ui, sans-serif;
 }
 
@@ -541,8 +543,8 @@ body.menu-open {
     justify-content: space-between;
     gap: 24px;
     padding: 20px 32px;
-    background: rgba(15, 23, 42, 0.92);
-    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
+    background: var(--header-bg);
+    border-bottom: 1px solid var(--border);
     backdrop-filter: blur(12px);
 }
 
@@ -565,15 +567,15 @@ body.menu-open {
     padding: 8px;
     display: grid;
     gap: 6px;
-    background: linear-gradient(135deg, rgba(56, 189, 248, 0.3), rgba(94, 234, 212, 0.1));
-    border: 1px solid rgba(56, 189, 248, 0.35);
+    background: var(--logo-gradient);
+    border: 1px solid var(--accent-glow);
 }
 
 .af-logo span {
     display: block;
     height: 4px;
     border-radius: 999px;
-    background: linear-gradient(90deg, #38bdf8, #22c55e);
+    background: var(--logo-line);
 }
 
 .af-title {
@@ -584,7 +586,7 @@ body.menu-open {
 
 .af-subtitle {
     margin: 4px 0 0;
-    color: #94a3b8;
+    color: var(--text-muted);
     font-size: 0.95rem;
     max-width: 240px;
     white-space: nowrap;
@@ -598,9 +600,9 @@ body.menu-open {
     gap: 10px;
     padding: 6px;
     border-radius: 999px;
-    background: rgba(15, 23, 42, 0.65);
-    border: 1px solid rgba(148, 163, 184, 0.3);
-    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.1);
+    background: var(--nav-bg);
+    border: 1px solid var(--border);
+    box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.1);
 }
 
 .af-nav-link {
@@ -609,16 +611,16 @@ body.menu-open {
     border-radius: 999px;
     text-decoration: none;
     font-weight: 600;
-    color: #e2e8f0;
+    color: var(--text-primary);
     background: transparent;
     border: 1px solid transparent;
     transition: all 0.2s ease;
 }
 
 .af-nav-link:hover {
-    border-color: rgba(56, 189, 248, 0.4);
-    background: rgba(56, 189, 248, 0.15);
-    color: #f8fafc;
+    border-color: var(--accent);
+    background: var(--accent-soft);
+    color: var(--text-primary);
 }
 
 .af-nav-link::after {
@@ -629,7 +631,7 @@ body.menu-open {
     bottom: 6px;
     height: 2px;
     border-radius: 999px;
-    background: linear-gradient(90deg, rgba(56, 189, 248, 0), rgba(56, 189, 248, 0.9), rgba(34, 197, 94, 0.9), rgba(34, 197, 94, 0));
+    background: linear-gradient(90deg, rgba(220, 38, 38, 0), rgba(220, 38, 38, 0.9), rgba(220, 38, 38, 0));
     opacity: 0;
     transition: opacity 0.2s ease;
 }
@@ -643,12 +645,45 @@ body.menu-open {
     display: none;
     padding: 8px 16px;
     border-radius: 999px;
-    border: 1px solid rgba(148, 163, 184, 0.4);
+    border: 1px solid var(--border);
     background: transparent;
-    color: #e2e8f0;
+    color: var(--text-primary);
     font-weight: 600;
 }
 
+.af-header-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.af-theme-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 16px;
+    border-radius: 999px;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    color: var(--text-primary);
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+.af-theme-toggle:hover {
+    background: var(--accent-soft);
+    border-color: var(--accent);
+}
+
+.af-theme-toggle-indicator {
+    width: 10px;
+    height: 10px;
+    border-radius: 999px;
+    background: var(--accent);
+    box-shadow: 0 0 0 4px var(--accent-soft);
+}
+
 .af-shell {
     max-width: 1200px;
     margin: 32px auto 80px;
@@ -667,20 +702,20 @@ body.menu-open {
 
 .af-hero h1,
 .af-card h1 {
-    color: #f8fafc;
+    color: var(--text-primary);
     margin-top: 0;
 }
 
 .af-hero p {
-    color: #cbd5f5;
+    color: var(--text-muted);
     line-height: 1.6;
 }
 
 .af-status {
     display: grid;
     gap: 16px;
-    background: rgba(15, 23, 42, 0.6);
-    border: 1px solid rgba(148, 163, 184, 0.2);
+    background: var(--surface);
+    border: 1px solid var(--border);
     border-radius: 16px;
     padding: 20px;
 }
@@ -689,7 +724,7 @@ body.menu-open {
     font-size: 0.75rem;
     letter-spacing: 0.08em;
     text-transform: uppercase;
-    color: #94a3b8;
+    color: var(--text-subtle);
     margin: 0;
 }
 
@@ -706,21 +741,21 @@ body.menu-open {
 }
 
 .af-card {
-    background: rgba(15, 23, 42, 0.75);
+    background: var(--surface);
     border-radius: 20px;
-    border: 1px solid rgba(148, 163, 184, 0.2);
+    border: 1px solid var(--border);
     padding: 24px;
-    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.35);
+    box-shadow: var(--shadow);
 }
 
 .af-card-header h2 {
     margin: 0 0 8px;
-    color: #f8fafc;
+    color: var(--text-primary);
 }
 
 .af-card-header p {
     margin: 0;
-    color: #cbd5f5;
+    color: var(--text-muted);
     line-height: 1.6;
 }
 
@@ -734,8 +769,8 @@ body.menu-open {
     justify-content: center;
     padding: 10px 20px;
     border-radius: 999px;
-    background: linear-gradient(120deg, #38bdf8, #22c55e);
-    color: #0f172a;
+    background: linear-gradient(120deg, #ef4444, #b91c1c);
+    color: #fff;
     font-weight: 700;
     text-decoration: none;
     border: none;
@@ -757,7 +792,7 @@ body.menu-open {
     flex-direction: column;
     gap: 8px;
     font-weight: 600;
-    color: #e2e8f0;
+    color: var(--text-primary);
 }
 
 .af-form input,
@@ -766,9 +801,9 @@ body.menu-open {
 .af-input {
     padding: 12px 14px;
     border-radius: 12px;
-    border: 1px solid rgba(148, 163, 184, 0.3);
-    background: rgba(15, 23, 42, 0.7);
-    color: #f8fafc;
+    border: 1px solid var(--border);
+    background: var(--input-bg);
+    color: var(--text-primary);
     font-size: 0.95rem;
 }
 
@@ -776,17 +811,17 @@ body.menu-open {
 .af-calculator-page input[type="number"],
 .af-calculator-page select,
 .af-calculator-page textarea {
-    background: rgba(15, 23, 42, 0.7);
-    color: #f8fafc;
-    border: 1px solid rgba(148, 163, 184, 0.3);
+    background: var(--input-bg);
+    color: var(--text-primary);
+    border: 1px solid var(--border);
 }
 
 .af-details {
     margin-top: 12px;
     padding: 12px 16px;
     border-radius: 16px;
-    border: 1px solid rgba(148, 163, 184, 0.25);
-    background: rgba(2, 6, 23, 0.6);
+    border: 1px solid var(--border);
+    background: var(--surface);
 }
 
 .af-details summary {
@@ -795,7 +830,7 @@ body.menu-open {
     gap: 10px;
     cursor: pointer;
     font-weight: 600;
-    color: #e2e8f0;
+    color: var(--text-primary);
     list-style: none;
 }
 
@@ -820,14 +855,15 @@ body.menu-open {
 .af-form select:focus,
 .af-form textarea:focus,
 .af-input:focus {
-    outline: 2px solid rgba(56, 189, 248, 0.6);
-    border-color: rgba(56, 189, 248, 0.6);
+    outline: 2px solid var(--accent);
+    border-color: var(--accent);
+    box-shadow: 0 0 0 4px var(--accent-soft);
 }
 
 .af-field-hint {
     font-size: 0.85rem;
     font-weight: 400;
-    color: #94a3b8;
+    color: var(--text-subtle);
 }
 
 .af-form-actions {
@@ -840,15 +876,15 @@ body.menu-open {
 .af-form-actions button {
     padding: 10px 18px;
     border-radius: 999px;
-    border: 1px solid rgba(148, 163, 184, 0.3);
-    background: rgba(148, 163, 184, 0.12);
-    color: #e2e8f0;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    color: var(--text-primary);
     cursor: pointer;
 }
 
 .af-form-actions button:hover {
-    background: rgba(56, 189, 248, 0.25);
-    border-color: rgba(56, 189, 248, 0.4);
+    background: var(--accent-soft);
+    border-color: var(--accent);
 }
 
 .af-metrics {
@@ -861,8 +897,8 @@ body.menu-open {
 .af-metric {
     padding: 16px;
     border-radius: 16px;
-    background: rgba(2, 6, 23, 0.6);
-    border: 1px solid rgba(148, 163, 184, 0.2);
+    background: var(--surface);
+    border: 1px solid var(--border);
 }
 
 .af-metric-label {
@@ -870,22 +906,22 @@ body.menu-open {
     font-size: 0.8rem;
     text-transform: uppercase;
     letter-spacing: 0.08em;
-    color: #94a3b8;
+    color: var(--text-subtle);
 }
 
 .af-metric-value {
     margin: 0;
     font-size: 1.4rem;
     font-weight: 700;
-    color: #f8fafc;
+    color: var(--text-primary);
 }
 
 .af-callout {
     margin-top: 20px;
     padding: 16px;
     border-radius: 16px;
-    background: rgba(56, 189, 248, 0.1);
-    border: 1px solid rgba(56, 189, 248, 0.3);
+    background: var(--accent-soft);
+    border: 1px solid var(--accent);
 }
 
 .af-callout h3 {
@@ -897,16 +933,16 @@ body.menu-open {
     gap: 12px;
     padding: 16px;
     border-radius: 16px;
-    background: rgba(2, 6, 23, 0.6);
-    border: 1px dashed rgba(148, 163, 184, 0.3);
+    background: var(--surface);
+    border: 1px dashed var(--border);
 }
 
 .af-muted-button {
     padding: 8px 14px;
     border-radius: 999px;
-    border: 1px solid rgba(148, 163, 184, 0.3);
+    border: 1px solid var(--border);
     background: transparent;
-    color: #e2e8f0;
+    color: var(--text-primary);
 }
 
 .af-notes {
@@ -914,9 +950,9 @@ body.menu-open {
     min-height: 160px;
     border-radius: 16px;
     padding: 14px;
-    background: rgba(15, 23, 42, 0.7);
-    border: 1px solid rgba(148, 163, 184, 0.3);
-    color: #f8fafc;
+    background: var(--input-bg);
+    border: 1px solid var(--border);
+    color: var(--text-primary);
 }
 
 .af-copy-grid {
@@ -936,8 +972,8 @@ body.menu-open {
 .af-stat-card {
     padding: 16px;
     border-radius: 16px;
-    border: 1px solid rgba(148, 163, 184, 0.2);
-    background: rgba(2, 6, 23, 0.6);
+    border: 1px solid var(--border);
+    background: var(--surface);
 }
 
 .af-stat-label {
@@ -945,20 +981,20 @@ body.menu-open {
     font-size: 0.75rem;
     text-transform: uppercase;
     letter-spacing: 0.08em;
-    color: #94a3b8;
+    color: var(--text-subtle);
 }
 
 .af-stat-value {
     margin: 0;
     font-size: 1.4rem;
     font-weight: 700;
-    color: #f8fafc;
+    color: var(--text-primary);
 }
 
 .af-list {
     margin: 16px 0 0;
     padding-left: 20px;
-    color: #cbd5f5;
+    color: var(--text-muted);
     line-height: 1.7;
 }
 
@@ -972,9 +1008,9 @@ body.menu-open {
 .af-pill {
     padding: 8px 12px;
     border-radius: 999px;
-    background: rgba(56, 189, 248, 0.15);
-    border: 1px solid rgba(56, 189, 248, 0.35);
-    color: #e2e8f0;
+    background: var(--accent-soft);
+    border: 1px solid var(--accent);
+    color: var(--text-primary);
     font-size: 0.85rem;
     font-weight: 600;
 }
@@ -995,7 +1031,7 @@ body.menu-open {
     font-size: 0.85rem;
     text-transform: uppercase;
     letter-spacing: 0.08em;
-    color: #94a3b8;
+    color: var(--text-subtle);
 }
 
 .af-checkbox-grid {
@@ -1009,9 +1045,9 @@ body.menu-open {
     align-items: flex-start;
     padding: 12px;
     border-radius: 12px;
-    border: 1px solid rgba(148, 163, 184, 0.2);
-    background: rgba(2, 6, 23, 0.55);
-    color: #e2e8f0;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    color: var(--text-primary);
     font-size: 0.9rem;
     line-height: 1.4;
 }
@@ -1027,7 +1063,7 @@ body.menu-open {
 .af-active-modifiers {
     margin-top: 20px;
     padding-top: 16px;
-    border-top: 1px solid rgba(148, 163, 184, 0.2);
+    border-top: 1px solid var(--border);
 }
 
 .af-tag-list {
@@ -1039,15 +1075,15 @@ body.menu-open {
 .af-tag {
     padding: 6px 12px;
     border-radius: 999px;
-    background: rgba(15, 23, 42, 0.8);
-    border: 1px solid rgba(148, 163, 184, 0.25);
-    color: #e2e8f0;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    color: var(--text-primary);
     font-size: 0.8rem;
 }
 
 .af-empty-hint {
     margin: 0;
-    color: #94a3b8;
+    color: var(--text-subtle);
     font-size: 0.9rem;
 }
 
@@ -1056,6 +1092,11 @@ body.menu-open {
         flex-wrap: wrap;
     }
 
+    .af-header-actions {
+        width: 100%;
+        justify-content: space-between;
+    }
+
     .af-nav {
         display: none;
         width: 100%;
@@ -1076,7 +1117,7 @@ body.menu-open {
 
 #weapon-form h2 {
     margin-top: 0;
-    color: #222;
+    color: var(--text-primary);
     font-size: 1.75rem;
     text-align: center;
 }
@@ -1088,10 +1129,10 @@ body.menu-open {
     padding: 8px 12px;
     margin-top: 4px;
     margin-bottom: 16px;
-    border: 1px solid #ccc;
+    border: 1px solid var(--border);
     border-radius: 6px;
     font-size: 1rem;
-    background: #fafafa;
+    background: var(--input-bg);
     transition: border-color 0.2s ease;
 }
 
@@ -1102,8 +1143,8 @@ body.menu-open {
 #weapon-form form input:focus,
 #weapon-form form select:focus {
     outline: none;
-    border-color: darkred;
-    box-shadow: 0 0 4px rgba(139, 0, 0, 0.4);
+    border-color: var(--accent);
+    box-shadow: 0 0 4px var(--accent-glow);
 }
 
 #weapon-form form button {
@@ -1116,27 +1157,27 @@ body.menu-open {
 }
 
 #weapon-form form button[type="submit"] {
-    background-color: darkred;
+    background-color: var(--accent);
     color: #fff;
 }
 
 #weapon-form form button[type="submit"]:hover {
-    background-color: red;
+    background-color: var(--accent-strong);
 }
 
 #weapon-form form button#weapon-cancel {
-    background-color: #666;
+    background-color: var(--text-subtle);
     color: #fff;
 }
 
 #weapon-form form button#weapon-cancel:hover {
-    background-color: #444;
+    background-color: var(--text-muted);
 }
 
 #weapon-create {
     margin: 0 0 20px;
     padding: 10px 16px;
-    background-color: darkred;
+    background-color: var(--accent);
     border: none;
     border-radius: 6px;
     color: white;
@@ -1147,7 +1188,7 @@ body.menu-open {
 #weapon-edit {
     margin: 0 0 20px;
     padding: 10px 16px;
-    background-color: darkred;
+    background-color: var(--accent);
     border: none;
     border-radius: 6px;
     color: white;
@@ -1156,20 +1197,20 @@ body.menu-open {
 }
 
 #weapon-create:hover {
-    background-color: red;
+    background-color: var(--accent-strong);
 }
 
 #weapon-edit:hover {
-    background-color: red;
+    background-color: var(--accent-strong);
 }
 
 #weapon-edit:disabled {
-    background-color: #666;
+    background-color: var(--text-subtle);
     cursor: not-allowed;
 }
 
 #copy-stats {
-    background: darkred;
+    background: var(--accent);
     color: #fff;
     border: none;
     border-radius: 6px;
@@ -1180,7 +1221,7 @@ body.menu-open {
 }
 
 #copy-stats:hover {
-    background: red;
+    background: var(--accent-strong);
 }
 
 #copy-message {
@@ -1222,51 +1263,51 @@ body.menu-open {
 }
 
 .about_us_main {
-    background-color: rgba(255, 255, 255, 0.92);
+    background-color: var(--surface);
     margin: 8vh auto;
     padding: 40px;
     border-radius: 12px;
     width: 90%;
     max-width: 900px;
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--shadow);
 }
 
 .about_us_h1 {
     text-align: center;
     font-size: 3rem;
     margin-bottom: 1.5rem;
-    color: #111;
+    color: var(--text-primary);
 }
 
 .about_us_h2 {
     margin-top: 2rem;
-    color: #222;
+    color: var(--text-primary);
     font-size: 1.8rem;
-    border-left: 5px solid red;
+    border-left: 5px solid var(--accent);
     padding-left: 12px;
 }
 
 .about_us_h3 {
     font-size: 1.3rem;
     margin-top: 1.5rem;
-    color: #333;
+    color: var(--text-primary);
 }
 
 .about_us_text {
     font-size: 1.05rem;
     line-height: 1.7;
     margin-top: 1rem;
-    color: #444;
+    color: var(--text-muted);
 }
 
 .af-about-page .af-card {
-    background: rgba(15, 23, 42, 0.82);
+    background: var(--surface);
 }
 
 .af-about-page h1,
 .af-about-page h2,
 .af-about-page h3 {
-    color: #f8fafc;
+    color: var(--text-primary);
 }
 
 .af-about-kicker {
@@ -1274,7 +1315,7 @@ body.menu-open {
     text-transform: uppercase;
     letter-spacing: 0.18em;
     font-size: 0.75rem;
-    color: #94a3b8;
+    color: var(--text-subtle);
 }
 
 .af-about-hero {
@@ -1294,9 +1335,9 @@ body.menu-open {
 .af-about-card {
     padding: 16px;
     border-radius: 16px;
-    border: 1px solid rgba(148, 163, 184, 0.2);
-    background: rgba(2, 6, 23, 0.6);
-    box-shadow: 0 12px 30px rgba(2, 6, 23, 0.3);
+    border: 1px solid var(--border);
+    background: var(--surface);
+    box-shadow: var(--shadow);
 }
 
 .af-about-card h3 {
@@ -1310,28 +1351,28 @@ body.menu-open {
     gap: 12px;
     padding: 16px;
     border-radius: 16px;
-    border: 1px solid rgba(56, 189, 248, 0.3);
-    background: rgba(56, 189, 248, 0.12);
+    border: 1px solid var(--accent);
+    background: var(--accent-soft);
     margin-top: 20px;
 }
 
 .af-about-pill {
     padding: 6px 12px;
     border-radius: 999px;
-    border: 1px solid rgba(56, 189, 248, 0.4);
-    background: rgba(15, 23, 42, 0.7);
-    color: #e2e8f0;
+    border: 1px solid var(--accent);
+    background: var(--surface);
+    color: var(--text-primary);
     font-size: 0.85rem;
     font-weight: 600;
 }
 
 .highlight {
     font-weight: bold;
-    color: #d32f2f;
+    color: var(--accent);
 }
 
 a {
-    color: red;
+    color: var(--accent);
     text-decoration: none;
 }
 
@@ -1346,16 +1387,16 @@ a:hover {
 }
 
 .team-member {
-    background-color: #f7f7f7;
+    background-color: var(--surface);
     padding: 15px 20px;
     border-radius: 8px;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--shadow);
 }
 
 .thanks-section {
-    background-color: #fff;
+    background-color: var(--surface);
     padding: 20px;
-    border-left: 4px solid red;
+    border-left: 4px solid var(--accent);
     border-radius: 6px;
     margin-top: 1.5rem;
 }
@@ -1386,18 +1427,53 @@ a:hover {
    Modern theme enhancements
    -------------------------- */
 :root {
-    --bg-tint: rgba(15, 23, 42, 0.45);
-    --card-bg: rgba(255, 255, 255, 0.75);
-    --text-900: #0f172a;
-    --text-700: #334155;
-    --text-500: #64748b;
-    --border: rgba(2, 6, 23, 0.08);
-    --shadow: 0 10px 30px rgba(2, 6, 23, 0.18);
-    --primary: #dc2626; /* red-600 */
-    --primary-700: #b91c1c;
-    --primary-50: #fef2f2;
+    --page-bg: #ffffff;
+    --page-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.25));
+    --surface: rgba(255, 255, 255, 0.92);
+    --surface-strong: #f9fafb;
+    --input-bg: #f8f8f8;
+    --text-primary: #121212;
+    --text-muted: #4b5563;
+    --text-subtle: #6b7280;
+    --border: rgba(17, 24, 39, 0.12);
+    --shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
+    --accent: #dc2626;
+    --accent-strong: #b91c1c;
+    --accent-soft: rgba(220, 38, 38, 0.14);
+    --accent-glow: rgba(220, 38, 38, 0.35);
     --success: #16a34a;
     --warning: #f59e0b;
+    --nav-bg: rgba(255, 255, 255, 0.85);
+    --header-bg: rgba(255, 255, 255, 0.9);
+    --table-row: #ffffff;
+    --table-row-alt: #f9fafb;
+    --tooltip-bg: rgba(12, 12, 12, 0.95);
+    --logo-gradient: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(17, 24, 39, 0.15));
+    --logo-line: linear-gradient(90deg, #fecaca, #dc2626);
+}
+
+.theme-dark {
+    --page-bg: radial-gradient(circle at top, #1b0a0a 0%, #0b0b0b 55%, #050505 100%);
+    --page-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.2));
+    --surface: rgba(18, 18, 18, 0.92);
+    --surface-strong: #1a1a1a;
+    --input-bg: rgba(24, 24, 24, 0.9);
+    --text-primary: #f8fafc;
+    --text-muted: #d1d5db;
+    --text-subtle: #9ca3af;
+    --border: rgba(248, 250, 252, 0.16);
+    --shadow: 0 20px 45px rgba(0, 0, 0, 0.6);
+    --accent: #ef4444;
+    --accent-strong: #b91c1c;
+    --accent-soft: rgba(239, 68, 68, 0.2);
+    --accent-glow: rgba(239, 68, 68, 0.45);
+    --nav-bg: rgba(17, 17, 17, 0.85);
+    --header-bg: rgba(8, 8, 8, 0.85);
+    --table-row: #111111;
+    --table-row-alt: #1a1a1a;
+    --tooltip-bg: rgba(5, 5, 5, 0.95);
+    --logo-gradient: linear-gradient(135deg, rgba(239, 68, 68, 0.35), rgba(0, 0, 0, 0.35));
+    --logo-line: linear-gradient(90deg, #fecaca, #ef4444);
 }
 
 /* Subtle overlay to improve contrast on busy backgrounds */
@@ -1405,13 +1481,13 @@ body::before {
     content: "";
     position: fixed;
     inset: 0;
-    background: linear-gradient(180deg, rgba(2, 6, 23, 0.45), rgba(2, 6, 23, 0.25));
+    background: var(--page-overlay);
     pointer-events: none;
     z-index: 0;
 }
 
 main {
-    background-color: var(--card-bg);
+    background-color: var(--surface);
     border: 1px solid var(--border);
     box-shadow: var(--shadow);
 }
@@ -1419,7 +1495,7 @@ main {
 body:not(.af-body) h1,
 body:not(.af-body) h2,
 body:not(.af-body) h3 {
-    color: var(--text-900);
+    color: var(--text-primary);
 }
 
 body:not(.af-body) .about_us_text,
@@ -1428,12 +1504,12 @@ body:not(.af-body) label,
 body:not(.af-body) th,
 body:not(.af-body) td,
 body:not(.af-body) a {
-    color: var(--text-700);
+    color: var(--text-muted);
 }
 
 /* Links */
 a {
-    color: var(--primary);
+    color: var(--accent);
     text-decoration: none;
 }
 
@@ -1448,7 +1524,7 @@ body:not(.af-body) textarea,
 body:not(.af-body) select,
 body:not(.af-body) #search {
     border: 1px solid var(--border);
-    background-color: #f8fafc;
+    background-color: var(--input-bg);
     border-radius: 10px;
     padding: 10px 14px;
 }
@@ -1458,25 +1534,25 @@ body:not(.af-body) input[type="number"]:focus,
 body:not(.af-body) textarea:focus,
 body:not(.af-body) select:focus,
 body:not(.af-body) #search:focus {
-    border-color: var(--primary);
-    box-shadow: 0 0 0 4px var(--primary-50);
+    border-color: var(--accent);
+    box-shadow: 0 0 0 4px var(--accent-soft);
 }
 
 /* Buttons */
 button, .button1, #weapon-create, #weapon-edit, #copy-stats, #weapon-form form button[type="submit"] {
-    background-color: var(--primary);
+    background-color: var(--accent);
     border-radius: 10px;
     padding: 10px 16px;
     box-shadow: 0 2px 6px rgba(2, 6, 23, 0.15);
 }
 
 button:hover, .button1:hover, #weapon-create:hover, #weapon-edit:hover, #copy-stats:hover, #weapon-form form button[type="submit"]:hover {
-    background-color: var(--primary-700);
+    background-color: var(--accent-strong);
 }
 
 /* Table modernization */
 table {
-    background: rgba(255, 255, 255, 0.85);
+    background: var(--surface);
     border-radius: 12px;
     /* Avoid clipping tooltips or other positioned content inside table cells */
     overflow: visible;
@@ -1485,16 +1561,16 @@ table {
 thead th {
     position: sticky;
     top: 0;
-    background: rgba(255, 255, 255, 0.95);
+    background: var(--surface);
     backdrop-filter: blur(6px);
 }
 
 tbody tr:nth-child(odd) {
-    background: #fafafa;
+    background: var(--table-row-alt);
 }
 
 tbody tr:hover {
-    background: #f1f5f9;
+    background: var(--accent-soft);
 }
 
 th, td {
@@ -1503,21 +1579,21 @@ th, td {
 
 /* Hamburger + nav menu tweaks */
 .hamburger {
-    background: rgba(15, 23, 42, 0.6);
+    background: var(--nav-bg);
     backdrop-filter: blur(6px);
 }
 
 .nav-menu {
-    background-color: rgba(255, 255, 255, 0.9);
+    background-color: var(--surface);
     backdrop-filter: blur(8px);
 }
 
 .nav-menu a {
-    color: var(--text-900);
+    color: var(--text-primary);
 }
 
 .nav-menu a:hover {
-    color: var(--primary);
+    color: var(--accent);
 }
 
 /* Success/error text */
@@ -1530,7 +1606,7 @@ th, td {
 }
 
 #copy-message.error {
-    color: var(--primary);
+    color: var(--accent);
 }
 
 /* Responsive table spacing */
@@ -1568,13 +1644,13 @@ th, td {
     width: 22px;
     height: 22px;
     border-radius: 999px;
-    border: 1px solid rgba(0, 0, 0, 0.15);
-    background: rgba(255, 255, 255, 0.9);
+    border: 1px solid var(--border);
+    background: var(--surface);
     cursor: pointer;
     font-weight: 700;
     line-height: 1;
     padding: 0;
-    color: black;
+    color: var(--text-primary);
 }
 
 .tooltip {
@@ -1586,7 +1662,7 @@ th, td {
     max-width: min(320px, calc(100vw - 24px));
     padding: 10px 12px;
     border-radius: 10px;
-    background: rgba(15, 23, 42, 0.95);
+    background: var(--tooltip-bg);
     color: #fff;
     font-size: 0.9rem;
     line-height: 1.35;
@@ -1609,7 +1685,7 @@ th, td {
     height: 0;
     border-left: 6px solid transparent;
     border-right: 6px solid transparent;
-    border-bottom: 6px solid rgba(15, 23, 42, 0.95);
+    border-bottom: 6px solid var(--tooltip-bg);
 }
 
 .tooltip-trigger:hover + .tooltip,
@@ -1621,8 +1697,8 @@ th, td {
 
 .tooltip-trigger:hover,
 .tooltip-trigger:focus-visible {
-    border-color: rgba(15, 23, 42, 0.35);
-    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.12);
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-soft);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -1645,7 +1721,7 @@ th, td {
         border-right: 6px solid transparent;
         border-left: 6px solid transparent;
         border-top: none;
-        border-bottom: 6px solid rgba(15, 23, 42, 0.95);
+        border-bottom: 6px solid var(--tooltip-bg);
     }
 
     .tooltip-trigger:hover + .tooltip,
@@ -1667,10 +1743,10 @@ th, td {
     .weapon-stats-table.horizontal-table tr {
         display: block;
         margin-bottom: 14px;
-        border: 1px solid rgba(0, 0, 0, 0.08);
+        border: 1px solid var(--border);
         border-radius: 12px;
         overflow: visible;
-        background: rgba(255, 255, 255, 0.9);
+        background: var(--surface);
     }
 
     .weapon-stats-table.horizontal-table td {
@@ -1680,7 +1756,7 @@ th, td {
         gap: 12px;
         padding: 12px 14px;
         border: none;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+        border-bottom: 1px solid var(--border);
         text-align: right;
     }
 
@@ -1692,7 +1768,7 @@ th, td {
         content: attr(data-label);
         font-weight: 700;
         text-align: left;
-        color: rgba(15, 23, 42, 0.9);
+        color: var(--text-primary);
         flex: 1;
     }
 }
diff --git a/templates/about_us.html b/templates/about_us.html
index ebaa903..a84e963 100644
--- a/templates/about_us.html
+++ b/templates/about_us.html
@@ -19,14 +19,20 @@
             <p class="af-subtitle">The Founders</p>
         </div>
     </div>
-    <button class="af-nav-toggle" type="button" aria-expanded="false" aria-controls="af-nav">
-        Menu
-    </button>
     <nav class="af-nav" id="af-nav" aria-label="Primary">
         <a class="af-nav-link" href="{{ url_for('index') }}">Home</a>
         <a class="af-nav-link" href="{{ url_for('calculator') }}">Calculator</a>
         <a class="af-nav-link" href="{{ url_for('suggestion') }}">Feedback</a>
     </nav>
+    <div class="af-header-actions">
+        <button class="af-theme-toggle" type="button" aria-pressed="false">
+            <span class="af-theme-toggle-indicator" aria-hidden="true"></span>
+            <span class="af-theme-toggle-label">Dark mode</span>
+        </button>
+        <button class="af-nav-toggle" type="button" aria-expanded="false" aria-controls="af-nav">
+            Menu
+        </button>
+    </div>
 </header>
 
 <main class="af-shell">
@@ -104,6 +110,26 @@
 <script>
     const navToggle = document.querySelector('.af-nav-toggle');
     const nav = document.getElementById('af-nav');
+    const themeToggle = document.querySelector('.af-theme-toggle');
+    const themeLabel = document.querySelector('.af-theme-toggle-label');
+    const THEME_KEY = 'af-theme';
+
+    const setTheme = (theme) => {
+        document.body.classList.toggle('theme-dark', theme === 'dark');
+        document.body.classList.toggle('theme-light', theme === 'light');
+        themeToggle.setAttribute('aria-pressed', theme === 'dark');
+        themeLabel.textContent = theme === 'dark' ? 'Light mode' : 'Dark mode';
+        localStorage.setItem(THEME_KEY, theme);
+    };
+
+    const storedTheme = localStorage.getItem(THEME_KEY);
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    setTheme(storedTheme || (prefersDark ? 'dark' : 'light'));
+
+    themeToggle.addEventListener('click', () => {
+        const isDark = document.body.classList.contains('theme-dark');
+        setTheme(isDark ? 'light' : 'dark');
+    });
 
     navToggle.addEventListener('click', () => {
         const isOpen = nav.classList.toggle('is-open');
diff --git a/templates/calculator.html b/templates/calculator.html
index d864987..7c23c5f 100644
--- a/templates/calculator.html
+++ b/templates/calculator.html
@@ -19,14 +19,20 @@
             <p class="af-subtitle">Weapon Factory</p>
         </div>
     </div>
-    <button class="af-nav-toggle" type="button" aria-expanded="false" aria-controls="af-nav">
-        Menu
-    </button>
     <nav class="af-nav" id="af-nav" aria-label="Primary">
         <a class="af-nav-link" href="{{ url_for('index') }}">Home</a>
         <a class="af-nav-link" href="{{ url_for('suggestion') }}">Feedback</a>
         <a class="af-nav-link" href="{{ url_for('about_us') }}">About</a>
     </nav>
+    <div class="af-header-actions">
+        <button class="af-theme-toggle" type="button" aria-pressed="false">
+            <span class="af-theme-toggle-indicator" aria-hidden="true"></span>
+            <span class="af-theme-toggle-label">Dark mode</span>
+        </button>
+        <button class="af-nav-toggle" type="button" aria-expanded="false" aria-controls="af-nav">
+            Menu
+        </button>
+    </div>
 </header>
 <main class="af-shell">
     <section class="af-hero">
@@ -205,6 +211,26 @@
 <script>
     const navToggle = document.querySelector('.af-nav-toggle');
     const nav = document.getElementById('af-nav');
+    const themeToggle = document.querySelector('.af-theme-toggle');
+    const themeLabel = document.querySelector('.af-theme-toggle-label');
+    const THEME_KEY = 'af-theme';
+
+    const setTheme = (theme) => {
+        document.body.classList.toggle('theme-dark', theme === 'dark');
+        document.body.classList.toggle('theme-light', theme === 'light');
+        themeToggle.setAttribute('aria-pressed', theme === 'dark');
+        themeLabel.textContent = theme === 'dark' ? 'Light mode' : 'Dark mode';
+        localStorage.setItem(THEME_KEY, theme);
+    };
+
+    const storedTheme = localStorage.getItem(THEME_KEY);
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    setTheme(storedTheme || (prefersDark ? 'dark' : 'light'));
+
+    themeToggle.addEventListener('click', () => {
+        const isDark = document.body.classList.contains('theme-dark');
+        setTheme(isDark ? 'light' : 'dark');
+    });
 
     navToggle.addEventListener('click', () => {
         const isOpen = nav.classList.toggle('is-open');
diff --git a/templates/index.html b/templates/index.html
index 9464c01..e3fb033 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -19,14 +19,20 @@
             <p class="af-subtitle">Operations hub</p>
         </div>
     </div>
-    <button class="af-nav-toggle" type="button" aria-expanded="false" aria-controls="af-nav">
-        Menu
-    </button>
     <nav class="af-nav" id="af-nav" aria-label="Primary">
         <a class="af-nav-link" href="{{ url_for('calculator') }}">Calculator</a>
         <a class="af-nav-link" href="{{ url_for('suggestion') }}">Feedback</a>
         <a class="af-nav-link" href="{{ url_for('about_us') }}">About</a>
     </nav>
+    <div class="af-header-actions">
+        <button class="af-theme-toggle" type="button" aria-pressed="false">
+            <span class="af-theme-toggle-indicator" aria-hidden="true"></span>
+            <span class="af-theme-toggle-label">Dark mode</span>
+        </button>
+        <button class="af-nav-toggle" type="button" aria-expanded="false" aria-controls="af-nav">
+            Menu
+        </button>
+    </div>
 </header>
 <main class="af-shell">
     <section class="af-hero">
@@ -86,6 +92,26 @@
 <script>
     const navToggle = document.querySelector('.af-nav-toggle');
     const nav = document.getElementById('af-nav');
+    const themeToggle = document.querySelector('.af-theme-toggle');
+    const themeLabel = document.querySelector('.af-theme-toggle-label');
+    const THEME_KEY = 'af-theme';
+
+    const setTheme = (theme) => {
+        document.body.classList.toggle('theme-dark', theme === 'dark');
+        document.body.classList.toggle('theme-light', theme === 'light');
+        themeToggle.setAttribute('aria-pressed', theme === 'dark');
+        themeLabel.textContent = theme === 'dark' ? 'Light mode' : 'Dark mode';
+        localStorage.setItem(THEME_KEY, theme);
+    };
+
+    const storedTheme = localStorage.getItem(THEME_KEY);
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    setTheme(storedTheme || (prefersDark ? 'dark' : 'light'));
+
+    themeToggle.addEventListener('click', () => {
+        const isDark = document.body.classList.contains('theme-dark');
+        setTheme(isDark ? 'light' : 'dark');
+    });
 
     navToggle.addEventListener('click', () => {
         const isOpen = nav.classList.toggle('is-open');
diff --git a/templates/suggestion.html b/templates/suggestion.html
index b26b79f..914bdfb 100644
--- a/templates/suggestion.html
+++ b/templates/suggestion.html
@@ -19,14 +19,20 @@
             <p class="af-subtitle">Radio Tower</p>
         </div>
     </div>
-    <button class="af-nav-toggle" type="button" aria-expanded="false" aria-controls="af-nav">
-        Menu
-    </button>
     <nav class="af-nav" id="af-nav" aria-label="Primary">
         <a class="af-nav-link" href="{{ url_for('index') }}">Home</a>
         <a class="af-nav-link" href="{{ url_for('calculator') }}">Calculator</a>
         <a class="af-nav-link" href="{{ url_for('about_us') }}">About</a>
     </nav>
+    <div class="af-header-actions">
+        <button class="af-theme-toggle" type="button" aria-pressed="false">
+            <span class="af-theme-toggle-indicator" aria-hidden="true"></span>
+            <span class="af-theme-toggle-label">Dark mode</span>
+        </button>
+        <button class="af-nav-toggle" type="button" aria-expanded="false" aria-controls="af-nav">
+            Menu
+        </button>
+    </div>
 </header>
 <main class="af-shell">
     <section class="af-card">
@@ -65,6 +71,26 @@
 <script>
     const navToggle = document.querySelector('.af-nav-toggle');
     const nav = document.getElementById('af-nav');
+    const themeToggle = document.querySelector('.af-theme-toggle');
+    const themeLabel = document.querySelector('.af-theme-toggle-label');
+    const THEME_KEY = 'af-theme';
+
+    const setTheme = (theme) => {
+        document.body.classList.toggle('theme-dark', theme === 'dark');
+        document.body.classList.toggle('theme-light', theme === 'light');
+        themeToggle.setAttribute('aria-pressed', theme === 'dark');
+        themeLabel.textContent = theme === 'dark' ? 'Light mode' : 'Dark mode';
+        localStorage.setItem(THEME_KEY, theme);
+    };
+
+    const storedTheme = localStorage.getItem(THEME_KEY);
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    setTheme(storedTheme || (prefersDark ? 'dark' : 'light'));
+
+    themeToggle.addEventListener('click', () => {
+        const isDark = document.body.classList.contains('theme-dark');
+        setTheme(isDark ? 'light' : 'dark');
+    });
 
     navToggle.addEventListener('click', () => {
         const isOpen = nav.classList.toggle('is-open');