home_automation/Home-Assistant-Configs
2
0
Fork 0
Code Issues 47 Pull Requests Projects Activity

First attempt

Browse Source
This commit is contained in:
Tony Stork
2026-03-30 00:20:44 -04:00
parent 65309bfa39
commit ef55c0a789
3 changed files with 29 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bubble/State Color Button/code.js
+6 -4
View File
@@ -6,18 +6,20 @@
state = hass?.states[this.config?.entity]?.state || ''; state = hass?.states[this.config?.entity]?.state || '';
} }
let bg_color = 'var(--bubble-main-background-color)'; let off_color = this.config?.state_color_button?.off_color
? `var(--${this.config.state_color_button.off_color})`
: 'var(--bubble-main-background-color)';
// Use the configured color or default to accent color // Use the configured color or default to accent color
let on_color = this.config?.state_color_button?.color let on_color = this.config?.state_color_button?.on_color
? `var(--${this.config.state_color_button.color})` ? `var(--${this.config.state_color_button.on_color})`
: 'var(--bubble-accent-color)'; : 'var(--bubble-accent-color)';
// Main button background // Main button background
const mainButton = card?.querySelector('.bubble-button-background'); const mainButton = card?.querySelector('.bubble-button-background');
if (mainButton) { if (mainButton) {
mainButton.style.opacity = '1'; mainButton.style.opacity = '1';
mainButton.style.backgroundColor = state === 'on' ? on_color : bg_color; mainButton.style.backgroundColor = state === 'on' ? on_color : off_color;
mainButton.style.transition = 'background-color 1s'; mainButton.style.transition = 'background-color 1s';
} }
bubble/State Color Button/editor.yaml
+7 -2
View File
@@ -1,5 +1,10 @@
- name: color - name: on_color
label: Color (CSS Variable) label: On Color (CSS Variable)
selector:
text: {}
required: false
- name: off_color
label: Off Color (CSS Variable)
selector: selector:
text: {} text: {}
required: false required: false
bubble/State Color Button/import.yaml
+16 -9
View File
@@ -1,6 +1,6 @@
state_color_button: state_color_button:
name: State Color Button name: State Color Button
version: 1.2.0 version: 2.0.0
creator: Tony Stork creator: Tony Stork
supported: supported:
- button - button
@@ -14,7 +14,7 @@ state_color_button:
alt_entity: sensor.your_face alt_entity: sensor.your_face
</pre></code-block> </pre></code-block>
code: |- code: |-
${(() => { `${(() => {
let state; let state;
if (this.config?.state_color_button?.alt_entity) { if (this.config?.state_color_button?.alt_entity) {
state = hass?.states[this.config?.state_color_button?.alt_entity]?.state || ''; state = hass?.states[this.config?.state_color_button?.alt_entity]?.state || '';
@@ -22,18 +22,20 @@ state_color_button:
state = hass?.states[this.config?.entity]?.state || ''; state = hass?.states[this.config?.entity]?.state || '';
} }
let bg_color = 'var(--bubble-main-background-color)'; let off_color = this.config?.state_color_button?.off_color
? `var(--${this.config.state_color_button.off_color})`
: 'var(--bubble-main-background-color)';
// Use the configured color or default to accent color // Use the configured color or default to accent color
let on_color = this.config?.state_color_button?.color let on_color = this.config?.state_color_button?.on_color
? `var(--${this.config.state_color_button.color})` ? `var(--${this.config.state_color_button.on_color})`
: 'var(--bubble-accent-color)'; : 'var(--bubble-accent-color)';
// Main button background // Main button background
const mainButton = card?.querySelector('.bubble-button-background'); const mainButton = card?.querySelector('.bubble-button-background');
if (mainButton) { if (mainButton) {
mainButton.style.opacity = '1'; mainButton.style.opacity = '1';
mainButton.style.backgroundColor = state === 'on' ? on_color : bg_color; mainButton.style.backgroundColor = state === 'on' ? on_color : off_color;
mainButton.style.transition = 'background-color 1s'; mainButton.style.transition = 'background-color 1s';
} }
@@ -54,10 +56,15 @@ state_color_button:
// No CSS string needed // No CSS string needed
return ''; return '';
})()} })()}`
editor: editor:
- name: color - name: on_color
label: Color (CSS Variable) label: On Color (CSS Variable)
selector:
text: {}
required: false
- name: off_color
label: Off Color (CSS Variable)
selector: selector:
text: {} text: {}
required: false required: false