{t.stopPropagation();const e=this._vacEntity(i);e&&this._openMoreInfo(e)}}>
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index c20a2b5b..48a2d4ac 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -8,6 +8,7 @@
in one shell and are no longer ellipsized; marker LQI uses red at 0–40,
amber at 41–179 and green at 180+. Activity motion follows the new package
timings and colors, while saved custom pulse settings remain authoritative.
+ The live vacuum puck uses the same theme-aware core, stroke and shadow.
Interactive markers also have a 44×44 px target and reuse their existing
click/confirmation path from Enter or Space
([#179](https://github.com/Matysh/houseplan-card/issues/179)).
diff --git a/docs/CHANGELOG.ru.md b/docs/CHANGELOG.ru.md
index 2cd83fa9..2f16c791 100755
--- a/docs/CHANGELOG.ru.md
+++ b/docs/CHANGELOG.ru.md
@@ -15,6 +15,7 @@
не сокращаются многоточием; LQI маркера окрашивается красным при 0–40,
жёлтым при 41–179 и зелёным при 180+. Пульсации получили новые тайминги и
цвета, а явно сохранённые пользовательские настройки сохранили приоритет.
+ Живой маркер робота-пылесоса использует те же цвета темы, обводку и тень.
Интерактивный маркер также имеет область нажатия не меньше 44×44 px и по
Enter/Space использует прежний click/confirmation path
([#179](https://github.com/Matysh/houseplan-card/issues/179)).
diff --git a/docs/images/06-device-display-preview.png b/docs/images/06-device-display-preview.png
index 43b13d82..46e50554 100644
Binary files a/docs/images/06-device-display-preview.png and b/docs/images/06-device-display-preview.png differ
diff --git a/docs/images/screenshots.json b/docs/images/screenshots.json
index 19553812..2d688bd0 100644
--- a/docs/images/screenshots.json
+++ b/docs/images/screenshots.json
@@ -1,7 +1,7 @@
{
"version": 1,
"fixture": "synthetic-only",
- "sourceFingerprint": "4789f3351376f16116faa2c6102238a0ca1bbd6dabb9c5d1d5e07c71ccab3aba",
+ "sourceFingerprint": "0626dfc9748c390b8b2ad35a5abbab2bb5e8ae02048c2f081d77aeea548f34a0",
"captureScriptSha256": "34f2219790d46efd8250e7a1bd829cb8fc0b0547e1260635fefa52407551b41b",
"command": "npm run build && node demo/docs/capture.mjs",
"scenarios": {
@@ -13,7 +13,7 @@
},
"theme": "dark",
"language": "en",
- "sourceSha256": "4789f3351376f16116faa2c6102238a0ca1bbd6dabb9c5d1d5e07c71ccab3aba",
+ "sourceSha256": "0626dfc9748c390b8b2ad35a5abbab2bb5e8ae02048c2f081d77aeea548f34a0",
"imageSha256": "e2d31553c2541fd7f0725db348e3d0210867d4e2489532372270820bc0050794"
},
"view-touch": {
@@ -24,7 +24,7 @@
},
"theme": "dark",
"language": "en",
- "sourceSha256": "4789f3351376f16116faa2c6102238a0ca1bbd6dabb9c5d1d5e07c71ccab3aba",
+ "sourceSha256": "0626dfc9748c390b8b2ad35a5abbab2bb5e8ae02048c2f081d77aeea548f34a0",
"imageSha256": "c4d5bd72e177b45737dbf1c3b09f52a31bb0c63829d8d652655cfb54f154c2ff"
},
"space-create": {
@@ -35,7 +35,7 @@
},
"theme": "dark",
"language": "en",
- "sourceSha256": "4789f3351376f16116faa2c6102238a0ca1bbd6dabb9c5d1d5e07c71ccab3aba",
+ "sourceSha256": "0626dfc9748c390b8b2ad35a5abbab2bb5e8ae02048c2f081d77aeea548f34a0",
"imageSha256": "c53db2e5c642a5549c13f3c93a5b359fed69bdb2621bf71a243a877ffcb95e6b"
},
"room-contour-close": {
@@ -46,7 +46,7 @@
},
"theme": "dark",
"language": "en",
- "sourceSha256": "4789f3351376f16116faa2c6102238a0ca1bbd6dabb9c5d1d5e07c71ccab3aba",
+ "sourceSha256": "0626dfc9748c390b8b2ad35a5abbab2bb5e8ae02048c2f081d77aeea548f34a0",
"imageSha256": "2f13ea645af306eee9cc7c52699c928377b72f412b08c1a3db6beb848ace1b51"
},
"plan-context-tray": {
@@ -57,7 +57,7 @@
},
"theme": "dark",
"language": "en",
- "sourceSha256": "4789f3351376f16116faa2c6102238a0ca1bbd6dabb9c5d1d5e07c71ccab3aba",
+ "sourceSha256": "0626dfc9748c390b8b2ad35a5abbab2bb5e8ae02048c2f081d77aeea548f34a0",
"imageSha256": "a6c526fede11bc3503fd2384bd4a3f6afa008f481c5c47578f06cae6c81c6f9b"
},
"device-editor": {
@@ -68,7 +68,7 @@
},
"theme": "dark",
"language": "en",
- "sourceSha256": "4789f3351376f16116faa2c6102238a0ca1bbd6dabb9c5d1d5e07c71ccab3aba",
+ "sourceSha256": "0626dfc9748c390b8b2ad35a5abbab2bb5e8ae02048c2f081d77aeea548f34a0",
"imageSha256": "189287256dae5721cc8fac76b82180f1eba36281434032824aa616426fcad6d7"
},
"device-display-preview": {
@@ -79,8 +79,8 @@
},
"theme": "dark",
"language": "en",
- "sourceSha256": "4789f3351376f16116faa2c6102238a0ca1bbd6dabb9c5d1d5e07c71ccab3aba",
- "imageSha256": "112afb49df2f4398e5b3de29c21fd26af02fba007649e810786c97b3da42a0fd"
+ "sourceSha256": "0626dfc9748c390b8b2ad35a5abbab2bb5e8ae02048c2f081d77aeea548f34a0",
+ "imageSha256": "25c56f2e0754fd6746f7f16ed4e2c83b777d783f879c3158e38884103131653b"
},
"background-editor": {
"file": "07-background-editor.png",
@@ -90,7 +90,7 @@
},
"theme": "dark",
"language": "en",
- "sourceSha256": "4789f3351376f16116faa2c6102238a0ca1bbd6dabb9c5d1d5e07c71ccab3aba",
+ "sourceSha256": "0626dfc9748c390b8b2ad35a5abbab2bb5e8ae02048c2f081d77aeea548f34a0",
"imageSha256": "d7cfe70551d9260169df8efd832e32ed7df99c7f60b55d1fd4a8322bd4c47175"
},
"room-card": {
@@ -101,7 +101,7 @@
},
"theme": "dark",
"language": "en",
- "sourceSha256": "4789f3351376f16116faa2c6102238a0ca1bbd6dabb9c5d1d5e07c71ccab3aba",
+ "sourceSha256": "0626dfc9748c390b8b2ad35a5abbab2bb5e8ae02048c2f081d77aeea548f34a0",
"imageSha256": "e7e3f0609a5dfa117e366b0388bd2d5286865110fd5798c02ffa752b2c285f95"
},
"device-info": {
@@ -112,7 +112,7 @@
},
"theme": "dark",
"language": "en",
- "sourceSha256": "4789f3351376f16116faa2c6102238a0ca1bbd6dabb9c5d1d5e07c71ccab3aba",
+ "sourceSha256": "0626dfc9748c390b8b2ad35a5abbab2bb5e8ae02048c2f081d77aeea548f34a0",
"imageSha256": "b61541f0f53db632c99bf082d875ec1f84f77b534147b769e382ca54d8fe5c3e"
}
}
diff --git a/src/houseplan-card.ts b/src/houseplan-card.ts
index 6a77de20..40d0980d 100755
--- a/src/houseplan-card.ts
+++ b/src/houseplan-card.ts
@@ -16721,7 +16721,7 @@ class HouseplanCard extends LitElement {
const icon = d.marker?.icon || d.icon || 'mdi:robot-vacuum';
pucks.push(html`
{ e.stopPropagation(); const ve = this._vacEntity(d); if (ve) this._openMoreInfo(ve); }}>
diff --git a/src/styles.ts b/src/styles.ts
index c323ebeb..023ea575 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -2498,10 +2498,14 @@ export const cardStyles = css`
height: var(--puck-size);
border-radius: 50%;
transform: translate(-50%, -50%);
- background: var(--hp-bg);
- border: 1px solid var(--hp-line);
- box-shadow: var(--shadow-1);
- color: var(--hp-txt);
+ --vac-core-bg: light-dark(#fff, #252525);
+ --vac-core-fg: light-dark(#252525, #fff);
+ background: var(--vac-core-bg);
+ border: 1px solid #BCBCBC;
+ box-shadow:
+ 0 1px 2px rgb(37 40 45 / 12%),
+ 0 4px 8px -1.07px rgb(37 40 45 / 18%);
+ color: var(--vac-core-fg);
display: flex;
align-items: center;
justify-content: center;
@@ -2512,11 +2516,13 @@ export const cardStyles = css`
transition: left 1.2s linear, top 1.2s linear;
animation: vacpulse 2.2s ease-out infinite;
}
+ .vacpuck.theme-light { --vac-core-bg: #fff; --vac-core-fg: #252525; }
+ .vacpuck.theme-dark { --vac-core-bg: #252525; --vac-core-fg: #fff; }
.vacpuck.jump { transition: none; }
.vacpuck.stale { opacity: 0.45; animation: none; }
.vacpuck ha-icon {
--mdc-icon-size: calc(var(--puck-size) * 0.68);
- color: var(--hp-txt);
+ color: var(--vac-core-fg);
/* same centering recipe as .dev ha-icon: without flex + line-height 0
the glyph sits on its text baseline and appears to float around the
circle (owner report 2026-07-31) */