homebridge-nuheat2 1.2.13 → 1.2.14

package/CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project should be documented in this file
 
 ## [Unreleased]
 
+## [1.2.14] - 2026-04-27
+
+### Changed
+
+- Make the custom Homebridge admin UI styles inherit the active Homebridge theme instead of forcing a separate dark design
+
 ## [1.2.13] - 2026-04-24
 
 ### Changed

package/homebridge-ui/public/styles.css

@@ -1,20 +1,17 @@
-@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600&display=swap");
-
 :root {
-  --bg: #111316;
-  --panel: #1a1d22;
-  --panel-soft: #22262d;
-  --input: #111820;
-  --text: #f4f7fb;
-  --muted: #b6c0cc;
-  --primary: #f3ba4d;
-  --primary-text: #211400;
-  --secondary: #2b313a;
-  --border: #3a414c;
-  --shadow: 0 16px 28px rgba(0, 0, 0, 0.28);
-  --warning: #f3ba4d;
-  --danger: #ff6b6b;
-  --success: #4fd1a5;
+  --plugin-border: var(
+    --bs-border-color-translucent,
+    rgba(148, 163, 184, 0.28)
+  );
+  --plugin-strong-border: rgba(148, 163, 184, 0.42);
+  --plugin-subtle-surface: rgba(148, 163, 184, 0.08);
+  --plugin-accent: var(--bs-primary, #0a84ff);
+  --plugin-accent-surface: rgba(10, 132, 255, 0.08);
+  --plugin-warning-surface: rgba(245, 158, 11, 0.12);
+  --plugin-success-surface: rgba(34, 197, 94, 0.12);
+  --plugin-danger-surface: rgba(239, 68, 68, 0.12);
+  --plugin-tile-ink: currentColor;
+  --plugin-tile-muted: currentColor;
 }
 
 * {
@@ -23,41 +20,45 @@
 
 body {
   margin: 0;
-  font-family: "Space Grotesk", "Segoe UI", sans-serif;
-  background: linear-gradient(
-      180deg,
-      rgba(243, 186, 77, 0.1),
-      transparent 260px
-    ),
-    var(--bg);
-  color: var(--text);
+  color: inherit;
+  background: transparent;
+  font: inherit;
 }
 
 .container {
   max-width: 920px;
   margin: 0 auto;
-  padding: 28px 24px 24px;
+  padding: 24px;
   display: grid;
   gap: 18px;
+  color: inherit;
 }
 
 header h1 {
-  font-size: 2.15rem;
-  line-height: 1.1;
   margin: 0 0 8px;
+  font-size: 2rem;
+  line-height: 1.1;
+}
+
+.subtitle,
+.help,
+.muted {
+  color: currentColor;
+  opacity: 0.72;
 }
 
-.subtitle {
+.subtitle,
+.help {
   margin: 0;
-  color: var(--muted);
+  line-height: 1.5;
 }
 
 .panel {
-  background: var(--panel);
-  border: 1px solid var(--border);
+  color: inherit;
+  background: transparent;
+  border: 1px solid var(--plugin-border);
   border-radius: 8px;
   padding: 22px;
-  box-shadow: var(--shadow);
 }
 
 .panel h2 {
@@ -82,16 +83,6 @@ header h1 {
   gap: 16px;
 }
 
-.help {
-  color: var(--muted);
-  margin: 0;
-  line-height: 1.5;
-}
-
-.muted {
-  color: var(--muted);
-}
-
 .settings-grid,
 .split-grid {
   display: grid;
@@ -103,33 +94,29 @@ header h1 {
 .field {
   display: grid;
   gap: 7px;
-  color: var(--text);
+  color: inherit;
   font-size: 0.95rem;
   font-weight: 600;
 }
 
+.field input,
+.field select {
+  width: 100%;
+}
+
 .field small,
 .checkbox small {
-  color: var(--muted);
+  color: currentColor;
   display: block;
   font-size: 0.82rem;
   font-weight: 400;
   line-height: 1.35;
-}
-
-select,
-input {
-  width: 100%;
-  padding: 12px 14px;
-  border-radius: 7px;
-  border: 1px solid var(--border);
-  background: var(--input);
-  color: var(--text);
-  font-size: 1rem;
+  opacity: 0.72;
 }
 
 input::placeholder {
-  color: #64748b;
+  color: currentColor;
+  opacity: 0.48;
 }
 
 .checkbox {
@@ -137,7 +124,7 @@ input::placeholder {
   align-items: flex-start;
   gap: 10px;
   margin-top: 18px;
-  color: var(--text);
+  color: inherit;
   font-weight: 600;
 }
 
@@ -152,8 +139,7 @@ input::placeholder {
 }
 
 .readonly input {
-  background: #111827;
-  opacity: 0.75;
+  opacity: 0.68;
 }
 
 .actions {
@@ -164,31 +150,29 @@ input::placeholder {
 }
 
 button {
-  border: none;
-  border-radius: 7px;
-  padding: 12px 20px;
-  font-size: 0.95rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition:
-    transform 0.15s ease,
-    box-shadow 0.15s ease;
+  font: inherit;
 }
 
-button:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 12px 24px rgba(243, 186, 77, 0.14);
+button.primary,
+button.secondary {
+  border-radius: 6px;
 }
 
-.primary {
-  background: var(--primary);
-  color: var(--primary-text);
+button.primary {
+  color: var(--bs-btn-color, #fff);
+  background: var(--bs-primary, var(--plugin-accent));
+  border: 1px solid var(--bs-primary, var(--plugin-accent));
 }
 
-.secondary {
-  background: var(--secondary);
-  color: var(--text);
-  border: 1px solid var(--border);
+button.secondary {
+  color: inherit;
+  background: transparent;
+  border: 1px solid var(--plugin-border);
+}
+
+button.primary:hover,
+button.secondary:hover {
+  filter: brightness(1.04);
 }
 
 .toast-container {
@@ -202,33 +186,37 @@ button:hover {
 }
 
 .toast {
-  background: var(--panel);
-  border: 1px solid var(--border);
+  color: inherit;
+  background: var(--bs-body-bg, var(--plugin-subtle-surface));
+  border: 1px solid var(--plugin-border);
   border-radius: 8px;
   padding: 12px 16px;
-  box-shadow: var(--shadow);
   min-width: 220px;
   animation: slide-in 0.2s ease-out;
 }
 
 .toast.success {
-  border-color: #22c55e;
+  background: var(--plugin-success-surface);
+  border-color: rgba(34, 197, 94, 0.42);
 }
 
 .toast.error {
-  border-color: #ef4444;
+  background: var(--plugin-danger-surface);
+  border-color: rgba(239, 68, 68, 0.42);
 }
 
 .toast.warning {
-  border-color: #f59e0b;
+  background: var(--plugin-warning-surface);
+  border-color: rgba(245, 158, 11, 0.42);
 }
 
 .list-panel,
 .diagnostic-card {
-  border: 1px solid var(--border);
+  color: var(--plugin-tile-ink);
+  background: var(--plugin-subtle-surface);
+  border: 1px solid var(--plugin-border);
   border-radius: 8px;
   padding: 16px;
-  background: var(--panel-soft);
 }
 
 .dynamic-list {
@@ -238,11 +226,12 @@ button:hover {
 }
 
 .empty-list {
-  color: var(--muted);
-  border: 1px dashed var(--border);
+  color: var(--plugin-tile-muted);
+  border: 1px dashed var(--plugin-strong-border);
   border-radius: 8px;
   padding: 14px;
   line-height: 1.45;
+  opacity: 0.78;
 }
 
 .config-row {
@@ -256,13 +245,14 @@ button:hover {
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  color: var(--muted);
+  color: var(--plugin-tile-muted);
   font-size: 0.86rem;
   white-space: nowrap;
+  opacity: 0.78;
 }
 
 .remove-row {
-  padding: 10px 12px;
+  padding: 8px 12px;
 }
 
 .diagnostics-summary {
@@ -282,58 +272,50 @@ button:hover {
 }
 
 .diagnostic-card dt {
-  color: var(--muted);
+  color: var(--plugin-tile-muted);
   font-size: 0.82rem;
   margin-bottom: 4px;
+  opacity: 0.72;
 }
 
 .diagnostic-card dd {
   margin: 0;
+  color: var(--plugin-tile-ink);
   word-break: break-word;
 }
 
-.pill {
+.pill,
+.status-pill {
   display: inline-flex;
   align-items: center;
+  border: 1px solid var(--plugin-border);
   border-radius: 999px;
-  padding: 6px 10px;
-  font-size: 0.8rem;
-  border: 1px solid var(--border);
+  color: inherit;
+  background: transparent;
   white-space: nowrap;
 }
 
-.pill.good {
-  background: rgba(34, 197, 94, 0.12);
-  border-color: rgba(34, 197, 94, 0.4);
-  color: #86efac;
-}
-
-.pill.warn {
-  background: rgba(245, 158, 11, 0.12);
-  border-color: rgba(245, 158, 11, 0.4);
-  color: #fcd34d;
+.pill {
+  padding: 6px 10px;
+  font-size: 0.8rem;
 }
 
 .status-pill {
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  color: var(--muted);
+  padding: 7px 11px;
   font-size: 0.82rem;
   font-weight: 600;
-  padding: 7px 11px;
-  white-space: nowrap;
 }
 
+.pill.good,
 .status-pill.good {
-  background: rgba(79, 209, 165, 0.12);
-  border-color: rgba(79, 209, 165, 0.45);
-  color: #9ff0d4;
+  background: var(--plugin-success-surface);
+  border-color: rgba(34, 197, 94, 0.42);
 }
 
+.pill.warn,
 .status-pill.warn {
-  background: rgba(243, 186, 77, 0.12);
-  border-color: rgba(243, 186, 77, 0.45);
-  color: #ffd98a;
+  background: var(--plugin-warning-surface);
+  border-color: rgba(245, 158, 11, 0.42);
 }
 
 @keyframes slide-in {
@@ -353,7 +335,7 @@ button:hover {
   }
 
   .container {
-    padding: 22px 16px;
+    padding: 20px 16px;
   }
 
   .settings-grid,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homebridge-nuheat2",
-  "version": "1.2.13",
+  "version": "1.2.14",
   "description": "Homebridge Platform for NuHeat Signature Thermostats",
   "main": "index.js",
   "scripts": {