nasgul
March 11, 2020, 9:53am
1
HA 0.106.1
Trying to prevent the background of the selected entity to turn light blue in the example below.
I cannot find which element controls that color:
- type: glance # LIGHT ZONES CARDS
style: |
ha-card {
color: white;
font-variant: small-caps;
border-right: 3px double grey;
border-bottom: 3px double grey;
border-left: 3px double grey;
}
.card-header {
font-size: 23px;
color: white;
text-align: center;
}
title: Light Zones
columns: 5
show_state: false
show_name: true
entities:
- entity: light.dining_room
style: |
:host {
primary-background-color: black;
}
I have tried many many styles elements. Any help is appreciated.
Erik
olijouve
(olivyeah)
March 11, 2020, 10:47am
2
Not really possible to help as is, it is too much dependent of your(unknown) actual theme.
nasgul
March 11, 2020, 10:53am
3
The theme used is the darkmix available in the community samples.
darkmix:
# Main colors
primary-color: '#03A9F4'
accent-color: 'red'
dark-primary-color: 'var(--primary-color)'
light-primary-color: 'var(--primary-color)'
# Text colors
primary-text-color: 'white'
text-primary-color: 'var(--primary-text-color)'
secondary-text-color: 'silver'
disabled-text-color: 'silver'
label-badge-border-color: 'lime'
# Background colors
primary-background-color: '#141A32'
secondary-background-color: '#141A32'
divider-color: 'var(--primary-color)'
# Table rows
table-row-background-color: 'var(--primary-background-color)'
table-row-alternative-background-color: 'var(--primary-background-color)'
# Nav Menu
paper-listbox-color: 'var(--primary-color)'
paper-listbox-background-color: 'var(--primary-background-color)'
paper-grey-50: 'var(--primary-text-color)'
sidebar-icon-color: 'var(--primary-color)'
# Paper card
paper-card-header-color: 'var(--primary-color)'
paper-card-background-color: "#1E2747"
paper-dialog-background-color: 'var(--primary-background-color)'
paper-item-icon-color: 'var(--primary-color)'
paper-item-icon-active-color: 'lime'
paper-item-icon_-_color: 'lime'
paper-item-selected_-_background-color: '#282C34'
paper-tabs-selection-bar-color: 'lime'
# Labels
label-badge-red: 'var(--primary-color)'
label-badge-text-color: 'var(--primary-text-color)'
label-badge-background-color: 'var(--paper-card-background-color)'
# Switches
paper-toggle-button-checked-button-color: 'var(--primary-color)'
paper-toggle-button-checked-bar-color: 'var(--primary-color)'
paper-toggle-button-checked-ink-color: 'var(--primary-color)'
paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'
# Sliders
paper-slider-knob-color: 'var(--primary-color)'
paper-slider-knob-start-color: 'var(--primary-color)'
paper-slider-pin-color: 'var(--primary-color)'
paper-slider-active-color: 'var(--primary-color)'
paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
paper-slider-secondary-color: 'var(--secondary-background-color)'
paper-slider-disabled-active-color: 'var(--disabled-text-color)'
paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'
# Google colors
google-red-500: 'red'
google-green-500: 'lime'
# Date picker
lumo-primary-text-color: 'var(--primary-color)'
lumo-body-text-color: 'var(--primary-color)'
lumo-primary-color: 'var(--primary-color)'
paper-grey-200: 'var(--paper-card-background-color)'
olijouve
(olivyeah)
March 11, 2020, 11:41am
4
Sorry, i tried with your theme but i don’t reproduce your issue, no background at all for me on glance entities.
nasgul
March 12, 2020, 6:42am
5
Thanks for testing. I have the same behavior on PC, Tablet and iPhone.
There must be a parameter that controls that color.
I have tried most of the variables seen in the inspector:
But I have tested them in the host section of the styles element:
- type: glance # LIGHT ZONES CARDS
style: |
ha-card {
color: white;
font-variant: small-caps;
border-right: 3px double grey;
border-bottom: 3px double grey;
border-left: 3px double grey;
}
.card-header {
font-size: 23px;
color: white;
text-align: center;
}
title: Light Zones
columns: 5
show_state: false
show_name: true
entities:
- entity: light.dining_room
# Test to identify styling variable
style: |
:host {
switch-checked-button-color red;
}
name: Dining
icon: mdi:silverware
But still no cigar. Maybe there is another section in the style portion to add such as Div? Admittedly I am new to styling.
Erik
olijouve
(olivyeah)
March 12, 2020, 7:38am
6
Try using correct syntax :
—switch-checked-button-color: red;
But i have no idea which one it could be.
Tip you can alter or disable those attribute values directly from the DOM inspector. It’s the quickest way to find the good one(s)
nasgul
March 12, 2020, 8:16am
7
Great, so I found it. In the section of the Inspector called “inherited from div” it is the parameter – primary-color !!! Good start. unfortunately changing that value in the :host { section does not actually do anything. I tried as below and with leading --.
# Test to identify styling variable
style: |
:host {
primary-color: red;
}
Erik