// Assist textfield readability — v4 targets the new ha-input / wa-input // (Web Awesome) component stack introduced in recent HA builds. // Old MDC selectors (mwc-textfield, mdc-text-field__input) don't apply. (function () { if (window.__assistFixLoaded) return; window.__assistFixLoaded = true; function v(name, fallback) { const x = getComputedStyle(document.documentElement) .getPropertyValue(name).trim(); return x || fallback; } function stylePiece(el, spec) { if (!el) return; for (const [k, val] of Object.entries(spec)) { el.style.setProperty(k, val, 'important'); } } function patchHaInput(haInput) { if (!haInput || haInput.__assistFixed) return; const sr = haInput.shadowRoot; if (!sr) return; haInput.__assistFixed = true; // Colors from active theme const fg = v('--primary-text-color', '#e7e9f4'); const bg = v('--card-background-color', 'rgba(22, 24, 40, 0.92)'); const muted = v('--secondary-text-color', '#9a9cb8'); const border = v('--divider-color', 'rgba(255,255,255,0.20)'); const accent = v('--primary-color', '#a78bfa'); // Style at ha-input shadow level — exported parts from wa-input const style = document.createElement('style'); style.textContent = ` :host, ::slotted(*) { color: ${fg}; } wa-input { color: ${fg}; } wa-input::part(base), wa-input::part(wa-base) { background-color: ${bg} !important; border-color: ${border} !important; color: ${fg} !important; } wa-input::part(input), wa-input::part(wa-input) { color: ${fg} !important; caret-color: ${fg} !important; background-color: transparent !important; } wa-input::part(label), wa-input::part(form-control-label) { color: ${muted} !important; } wa-input::part(hint) { color: ${muted} !important; } `; sr.appendChild(style); // Also walk into the wa-input and patch the inner directly const waInput = sr.querySelector('wa-input'); if (waInput && waInput.shadowRoot) { const waSr = waInput.shadowRoot; const innerStyle = document.createElement('style'); innerStyle.textContent = ` :host { color: ${fg}; } .text-field, div.text-field { background-color: ${bg} !important; border-color: ${border} !important; } input, input.control, input[part="input"] { color: ${fg} !important; caret-color: ${fg} !important; background-color: transparent !important; } input::placeholder { color: ${muted} !important; opacity: 0.7 !important; } label, .label, label[part~="label"] { color: ${muted} !important; } `; waSr.appendChild(innerStyle); // Belt-and-suspenders: inline styles on the input element itself const input = waSr.querySelector('input'); if (input) { stylePiece(input, { 'color': fg, 'caret-color': fg, 'background-color': 'transparent', }); } const base = waSr.querySelector('[part="base"], div.text-field'); if (base) { stylePiece(base, { 'background-color': bg, 'border-color': border, 'color': fg, }); } const label = waSr.querySelector('[part~="label"], .label'); if (label) { stylePiece(label, { 'color': muted }); } } } function walkForHaInput(root, depth = 0) { if (!root || depth > 10) return 0; let found = 0; try { root.querySelectorAll('ha-input').forEach(el => { patchHaInput(el); found++; }); // Also catch any legacy ha-textfield / mwc-textfield root.querySelectorAll('ha-textfield, ha-textarea, mwc-textfield, mwc-textarea, input, textarea').forEach(el => { // best-effort inline fix for older stack if (!el.__assistFixedLegacy) { el.style.setProperty('color', v('--primary-text-color', '#e7e9f4'), 'important'); el.__assistFixedLegacy = true; } }); root.querySelectorAll('*').forEach(el => { if (el.shadowRoot) found += walkForHaInput(el.shadowRoot, depth + 1); }); } catch (e) {} return found; } // Initial pass let n = walkForHaInput(document); console.log('[assist-fix] v4 initial ha-input elements styled:', n); // Observer const obs = new MutationObserver(() => walkForHaInput(document)); obs.observe(document.body || document.documentElement, { childList: true, subtree: true, }); // Dialog-open event + periodic sweep window.addEventListener('show-dialog', () => { setTimeout(() => { const nn = walkForHaInput(document); console.log('[assist-fix] v4 after show-dialog ha-input styled:', nn); }, 120); }); let passes = 0; const iv = setInterval(() => { const nn = walkForHaInput(document); if (nn > n) { console.log('[assist-fix] v4 now styled:', nn); n = nn; } if (++passes > 240) clearInterval(iv); }, 500); console.log('[assist-fix] v4 loaded (targets ha-input / wa-input Web Awesome stack)'); })();