From 5d09382d0d946412749a0764b044fafd5b476eec Mon Sep 17 00:00:00 2001
From: Matt Batchelder <matt@buzzbee.dev>
Date: Sat, 21 Feb 2026 10:28:20 -0500
Subject: [PATCH] Update dark theme color for dashboard animator to enhance
 visual consistency

---
 theme/assets/css/main.css             | 99 ++++++++++++++-------------
 theme/assets/js/dashboard-animator.js |  2 +-
 2 files changed, 53 insertions(+), 48 deletions(-)

diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css
index 7bb042b..8bb8b5a 100644
--- a/theme/assets/css/main.css
+++ b/theme/assets/css/main.css
@@ -1993,6 +1993,9 @@ p:last-child { margin-bottom: 0; }
   padding: 0;
   overflow: visible;
   box-shadow: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 /* ── Dashboard TV frame ────────────────────────── */
@@ -2000,14 +2003,16 @@ p:last-child { margin-bottom: 0; }
   display: flex;
   flex-direction: column;
   align-items: center;
+  width: 100%;
+  margin: 0 auto;
 }
 .dashboard-tv__body {
   width: 100%;
   max-width: 520px;
-  background: var(--color-bg-alt);
-  border: 4px solid var(--color-bg-alt);
+  background: #111;
+  border: 4px solid #111;
   border-radius: 6px 6px 4px 4px;
-  outline: 1px solid var(--color-border);
+  outline: 1px solid #000;
   padding: 3px;
   position: relative;
   box-shadow: 0 14px 48px rgba(0,0,0,0.55);
@@ -2024,7 +2029,7 @@ p:last-child { margin-bottom: 0; }
 .dashboard-tv__screen {
   width: 100%;
   aspect-ratio: 16/9;
-  background: #111;
+  background: var(--color-bg);
   border-radius: 2px;
   overflow: hidden;
   display: flex;
@@ -2045,8 +2050,8 @@ p:last-child { margin-bottom: 0; }
 .dashboard-tv__foot {
   width: 12px;
   height: 8px;
-  background: var(--color-bg-alt);
-  border: 1px solid var(--color-border);
+  background: #111;
+  border: 1px solid #000;
   border-radius: 0 0 4px 4px;
 }
 
@@ -2145,8 +2150,8 @@ p:last-child { margin-bottom: 0; }
 .da-tablet .da-body {
   width: 128px;
   height: 194px;
-  background: var(--color-bg-alt);
-  border: 2px solid var(--color-border);
+  background: #111;
+  border: 2px solid #000;
   border-radius: 14px;
   padding: 10px 8px 14px;
   display: flex;
@@ -2162,7 +2167,7 @@ p:last-child { margin-bottom: 0; }
   transform: translateX(-50%);
   width: 6px;
   height: 6px;
-  background: var(--color-border);
+  background: #333;
   border-radius: 50%;
 }
 .da-tablet .da-body::after {
@@ -2173,17 +2178,17 @@ p:last-child { margin-bottom: 0; }
   transform: translateX(-50%);
   width: 36px;
   height: 3px;
-  background: var(--color-border);
+  background: #333;
   border-radius: 2px;
 }
 /* ── Small Monitor ─────────────────────────────── */
 .da-monitor-sm .da-body {
   width: 236px;
   height: 146px;
-  background: var(--color-bg-alt);
-  border: 5px solid var(--color-bg-alt);
+  background: #111;
+  border: 5px solid #111;
   border-radius: 6px;
-  outline: 1px solid var(--color-border);
+  outline: 1px solid #000;
   padding: 3px;
   display: flex;
   align-items: stretch;
@@ -2206,25 +2211,25 @@ p:last-child { margin-bottom: 0; }
 .da-monitor-sm .da-stem {
   width: 14px;
   height: 20px;
-  background: var(--color-bg-alt);
-  border-left: 1px solid var(--color-border);
-  border-right: 1px solid var(--color-border);
+  background: #111;
+  border-left: 1px solid #000;
+  border-right: 1px solid #000;
 }
 .da-monitor-sm .da-base {
   width: 68px;
   height: 5px;
-  background: var(--color-bg-alt);
-  border: 1px solid var(--color-border);
+  background: #111;
+  border: 1px solid #000;
   border-radius: 3px;
 }
 /* ── Large Monitor ─────────────────────────────── */
 .da-monitor-lg .da-body {
   width: 298px;
   height: 177px;
-  background: var(--color-bg-alt);
-  border: 4px solid var(--color-bg-alt);
+  background: #111;
+  border: 4px solid #111;
   border-radius: 6px;
-  outline: 1px solid var(--color-border);
+  outline: 1px solid #000;
   padding: 3px;
   display: flex;
   align-items: stretch;
@@ -2234,25 +2239,25 @@ p:last-child { margin-bottom: 0; }
 .da-monitor-lg .da-stem {
   width: 16px;
   height: 26px;
-  background: var(--color-bg-alt);
-  border-left: 1px solid var(--color-border);
-  border-right: 1px solid var(--color-border);
+  background: #111;
+  border-left: 1px solid #000;
+  border-right: 1px solid #000;
 }
 .da-monitor-lg .da-base {
   width: 88px;
   height: 5px;
-  background: var(--color-bg-alt);
-  border: 1px solid var(--color-border);
+  background: #111;
+  border: 1px solid #000;
   border-radius: 3px;
 }
 /* ── TV ────────────────────────────────────────── */
 .da-tv .da-body {
   width: 320px;
   height: 188px;
-  background: var(--color-bg-alt);
-  border: 4px solid var(--color-bg-alt);
+  background: #111;
+  border: 4px solid #111;
   border-radius: 6px 6px 4px 4px;
-  outline: 1px solid var(--color-border);
+  outline: 1px solid #000;
   padding: 3px;
   display: flex;
   align-items: stretch;
@@ -2272,8 +2277,8 @@ p:last-child { margin-bottom: 0; }
 .da-tv .da-foot {
   width: 12px;
   height: 8px;
-  background: var(--color-bg-alt);
-  border: 1px solid var(--color-border);
+  background: #111;
+  border: 1px solid #000;
   border-radius: 0 0 4px 4px;
 }
 /* ── Projector ─────────────────────────────────── */
@@ -2281,8 +2286,8 @@ p:last-child { margin-bottom: 0; }
 .da-projector .da-proj-body {
   width: 156px;
   height: 62px;
-  background: var(--color-bg-alt);
-  border: 1px solid var(--color-border);
+  background: #111;
+  border: 1px solid #000;
   border-radius: 10px 10px 8px 8px;
   display: flex;
   align-items: center;
@@ -2311,8 +2316,8 @@ p:last-child { margin-bottom: 0; }
   height: 8px;
   background: repeating-linear-gradient(
     90deg,
-    var(--color-border) 0px,
-    var(--color-border) 2px,
+    #333 0px,
+    #333 2px,
     transparent 2px,
     transparent 5px
   );
@@ -2322,7 +2327,7 @@ p:last-child { margin-bottom: 0; }
   width: 38px;
   height: 38px;
   background: #080c12;
-  border: 2px solid var(--color-border);
+  border: 2px solid #000;
   border-radius: 50%;
   flex-shrink: 0;
   position: relative;
@@ -2348,8 +2353,8 @@ p:last-child { margin-bottom: 0; }
 .da-projector .da-proj-screen {
   width: 240px;
   height: 72px;
-  background: var(--color-bg-alt);
-  border: 1px solid var(--color-border);
+  background: #111;
+  border: 1px solid #000;
   border-radius: 3px;
   overflow: hidden;
   padding: 3px;
@@ -2363,15 +2368,15 @@ p:last-child { margin-bottom: 0; }
   gap: 5px;
   background: #0a0d12;
   padding: 5px;
-  border: 1px solid var(--color-border);
+  border: 1px solid #000;
   border-radius: 4px;
   box-shadow: 0 14px 48px rgba(0,0,0,0.60);
 }
 .da-vwall .da-panel {
   width: 148px;
   height: 90px;
-  background: var(--color-bg-alt);
-  border: 2px solid var(--color-bg-alt);
+  background: #111;
+  border: 2px solid #111;
   padding: 2px;
   display: flex;
   align-items: stretch;
@@ -2425,10 +2430,10 @@ p:last-child { margin-bottom: 0; }
 .ts-tv__body {
   width: 320px;
   height: 188px;
-  background: var(--color-bg-alt);
-  border: 4px solid var(--color-bg-alt);
+  background: #111;
+  border: 4px solid #111;
   border-radius: 6px 6px 4px 4px;
-  outline: 1px solid var(--color-border);
+  outline: 1px solid #000;
   padding: 3px;
   display: flex;
   align-items: stretch;
@@ -2491,7 +2496,7 @@ p:last-child { margin-bottom: 0; }
   width: 6px;
   height: 14px;
   background: #1a1a1a;
-  border: 1px solid var(--color-border);
+  border: 1px solid #000;
   border-left: none;
   border-radius: 0 2px 2px 0;
   z-index: 1;
@@ -2515,8 +2520,8 @@ p:last-child { margin-bottom: 0; }
 .ts-tv__foot {
   width: 12px;
   height: 8px;
-  background: var(--color-bg-alt);
-  border: 1px solid var(--color-border);
+  background: #111;
+  border: 1px solid #000;
   border-radius: 0 0 4px 4px;
 }
 /* ── Stick device ── */
diff --git a/theme/assets/js/dashboard-animator.js b/theme/assets/js/dashboard-animator.js
index b1e9ca1..cf2ea60 100644
--- a/theme/assets/js/dashboard-animator.js
+++ b/theme/assets/js/dashboard-animator.js
@@ -13,7 +13,7 @@
   var LINE_W   = 340;    // line graph width in SVG units
   var PIE_R    = 55;     // pie chart radius
 
-  var DARK  = { text: '#E0E0E0', muted: '#9E9E9E', border: '#333', center: '#222' };
+  var DARK  = { text: '#E0E0E0', muted: '#9E9E9E', border: '#333', center: '#1A1A1A' };
   var LIGHT = { text: '#333333', muted: '#666666', border: '#E0E0E0', center: '#fff' };
 
   function isDark() { return document.documentElement.getAttribute('data-theme') === 'dark'; }