Anyone know why my cards are the wrong colour using this theme?

I have the theme from here:

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)

If you are using chrome, you can find this info out yourself.

8 Likes

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.

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?

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

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.

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).