From 905eb99f7c72e75151775a0c4aef8d8f9e5cfe7c Mon Sep 17 00:00:00 2001 From: basbruss <68892092+basbruss@users.noreply.github.com> Date: Fri, 10 Mar 2023 13:06:17 +0100 Subject: [PATCH 1/5] Card_light Rework color background --- .../card_templates/cards/card_light.yaml | 143 ++++++++---------- 1 file changed, 66 insertions(+), 77 deletions(-) diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_light.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_light.yaml index bbd0ce3b1..b78677440 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_light.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_light.yaml @@ -12,6 +12,7 @@ card_light: ulm_card_light_enable_horizontal_wide: false ulm_card_light_enable_color: false ulm_card_light_color_palette: "" + ulm_card_light_color: "yellow" ulm_card_light_force_background_color: false ulm_card_light_enable_slider: false ulm_card_light_enable_slider_minSet: 0 @@ -31,16 +32,14 @@ card_light: card: - background-color: > [[[ - var color = entity.attributes.rgb_color; - if (variables.ulm_card_light_enable_color) { - if (variables.ulm_card_light_force_background_color || hass.themes.darkMode) { - if (color) { - return 'rgba(' + color + ',0.1)'; - } else { - return 'rgba(var(--color-yellow),0.1)'; - } - } - } + var color_set = variables.ulm_card_light_enable_color ? entity.attributes.rgb_color : variables.ulm_card_light_color; + var color = 'rgba(var(--color-' + color_set + '),var(--opacity-bg))' + if(variables.ulm_card_light_enable_color){ + color = 'rgba(' + color_set + ',var(--opacity-bg))' + } + if (variables.ulm_card_light_force_background_color || hass.themes.darkMode) { + return color + } ]]] styles: grid: @@ -150,28 +149,28 @@ card_light: icon: - color: > [[[ - var color = entity.attributes.rgb_color; - if (entity.state != "on") { - return 'rgba(var(--color-theme),0.2)'; - } - else if (color && variables.ulm_card_light_enable_color) { - return 'rgba(' + color + ',1)' - } else { - return 'rgba(var(--color-yellow),1)' - } + var color_set = variables.ulm_card_light_enable_color ? entity.attributes.rgb_color : variables.ulm_card_light_color; + var color = 'rgba(var(--color-' + color_set + '),1)' + if(variables.ulm_card_light_enable_color){ + color = 'rgba(' + color_set + ',1)' + } + if (entity.state != "on") { + return 'rgba(var(--color-theme),0.2)'; + } + return color ]]] img_cell: - background-color: > [[[ - var color = entity.attributes.rgb_color; - if (entity.state != "on") { - return 'rgba(var(--color-theme),0.05)'; - } - else if (color && variables.ulm_card_light_enable_color) { - return 'rgba(' + color + ',0.2)'; - } else { - return 'rgba(var(--color-yellow),0.2)'; - } + var color_set = variables.ulm_card_light_enable_color ? entity.attributes.rgb_color : variables.ulm_card_light_color; + var color = 'rgba(var(--color-' + color_set + '),0.2)' + if(variables.ulm_card_light_enable_color){ + color = 'rgba(' + color_set + ',0.2)' + } + if (entity.state != "on") { + return 'rgba(var(--color-theme),0.05)'; + } + return color ]]] item2: card: @@ -204,32 +203,16 @@ card_light: name: - color: > [[[ - var color = entity.attributes.rgb_color; - if (variables.ulm_card_light_enable_color) { - if (variables.ulm_card_light_force_background_color || hass.themes.darkMode) { - if (color) { - return 'rgba(' + color + ',1)'; - } else { - return 'rgba(var(--color-yellow-text),1)'; - } - } - } - return 'rgba(var(--color-yellow-text),1)'; + if (variables.ulm_card_light_force_background_color) { + return 'rgb(250,250,250)'; + } ]]] label: - color: > [[[ - var color = entity.attributes.rgb_color; - if (variables.ulm_card_light_enable_color) { - if (variables.ulm_card_light_force_background_color || hass.themes.darkMode) { - if (color) { - return 'rgba(' + color + ',1)'; - } else { - return 'rgba(var(--color-yellow-text),1)'; - } - } - } - return 'rgba(var(--color-yellow-text),1)'; + if (variables.ulm_card_light_force_background_color) { + return 'rgb(250,250,250)'; + } ]]] item2: card: @@ -241,39 +224,45 @@ card_light: maxSet: "[[[ return variables.ulm_card_light_enable_slider_maxSet ]]]" mainSliderColor: > [[[ - var color = entity.attributes.rgb_color; - if (entity.state == "unavailable") { - return "rgba(var(--color-grey),1)"; - } - else if (color && variables.ulm_card_light_enable_color) { - return "rgba(" + color + ",1)"; - } else { - return "rgba(var(--color-yellow),1)"; - } + var color_set = variables.ulm_card_light_enable_color ? entity.attributes.rgb_color : variables.ulm_card_light_color; + var color = 'rgba(var(--color-' + color_set + '),1)' + if(variables.ulm_card_light_enable_color){ + color = 'rgba(' + color_set + ',1)' + } + if (entity.state == "unavailable") { + return "rgba(var(--color-grey),1)"; + } + if(variables.ulm_card_light_force_background_color && !hass.themes.darkMode){ + return 'rgba(250,250,250,1)' + } + return color ]]] secondarySliderColor: > [[[ - var color = entity.attributes.rgb_color; - if (entity.state == "unavailable") { - return "rgba(var(--color-grey),0.2)"; - } - else if (color && variables.ulm_card_light_enable_color) { - return "rgba(" + color + ",0.2)"; - } else { - return "rgba(var(--color-yellow),0.2)"; - } + var color_set = variables.ulm_card_light_enable_color ? entity.attributes.rgb_color : variables.ulm_card_light_color; + var color = 'rgba(var(--color-' + color_set + '),0.2)' + if(variables.ulm_card_light_enable_color){ + color = 'rgba(' + color_set + ',0.2)' + } + if (entity.state == "unavailable") { + return "rgba(var(--color-grey),0.2)"; + } + return color ]]] thumbColor: > [[[ - var color = entity.attributes.rgb_color; - if (entity.state == "unavailable") { - return "rgba(var(--color-grey),1)"; - } - else if (color && variables.ulm_card_light_enable_color) { - return "rgba(" + color + ",1)"; - } else { - return "rgba(var(--color-yellow),1)"; - } + var color_set = variables.ulm_card_light_enable_color ? entity.attributes.rgb_color : variables.ulm_card_light_color; + var color = 'rgba(var(--color-' + color_set + '),1)' + if(variables.ulm_card_light_enable_color){ + color = 'rgba(' + color_set + ',1)' + } + if (entity.state == "unavailable") { + return "rgba(var(--color-grey),1)"; + } + if(variables.ulm_card_light_force_background_color && !hass.themes.darkMode){ + return 'rgba(250,250,250,1)' + } + return color ]]] mainSliderColorOff: "rgba(var(--color-theme),0.05)" secondarySliderColorOff: "rgba(var(--color-theme),0.05)" From 4a76b280be6f4948391026948b46ce654afa285d Mon Sep 17 00:00:00 2001 From: basbruss <68892092+basbruss@users.noreply.github.com> Date: Fri, 10 Mar 2023 13:19:35 +0100 Subject: [PATCH 2/5] update documentation --- docs/usage/cards/card_light.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/usage/cards/card_light.md b/docs/usage/cards/card_light.md index 5b56c4bda..ad44ce507 100644 --- a/docs/usage/cards/card_light.md +++ b/docs/usage/cards/card_light.md @@ -44,7 +44,8 @@ To use `popup_light` you need to set the variable `ulm_card_light_enable_popup` | ulm_card_light_enable_collapse | `false` | :material-close: | Collapse slider when off | Need `ulm_card_light_enable_slider: true` | | ulm_card_light_enable_horizontal | `false` | :material-close: | Enable horizontal card | | | ulm_card_light_enable_horizontal_wide | `false` | :material-close: | Wider slider | Need `ulm_card_light_enable_horizontal: true` | -| ulm_card_light_enable_color | `false` | :material-close: | Enable icon and label light color | | +| ulm_card_light_color | `yellow` | :material-close: | Set a manual color from the theme for icon, slider and background | | +| ulm_card_light_enable_color | `false` | :material-close: | Enable icon and label light color from the light itself. | Overrides `ulm_card_light_color` | | ulm_card_light_force_background_color | `false` | :material-close: | Force background light color even in light theme | | | ulm_card_light_enable_popup | `false` | :material-close: | Enable `popup_light` | | | ulm_card_light_enable_popup_tap | `false` | :material-close: | Enable `popup_light` on simple icon tap | | From 175640e0ed6ff67994e973e1fa0471db7199f63e Mon Sep 17 00:00:00 2001 From: basbruss <68892092+basbruss@users.noreply.github.com> Date: Fri, 10 Mar 2023 14:44:37 +0100 Subject: [PATCH 3/5] make text better readable with light colors --- .../card_templates/cards/card_light.yaml | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_light.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_light.yaml index b78677440..60c9d8407 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_light.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_light.yaml @@ -197,23 +197,6 @@ card_light: } return label; ]]] - state: - - value: "on" - styles: - name: - - color: > - [[[ - if (variables.ulm_card_light_force_background_color) { - return 'rgb(250,250,250)'; - } - ]]] - label: - - color: > - [[[ - if (variables.ulm_card_light_force_background_color) { - return 'rgb(250,250,250)'; - } - ]]] item2: card: type: "custom:my-slider" From c2c145ca7e5ec4c7c0aed0273f39ace5dc02959c Mon Sep 17 00:00:00 2001 From: basbruss <68892092+basbruss@users.noreply.github.com> Date: Fri, 10 Mar 2023 15:29:29 +0100 Subject: [PATCH 4/5] update buttons --- .../card_templates/cards/card_light.yaml | 100 ++++++++++++++++++ 1 file changed, 100 insertions(+) diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_light.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_light.yaml index 60c9d8407..430b59394 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_light.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_light.yaml @@ -270,6 +270,40 @@ card_light: card: type: "custom:button-card" template: "widget_icon" + entity: "[[[ return entity.entity_id ]]]" + styles: + card: + - background-color: > + [[[ + if (!hass.themes.darkMode) { + var color_set = variables.ulm_card_light_enable_color ? entity.attributes.rgb_color : variables.ulm_card_light_color; + var color = 'rgba(var(--color-' + color_set + '),0.2)' + if (variables.ulm_card_light_enable_color) { + return 'rgba(250, 250, 250,0.8)'; + } + if (entity.state != "on") { + return 'rgba(var(--color-theme),0.05)'; + } + return color + } + return 'rgba(var(--color-theme),0.05)'; + ]]] + icon: + - color: > + [[[ + if (!hass.themes.darkMode) { + var color_set = variables.ulm_card_light_enable_color ? entity.attributes.rgb_color : variables.ulm_card_light_color; + var color = 'rgba(var(--color-' + color_set + '),1)'; + if (variables.ulm_card_light_enable_color) { + color = 'rgba(' + color_set + ',1)'; + } + if (entity.state != "on") { + return 'rgba(var(--color-theme),0.2)'; + } + return color; + } + return 'rgba(var(--color-theme),0.9)'; + ]]] tap_action: action: "call-service" service: "light.turn_on" @@ -281,6 +315,39 @@ card_light: card: type: "custom:button-card" template: "widget_icon" + styles: + card: + - background-color: > + [[[ + if (!hass.themes.darkMode) { + var color_set = variables.ulm_card_light_enable_color ? entity.attributes.rgb_color : variables.ulm_card_light_color; + var color = 'rgba(var(--color-' + color_set + '),0.2)' + if (variables.ulm_card_light_enable_color) { + return 'rgba(250, 250, 250,0.8)'; + } + if (entity.state != "on") { + return 'rgba(var(--color-theme),0.05)'; + } + return color + } + return 'rgba(var(--color-theme),0.05)'; + ]]] + icon: + - color: > + [[[ + if (!hass.themes.darkMode) { + var color_set = variables.ulm_card_light_enable_color ? entity.attributes.rgb_color : variables.ulm_card_light_color; + var color = 'rgba(var(--color-' + color_set + '),1)'; + if (variables.ulm_card_light_enable_color) { + color = 'rgba(' + color_set + ',1)'; + } + if (entity.state != "on") { + return 'rgba(var(--color-theme),0.2)'; + } + return color; + } + return 'rgba(var(--color-theme),0.9)'; + ]]] tap_action: action: "call-service" service: "light.turn_on" @@ -292,6 +359,39 @@ card_light: card: type: "custom:button-card" template: "widget_icon" + styles: + card: + - background-color: > + [[[ + if (!hass.themes.darkMode) { + var color_set = variables.ulm_card_light_enable_color ? entity.attributes.rgb_color : variables.ulm_card_light_color; + var color = 'rgba(var(--color-' + color_set + '),0.2)' + if (variables.ulm_card_light_enable_color) { + return 'rgba(250, 250, 250,0.8)'; + } + if (entity.state != "on") { + return 'rgba(var(--color-theme),0.05)'; + } + return color + } + return 'rgba(var(--color-theme),0.05)'; + ]]] + icon: + - color: > + [[[ + if (!hass.themes.darkMode) { + var color_set = variables.ulm_card_light_enable_color ? entity.attributes.rgb_color : variables.ulm_card_light_color; + var color = 'rgba(var(--color-' + color_set + '),1)'; + if (variables.ulm_card_light_enable_color) { + color = 'rgba(' + color_set + ',1)'; + } + if (entity.state != "on") { + return 'rgba(var(--color-theme),0.2)'; + } + return color; + } + return 'rgba(var(--color-theme),0.9)'; + ]]] tap_action: action: "call-service" service: "light.turn_on" From 779a38ef2e6d109b69f0889715e6080c89c99cd9 Mon Sep 17 00:00:00 2001 From: basbruss <68892092+basbruss@users.noreply.github.com> Date: Fri, 24 Mar 2023 15:12:33 +0100 Subject: [PATCH 5/5] Update card_light.yaml --- .../card_templates/cards/card_light.yaml | 81 +++++++------------ 1 file changed, 30 insertions(+), 51 deletions(-) diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_light.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_light.yaml index 430b59394..c15bb5f1f 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_light.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_light.yaml @@ -275,32 +275,25 @@ card_light: card: - background-color: > [[[ - if (!hass.themes.darkMode) { - var color_set = variables.ulm_card_light_enable_color ? entity.attributes.rgb_color : variables.ulm_card_light_color; - var color = 'rgba(var(--color-' + color_set + '),0.2)' - if (variables.ulm_card_light_enable_color) { + if (!hass.themes.darkMode && variables.ulm_card_light_force_background_color) { + if (variables.ulm_card_light_enable_color && entity.state != "off") { return 'rgba(250, 250, 250,0.8)'; } - if (entity.state != "on") { - return 'rgba(var(--color-theme),0.05)'; - } - return color } return 'rgba(var(--color-theme),0.05)'; ]]] icon: - color: > [[[ - if (!hass.themes.darkMode) { - var color_set = variables.ulm_card_light_enable_color ? entity.attributes.rgb_color : variables.ulm_card_light_color; - var color = 'rgba(var(--color-' + color_set + '),1)'; - if (variables.ulm_card_light_enable_color) { - color = 'rgba(' + color_set + ',1)'; - } - if (entity.state != "on") { - return 'rgba(var(--color-theme),0.2)'; + if (!hass.themes.darkMode && variables.ulm_card_light_force_background_color) { + if (entity.state != "off") { + var color_set = variables.ulm_card_light_enable_color ? entity.attributes.rgb_color : variables.ulm_card_light_color; + var color = 'rgba(var(--color-' + color_set + '),1)'; + if (variables.ulm_card_light_enable_color) { + color = 'rgba(' + color_set + ',1)'; + } + return color; } - return color; } return 'rgba(var(--color-theme),0.9)'; ]]] @@ -319,32 +312,25 @@ card_light: card: - background-color: > [[[ - if (!hass.themes.darkMode) { - var color_set = variables.ulm_card_light_enable_color ? entity.attributes.rgb_color : variables.ulm_card_light_color; - var color = 'rgba(var(--color-' + color_set + '),0.2)' - if (variables.ulm_card_light_enable_color) { + if (!hass.themes.darkMode && variables.ulm_card_light_force_background_color) { + if (variables.ulm_card_light_enable_color && entity.state != "off") { return 'rgba(250, 250, 250,0.8)'; } - if (entity.state != "on") { - return 'rgba(var(--color-theme),0.05)'; - } - return color } return 'rgba(var(--color-theme),0.05)'; ]]] icon: - color: > [[[ - if (!hass.themes.darkMode) { - var color_set = variables.ulm_card_light_enable_color ? entity.attributes.rgb_color : variables.ulm_card_light_color; - var color = 'rgba(var(--color-' + color_set + '),1)'; - if (variables.ulm_card_light_enable_color) { - color = 'rgba(' + color_set + ',1)'; + if (!hass.themes.darkMode && variables.ulm_card_light_force_background_color) { + if (entity.state != "off") { + var color_set = variables.ulm_card_light_enable_color ? entity.attributes.rgb_color : variables.ulm_card_light_color; + var color = 'rgba(var(--color-' + color_set + '),1)'; + if (variables.ulm_card_light_enable_color) { + color = 'rgba(' + color_set + ',1)'; + } + return color; } - if (entity.state != "on") { - return 'rgba(var(--color-theme),0.2)'; - } - return color; } return 'rgba(var(--color-theme),0.9)'; ]]] @@ -363,32 +349,25 @@ card_light: card: - background-color: > [[[ - if (!hass.themes.darkMode) { - var color_set = variables.ulm_card_light_enable_color ? entity.attributes.rgb_color : variables.ulm_card_light_color; - var color = 'rgba(var(--color-' + color_set + '),0.2)' - if (variables.ulm_card_light_enable_color) { + if (!hass.themes.darkMode && variables.ulm_card_light_force_background_color) { + if (variables.ulm_card_light_enable_color && entity.state != "off") { return 'rgba(250, 250, 250,0.8)'; } - if (entity.state != "on") { - return 'rgba(var(--color-theme),0.05)'; - } - return color } return 'rgba(var(--color-theme),0.05)'; ]]] icon: - color: > [[[ - if (!hass.themes.darkMode) { - var color_set = variables.ulm_card_light_enable_color ? entity.attributes.rgb_color : variables.ulm_card_light_color; - var color = 'rgba(var(--color-' + color_set + '),1)'; - if (variables.ulm_card_light_enable_color) { - color = 'rgba(' + color_set + ',1)'; - } - if (entity.state != "on") { - return 'rgba(var(--color-theme),0.2)'; + if (!hass.themes.darkMode && variables.ulm_card_light_force_background_color) { + if (entity.state != "off") { + var color_set = variables.ulm_card_light_enable_color ? entity.attributes.rgb_color : variables.ulm_card_light_color; + var color = 'rgba(var(--color-' + color_set + '),1)'; + if (variables.ulm_card_light_enable_color) { + color = 'rgba(' + color_set + ',1)'; + } + return color; } - return color; } return 'rgba(var(--color-theme),0.9)'; ]]]