I have the theme from here:
Today, we're going to look at how to add themes to Home Assistant, how to set up a default theme and create an automation to switch between a light and a dark theme depending on the time of day. Learn how to set up themes in Home Assistant, to switch...
but I was expecting black cards, but my cards are white:
here is my theme, and it is that theme that is selected:
Dark - Green:
### Main Interface Colors ###
primary-color: "#03B14B"
light-primary-color: "#47FC92"
primary-background-color: "#1F1F28"
secondary-background-color: var(--primary-background-color)
divider-color: "#2F2F3D"
### Text ###
primary-text-color: "#FFFFFF"
secondary-text-color: "#47FC92"
text-primary-color: "#FFFFFF"
disabled-text-color: "#464653"
### Sidebar Menu ###
sidebar-icon-color: "#B6B6C1"
sidebar-text-color: "#F1F1F1"
sidebar-selected-background-color: var(--primary-background-color)
sidebar-selected-icon-color: "#47FC92"
sidebar-selected-text-color: var(--sidebar-selected-icon-color)
### States and Badges ###
state-icon-color: "#04E762"
state-icon-active-color: "#FBD150"
state-icon-unavailable-color: var(--disabled-text-color)
### Sliders ###
paper-slider-knob-color: "#04E762"
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: var(--paper-slider-knob-color)
paper-slider-secondary-color: var(--light-primary-color)
### Labels ###
label-badge-background-color: "#464653"
label-badge-text-color: "#FFFFFF"
label-badge-red: "#343443"
### Cards ###
paper-card-background-color: "#23232E"
paper-listbox-background-color: var(--primary-background-color)
### Toggles ###
paper-toggle-button-checked-button-color: "#04E762"
paper-toggle-button-checked-bar-color: "#47FC92"
paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
paper-toggle-button-unchecked-bar-color: "#343443"
### Table row ###
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--secondary-background-color)
Wow! thats amazing thank you for the detail and information. Found out it was:
-paper-card-background-color: #FFFFFF
will have a play changing it!
Just gone into my theme and paper card background colour in my theme is not set to FFFFF so why does Chrome think it is?
Is this a setting of the card somewhere separate to in the theme settings?
in the settings etc it is light grey as required, but for actual cards in the UI it is white despite me not having -paper-card-background-color: #FFFFFF set as part of my theme.
petro
August 15, 2019, 4:32pm
6
that means it’s pulling it from the default theme, which is home-assistant no theme. Override it in your theme and it should fix your issues.
Sorry, I do not understand what you mean there. Do you mean over-ride my defaul theme? Where / how is that done and does that mean I cannot go back to it?
In my “Dark - green” theme I think I have the right info, and on a config page the boxes are a lighter grey which is desired effect, but the colour of a card is wrong despite everything else loading right?
petro
August 15, 2019, 4:41pm
8
Yah you do have it right. Are you using card mod or any other custom cards?
just added the synthwave theme and same problem. Works on the config screen, doesnt change colour of cards…
darksky is a custom card, shopping list etc are standard cards.
this is my lovelace/yaml for the above screenshot with white problems (dont laugh at the code lol, I am new here)
title: HOME
resources:
#weather card
- url: /local/simple-weather-card.bundle.js?v=0.3.0
type: module
#colour wheel custom card
- url: /local/light-entity-card.js
type: js
#look here for list of standard HA cards: https://www.home-assistant.io/lovelace/picture/
#cards of interest to try:
# picture card
# picture element card
# picture entity card - picture changes based on toggle state ie two photos of bedroom, one in day one light at night
# picture glance similar to picture entity card
views:
#FULL HOME TAB
- title: Full Home
icon: mdi:home-outline
cards:
#Generic large box weather forecast card
- type: weather-forecast
entity: weather.dark_sky
#Custom card with JS file saved in /www'
# - type: custom:simple-weather-card
# entity: weather.dark_sky
# name: in current location
#Shopping list card
- type: shopping-list
title: Shopping List
#Sonos card
- type: glance
title: Sonos
show_name: false
show_state: false
#columns: 5
entities:
- media_player.living_room
- media_player.kitchen
- media_player.bedroom
#Glance card showing Bedroom lights with toggle on / off
- type: glance
title: Bedroom Lights
entities:
- entity: light.danielles_bedside_light
name: Danielle's
tap_action:
action: toggle
- entity: light.bedroom_light
name: Main Light
tap_action:
action: toggle
- entity: light.matts_bedside_light
name: Matt's
tap_action:
action: toggle
#- light.kitchen
#- light.tradfri_driver
petro
August 15, 2019, 4:46pm
10
it all looks fine to me, should be working. Have you refreshed the page and reloaded the cache? CTRL+F5?
yep done that. This is what confuses me because on my home pc, safari on iphone, work pc on chrome they all show white cards, but the correct colour “cards” when I go into the home screen for example and thats for the dark green them and the synthwave inspired screens.
Really feels like something in HA is remembering to do cards in white despite my themes but do not know what.
just a note, even unused entities have the correct background colour, just cards.
So annoying that nothing is just straightforward in HA.
Just an update on this. custom card disabled, cache cleared and system restarted. I still have white cards.
This is really bugging me now, I do not see why such things are so difficult to manage in HA.
Here is my config now with custom cards disabled:
# Configure a default setup of Home Assistant (frontend, api, etc)
default_config:
#I added base_url, ssl_cert and ssl_key for Duckdns
zone: !include zones.yaml
frontend:
javascript_version: latest
themes: !include themes.yaml
lovelace:
mode: yaml
http:
base_url: XXXX
ssl_certificate: /ssl/fullchain.pem
ssl_key: /ssl/privkey.pem
#entities
ios:
notify:
shopping_list:
#Darksky weather entity and api key
weather:
- platform: darksky
api_key: !secret Darksky_key
mode: daily
device_tracker:
- platform: unifi
host: !secret My_IP
port: 8443
username: !secret Unifi_user
password: !secret Unifi_password
site_id: "default"
verify_ssl: false
detection_time: 60
interval_seconds: 60
consider_home: 180
dont_track_wired_clients: 'true'
ssid_filter:
- 'Home-network'
new_device_defaults:
track_new_devices: True
hide_if_away: False
media_player:
- platform: plex
# Sensors
sensor:
# Weather prediction
- platform: yr
- platform: darksky
api_key: !secret Darksky_key
forecast:
- 0
- 1
- 2
- 3
- 4
- 5
monitored_conditions:
- icon
- summary
- temperature
- temperature_high
- temperature_low
- apparent_temperature
- apparent_temperature_high
- apparent_temperature_low
- wind_speed
- precip_probability
- precip_intensity
- daily_summary
scan_interval:
minutes: 5
- platform: synologydsm
host: !secret Synology_host
username: !secret Synology_username
password: !secret Synology_password
monitored_conditions:
- cpu_total_load
- memory_real_usage
- network_up
- volume_status
- volume_percentage_used
- disk_temp
- disk_name
- disk_status
# Text to speech
tts:
- platform: google_translate
group: !include groups.yaml
automation: !include automations.yaml
script: !include scripts.yaml
Here is my theme:
Dark - Green:
### Main Interface Colors ###
primary-color: "#03B14B"
light-primary-color: "#47FC92"
primary-background-color: "#1F1F28"
secondary-background-color: var(--primary-background-color)
divider-color: "#2F2F3D"
### Text ###
primary-text-color: "#FFFFFF"
secondary-text-color: "#47FC92"
text-primary-color: "#FFFFFF"
disabled-text-color: "#464653"
### Sidebar Menu ###
sidebar-icon-color: "#B6B6C1"
sidebar-text-color: "#F1F1F1"
sidebar-selected-background-color: var(--primary-background-color)
sidebar-selected-icon-color: "#47FC92"
sidebar-selected-text-color: var(--sidebar-selected-icon-color)
### States and Badges ###
state-icon-color: "#04E762"
state-icon-active-color: "#FBD150"
state-icon-unavailable-color: var(--disabled-text-color)
### Sliders ###
paper-slider-knob-color: "#04E762"
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: var(--paper-slider-knob-color)
paper-slider-secondary-color: var(--light-primary-color)
### Labels ###
label-badge-background-color: "#464653"
label-badge-text-color: "#FFFFFF"
label-badge-red: "#343443"
### Cards ###
card-background-color: "#2F2F3D" #I added this in based on other code examples
paper-card-background-color: "#2F2F3D"
paper-listbox-background-color: "#2F2F3D" #var(--primary-background-color)
### Toggles ###
paper-toggle-button-checked-button-color: "#04E762"
paper-toggle-button-checked-bar-color: "#47FC92"
paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
paper-toggle-button-unchecked-bar-color: "#343443"
### Table row ###
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--secondary-background-color)
And here is what I am getting:
And here is what I want, ie my cards to be a light grey background.
petro
August 16, 2019, 4:33pm
14
HA isn’t that difficult in this regards. Something has to be wrong with your install because this is working for everyone but you. What version are you running? Are there errors in your dev window in chrome?
did you ever get to the bottom of what causes this? My setup has started to do this and I cant get to the bottom of whats causing it.
I cleared the cache, the history etc etc logged out, restarted etc etc and it seemed to fix it but not sure what exactly did it. It does work now though
I’m having exactly this issue all of a sudden. Had this very theme selected and working perfectly for 9 months or so and now it’s just turned white in various areas making it unreadable and unusable. cleared cache and reset and rebooted.
Not fixing it. Anyone suggest any solution?
Easy fix for JuanMTech themes. Add this line to the code: card-background-color: “#1A1A1A ” (or any other color you want).
