so in my front end, the “Devices” dont show up, neither in the new automation feature:
and in the ‘Devices’ part of the configuration menu:
I can still click things but nothing is visible…
speedy edit:
it was my theme 
looks like it might need an update !
Add the following line to your theme:
card-background-color: "var(--paper-card-background-color)"
Hi tom_I
it doesn’t work
Can you paste your theme’s yaml? You probably don’t have a value for that var so your’s might be something like:
card-background-color: 'var(--primary-background-color)'
or
card-background-color: "#232326"
“#232326” is a dark grey.
The themes yaml is:
midnight:
primary-color: "#5294E2"
accent-color: "#E45E65"
dark-primary-color: "var(--accent-color)"
light-primary-color: "var(--accent-color)"
primary-text-color: "#FFFFFF"
text-primary-color: "var(--primary-text-color)"
secondary-text-color: "#5294E2"
disabled-text-color: "#7F848E"
label-badge-border-color: "green"
primary-background-color: "#383C45"
secondary-background-color: "#383C45"
divider-color: "rgba(0, 0, 0, .12)"
table-row-background-color: "#353840"
table-row-alternative-background-color: "#3E424B"
paper-listbox-color: "var(--primary-color)"
paper-listbox-background-color: "#2E333A"
paper-grey-50: "var(--primary-text-color)"
paper-grey-200: "#414A59"
paper-card-header-color: "var(--accent-color)"
paper-card-background-color: "#434954"
paper-dialog-background-color: "#434954"
paper-item-icon-color: "var(--primary-text-color)"
paper-item-icon-active-color: "#F9C536"
paper-item-icon_-_color: "green"
paper-item-selected_-_background-color: "#434954"
paper-tabs-selection-bar-color: "green"
label-badge-red: "var(--accent-color)"
label-badge-text-color: "var(--primary-text-color)"
label-badge-background-color: "#2E333A"
paper-toggle-button-checked-button-color: "var(--accent-color)"
paper-toggle-button-checked-bar-color: "var(--accent-color)"
paper-toggle-button-checked-ink-color: "var(--accent-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)"
paper-slider-knob-color: "var(--accent-color)"
paper-slider-knob-start-color: "var(--accent-color)"
paper-slider-pin-color: "var(--accent-color)"
paper-slider-active-color: "var(--accent-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-red-500: "#E45E65"
google-green-500: "#39E949"
after adding card-background-color: ‘var(–primary-background-color)’ it works
however in autmations its still showing blank for this part:
is this a different theme value ?
I just tried the same theme and it looks like it is working for me. I think it is these lines:
paper-listbox-color: "var(--primary-color)"
paper-listbox-background-color: "#2E333A"
but they look right to me. Maybe that is a browser cache issue? If you don’t want to clear you cache, in Chrome you can open the developer tools (F12), click on the Network tab, then click “Disable Cache” and it will always load the latest versions.
Not sure if it is related but I am on 0.99.2…same version?
Just in case here is one that I am using…it is a modified version of the “solarized, midnight, and transparent” ones:
Mine:
light_green: "#08a8a5"
dark_green: "#017775"
dark_grey: "#232326"
light_grey: "#344249"
red: "#d10404"
yellow: "#fffa0c"
white: "#f7f7f7"
pink: "#ff0090"
black: "#000000"
dark_blue: "#5265e2"
light_blue: "#0888a8"
# Main colors
primary-color: "var(--light_blue)"
dark-primary-color: "var(--red)"
light-primary-color: "var(--red)"
ha-card-border-radius: '20px'
ha-card-background: 'rgba(150, 150, 150, 0.1)'
# Text colors
primary-text-color: "var(--white)"
text-primary-color: "var(--white)"
secondary-text-color: "var(--white)"
# Background colors
primary-background-color: "var(--dark_grey)"
secondary-background-color: "var(--dark_grey)"
# Table rows
table-row-background-color: "var(--light_grey)"
table-row-alternative-background-color: "var(--dark_grey)"
# Nav Menu
paper-listbox-background-color: "var(--light_grey)"
paper-grey-50: "var(--light_blue)"
paper-grey-200: "var(--dark_blue)"
# Paper card
paper-card-header-color: "var(--white)"
paper-card-background-color: "var(--light_grey)"
paper-item-icon-color: "#FFFFFF"
paper-item-icon-active-color: "var(--yellow)"
paper-item-icon_-_color: "var(--pink)"
paper-item-selected_-_background-color: "var(--light_blue)"
# Labels
label-badge-background-color: "var(--light_grey)"
label-badge-text-color: "var(--white)"
label-badge-red: "var(--red)"
label-badge-blue: "var(--pink)"
label-badge-green: "var(--pink)"
label-badge-yellow: "var(--pink)"
label-badge-grey: "var(--pink)"
# Switches
paper-toggle-button-checked-ink-color: "var(--black)"
paper-toggle-button-checked-button-color: "var(--red)"
paper-toggle-button-checked-bar-color: "#E45E65"
# Sliders
paper-slider-knob-color: "var(--yellow)"
paper-slider-knob-start-color: "var(--red)"
paper-slider-pin-color: "var(--pink)"
paper-slider-active-color: "var(--yellow)"
paper-slider-container-color: "var(--red)"
paper-slider-secondary-color: "var(--pink)"
paper-progress-secondary-color: "var(--pink)"
sidebar-text_-_background: "var(--pink)"
card-background-color: 'var(--primary-background-color)'