diff --git a/index.html b/index.html
index 617ef24..8aaecde 100644
--- a/index.html
+++ b/index.html
@@ -75,8 +75,9 @@
                     <span id="capacity-label">CAPACITY</span>
                     <span id="capacity-text">0%</span>
                 </div>
-                <div style="width:100%; height:4px; background:#eee; border:1px solid #000;">
-                    <div id="capacity-bar" style="width:0%; height:100%; background:#000;"></div>
+
+                <div id="capacity-track">
+                    <div id="capacity-bar"></div>
                 </div>
             </div>
 
diff --git a/script.js b/script.js
index 8c180ff..db97efa 100644
--- a/script.js
+++ b/script.js
@@ -111,9 +111,9 @@ document.addEventListener('DOMContentLoaded', () => {
         if (usage > 50) {
             capMeter.style.display = 'block';
             capBar.style.width = `${usage}%`;
-
             capText.textContent = `${usage}% (${bytes} / ${maxBytes} B)`;
 
+            // Update Text Labels
             if (raw_usage <= 100) {
                 capLabel.textContent = 'CAPACITY';
             } else {
@@ -121,13 +121,16 @@ document.addEventListener('DOMContentLoaded', () => {
             }
 
             if (usage > 90) {
+                // Critical Level: Force RED
                 capBar.style.backgroundColor = 'red';
                 capText.style.color = 'red';
                 capLabel.style.color = 'red';
             } else {
-                capBar.style.backgroundColor = '#000';
-                capText.style.color = '#000';
-                capLabel.style.color = '#000';
+                // Normal Level: Remove inline styles.
+                // This lets CSS var(--text-color) take over (Black in Light, White in Dark)
+                capBar.style.backgroundColor = '';
+                capText.style.color = '';
+                capLabel.style.color = '';
             }
         } else {
             capMeter.style.display = 'none';
diff --git a/style.css b/style.css
index 06a8e33..517ac86 100644
--- a/style.css
+++ b/style.css
@@ -504,10 +504,32 @@ input[type="radio"]:focus {
     position: relative; /* Just in case */
 }
 
+/* --- CAPACITY METER --- */
+#capacity-track {
+    width: 100%;
+    height: 4px;
+    /* Light Mode: Light Grey track */
+    background: #eee;
+    border: 1px solid var(--border-color);
+}
+
+#capacity-bar {
+    height: 100%;
+    width: 0%;
+    /* Automatically swaps Black (Light) <-> White (Dark) */
+    background-color: var(--text-color);
+    transition: width 0.2s ease, background-color 0.2s;
+}
+
+/* Specific Dark Mode overrides for the track background */
+@media (prefers-color-scheme: dark) {
+    #capacity-track {
+        /* Dark Mode: Dark Grey track so the White bar pops */
+        background: #333;
+    }
+}
+
 /* --- DARK MODE SUPPORT --- */
-
-/* --- DARK MODE SUPPORT (High Contrast / Brutalist) --- */
-
 @media (prefers-color-scheme: dark) {
     :root {
         /* PURE BLACK & WHITE - No "middling greys" */