From bb0d3cded5519e428d779570b95af1443fbc890f Mon Sep 17 00:00:00 2001 From: ttrabatt Date: Thu, 5 Feb 2026 17:25:15 +0100 Subject: [PATCH] Added Bubble Card Tool --- bubble_card/config.yaml | 8 ++ bubble_card/modules/default.yaml | 7 ++ bubble_card/modules/icon_container_color.yaml | 33 +++++++ .../modules/izequbes_custom_colors.yaml | 88 +++++++++++++++++++ bubble_card/modules/progress_bar.yaml | 75 ++++++++++++++++ 5 files changed, 211 insertions(+) create mode 100644 bubble_card/config.yaml create mode 100644 bubble_card/modules/default.yaml create mode 100644 bubble_card/modules/icon_container_color.yaml create mode 100644 bubble_card/modules/izequbes_custom_colors.yaml create mode 100644 bubble_card/modules/progress_bar.yaml diff --git a/bubble_card/config.yaml b/bubble_card/config.yaml new file mode 100644 index 0000000..1b8a66f --- /dev/null +++ b/bubble_card/config.yaml @@ -0,0 +1,8 @@ +migration: + done: true + sources: + entity_count: 4 + yaml_count: 0 + written_count: 4 + migrated_at: '2026-02-04T22:54:45.633Z' + version: 1 diff --git a/bubble_card/modules/default.yaml b/bubble_card/modules/default.yaml new file mode 100644 index 0000000..8e99cd4 --- /dev/null +++ b/bubble_card/modules/default.yaml @@ -0,0 +1,7 @@ +default: + name: Default + version: '' + creator: '' + description: Empty and enabled by default. Add your custom styles and/or JS templates here to apply them to all cards by pressing the button above. + code: '' + is_global: true diff --git a/bubble_card/modules/icon_container_color.yaml b/bubble_card/modules/icon_container_color.yaml new file mode 100644 index 0000000..9cff90c --- /dev/null +++ b/bubble_card/modules/icon_container_color.yaml @@ -0,0 +1,33 @@ +icon_container_color: + name: 'Example: Customize the icon container color' + version: v1.2 + creator: Clooos + description: | + A list of predefined colors to customize the icon container color. + Configure this module via the editor or in YAML, for example: +

