Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Card_light Rework color background #1209

Merged
merged 10 commits into from
Mar 24, 2023
Merged

Card_light Rework color background #1209

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
905eb99
Card_light Rework color background
basbruss Mar 10, 2023
fe5c5ee
Merge branch 'release' into light_card
basbruss Mar 10, 2023
4a76b28
update documentation
basbruss Mar 10, 2023
175640e
make text better readable with light colors
basbruss Mar 10, 2023
fe076d9
Merge branch 'light_card' of https://github.com/basbruss/UI into ligh…
basbruss Mar 10, 2023
fcd1216
Merge branch 'release' into light_card
basbruss Mar 10, 2023
c2c145c
update buttons
basbruss Mar 10, 2023
81fff56
Merge branch 'light_card' of https://github.com/basbruss/UI into ligh…
basbruss Mar 10, 2023
779a38e
Update card_light.yaml
basbruss Mar 24, 2023
de11975
Merge branch 'release' into light_card
basbruss Mar 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
227 changes: 139 additions & 88 deletions ...onents/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_light.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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:
Expand Down Expand Up @@ -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:
Expand All @@ -198,39 +197,6 @@ card_light:
}
return label;
]]]
state:
- value: "on"
styles:
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)';
]]]
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)';
]]]
item2:
card:
type: "custom:my-slider"
Expand All @@ -241,39 +207,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)"
Expand All @@ -298,6 +270,33 @@ card_light:
card:
type: "custom:button-card"
template: "widget_icon"
entity: "[[[ return entity.entity_id ]]]"
styles:
card:
- background-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)';
}
}
return 'rgba(var(--color-theme),0.05)';
]]]
icon:
- color: >
[[[
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 'rgba(var(--color-theme),0.9)';
]]]
tap_action:
action: "call-service"
service: "light.turn_on"
Expand All @@ -309,6 +308,32 @@ card_light:
card:
type: "custom:button-card"
template: "widget_icon"
styles:
card:
- background-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)';
}
}
return 'rgba(var(--color-theme),0.05)';
]]]
icon:
- color: >
[[[
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 'rgba(var(--color-theme),0.9)';
]]]
tap_action:
action: "call-service"
service: "light.turn_on"
Expand All @@ -320,6 +345,32 @@ card_light:
card:
type: "custom:button-card"
template: "widget_icon"
styles:
card:
- background-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)';
}
}
return 'rgba(var(--color-theme),0.05)';
]]]
icon:
- color: >
[[[
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 'rgba(var(--color-theme),0.9)';
]]]
tap_action:
action: "call-service"
service: "light.turn_on"
Expand Down
3 changes: 2 additions & 1 deletion docs/usage/cards/card_light.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 | |
Expand Down