+ 
+    icon_container_color: 
+        color: light-blue
+
+ supported: + - calendar + - pop-up + - cover + - button + - media-player + - climate + - select + code: | + .bubble-icon-container, + .bubble-day-chip { + opacity: 1 !important; + --bubble-icon-background-color: var(--${this.config.icon_container_color?.color}-color) !important; + } + editor: + - name: color + label: Color + selector: + ui_color: + include_none: true + link: https://github.com/Clooos/Bubble-Card/discussions/1231 diff --git a/bubble_card/modules/izequbes_custom_colors.yaml b/bubble_card/modules/izequbes_custom_colors.yaml new file mode 100644 index 0000000..04f234f --- /dev/null +++ b/bubble_card/modules/izequbes_custom_colors.yaml @@ -0,0 +1,88 @@ +izequbes_custom_colors: + name: IzeQubes Custom Colors + version: v1.0 + creator: IzeQube + description: | + Allows the user to change the accent color of the card with the standard Home Assistant predefined colors. + This change only effects the card if the entity is "turned on". + + The user can also override the icon color and background background of the icon container. + + Last but not least the user can change the opacity of both the card background color as the icon. + unsupported: + - horizontal-buttons-stack + - separator + code: | + ${(() => { + // Icon Color + let bubbleIcon = card.querySelector(".bubble-icon"); + if(bubbleIcon && this.config.izequbes_custom_colors.main_icon) { + if(!!this.config.izequbes_custom_colors.main_icon.icon_opacity) { + bubbleIcon.style.opacity = this.config.izequbes_custom_colors.main_icon.icon_opacity; + } + if(!!this.config.izequbes_custom_colors.main_icon.icon_color) { + bubbleIcon.style.color = `var(--${this.config.izequbes_custom_colors.main_icon.icon_color}-color)`; + } + } + + // Icon Background + let bubbleIconContainer = card.querySelector(".bubble-icon-container"); + if(bubbleIconContainer && this.config.izequbes_custom_colors.main_icon) { + if(!!this.config.izequbes_custom_colors.main_icon.background_color) { + bubbleIconContainer.style.background = `var(--${this.config.izequbes_custom_colors.main_icon.background_color}-color)`; + } + } + + // Card Color + if(this.config.izequbes_custom_colors.card) { + if(!!this.config.izequbes_custom_colors.card.background_color) { + card.style.setProperty('--bubble-accent-color', `var(--${this.config.izequbes_custom_colors.card.background_color}-color)`); + } + if(!!this.config.izequbes_custom_colors.card.opacity) { + card.querySelector(".bubble-button-background").style.opacity = this.config.izequbes_custom_colors.card.opacity; + } + } + + })()} + editor: + - name: main_icon + type: expandable + title: Main Icon Color Settings + icon: mdi:list-box-outline + schema: + - type: string + name: background_color + label: Background Color + selector: + ui_color: {} + - name: icon_color + label: Icon Color + selector: + ui_color: {} + - name: icon_opacity + label: Icon Opacity + selector: + number: + min: 0 + max: 1 + step: 0.1 + mode: slider + - name: card + type: expandable + title: Card Color Settings + icon: mdi:list-box-outline + schema: + - name: background_color + label: Background Color + selector: + ui_color: + include_none: true + - name: opacity + label: Opacity + selector: + number: + min: 0 + max: 1 + step: 0.1 + mode: slider + link: https://github.com/Clooos/Bubble-Card/discussions/1246 diff --git a/bubble_card/modules/progress_bar.yaml b/bubble_card/modules/progress_bar.yaml new file mode 100644 index 0000000..41e5dc9 --- /dev/null +++ b/bubble_card/modules/progress_bar.yaml @@ -0,0 +1,75 @@ +progress_bar: + name: Progress Bar + version: 1.1.1 + creator: inukiwi + description: Show a progress bar on "State" buttons, much like how sliders appear. Also supports different colors for custom conditions. + supported: + - button + code: |- + .bubble-button-background { + ${card.state = this.config.progress_bar?.custom_entity ? hass.states[this.config.progress_bar?.custom_entity].state : state}; + ${card.percentage = (card.state - this.config.progress_bar?.min_value) / (this.config.progress_bar?.max_value - this.config.progress_bar?.min_value) * 100}; + ${card.color = this.config.progress_bar?.progress_color}; + ${card.color = this.config.progress_bar?.conditional_colors?.condition_1 && checkConditionsMet([].concat(this.config.progress_bar?.conditional_colors?.condition_1), hass) ? this.config.progress_bar?.conditional_colors?.condition_color_1 : card.color }; + ${card.color = this.config.progress_bar?.conditional_colors?.condition_2 && checkConditionsMet([].concat(this.config.progress_bar?.conditional_colors?.condition_2), hass) ? this.config.progress_bar?.conditional_colors?.condition_color_2 : card.color }; + opacity: 1 !important; + background: + linear-gradient( + to right, + var(--${card.color}-color) + ${card.percentage}%, + transparent + ${card.percentage}% + ); + } + editor: + - name: min_value + label: Minimum value + required: true + default: 0 + selector: + number: + mode: box + - name: max_value + label: Maximum value + required: true + default: 100 + selector: + number: + mode: box + - name: progress_color + label: Progress Color + required: true + default: '#00ff00' + selector: + ui_color: + include_state: true + - name: custom_entity + label: Custom state entity + selector: + entity: {} + - type: expandable + name: conditional_colors + title: Conditional colors + icon: mdi:tune + expanded: false + schema: + - name: condition_1 + label: Condition 1 (use color below if met) + selector: + condition: {} + - name: condition_color_1 + label: Condition 1 color (only used if condition 1 is defined) + selector: + ui_color: + include_state: true + - name: condition_2 + label: Condition 2 (use color below if met) + selector: + condition: {} + - name: condition_color_2 + label: Condition 2 color (only used if condition 2 is defined) + selector: + ui_color: + include_state: true + link: https://github.com/Clooos/Bubble-Card/discussions/1634