Google Dark Theme -- JuanMTech

:tada: Release 1.3


  • material-background-color
  • material-secondary-background-color


  • ha-card-border-radius value

Hi @JuanM , I love your theme. My compliments for your great work.
I noticed that after latest Hacs update, when I navigate inside it’s resources the background is white and it’s very hard to read the text.
I tried to look for a solution without any result. Here a screenshot for the Alexa Media player integration inside HACS:

Do you think there is a way to make the background black again?
Many thanks.

Hi there! Yes, I actually just fixed it on v1.4

:tada: Release 1.4


  • paper-dialog-background-color (Correct theme in HACS)

Check your orange theme… missing " on paper background colour causing validation error.

With the newest HassOS update 110 (1), I have found that I lost my icon colors in both the base theme and your theme. I wonder what happened and what I need to update. I have mucked around in the gdt yaml and randomly changed colors to try and get this back. As a novice, I assume it has to do with an MDC(?) color assignment?

Anyhow, any guidance regarding where I can make some changes? I am showing you both the card icon color and the action icons in the upper right corner. Both are the background color I assume. On the mobile format, they are more easily seen…

I love this theme. I just have a question, Can you define this topic on the login screen?

Let’s see if anyone can help me please, the topic is fine but it’s a little strange that the login is white.

Thank you!

Hmm, 0.111.4 keeps saying “mapping values are not allowed here” for meta tags like <… style=“width: 0%;” …> in google_dark_theme.yaml…

what’s that about?

Hi, I am new to HA, moving from iRule and just installing on my NAS.
When attempting to add this theme (and a couple others), I get the following error in the logfile:
“Component error: themes - Integration ‘themes’ not found.”

I have confirmed that I have a folder called “themes” inside the config folder.

In the “configuration.yaml” I have attempted the below entries with all coming back with the same error.

themes: !include_dir_merge_named themes
themes: !include_dir_merge_named ./themes
themes: !include_dir_merge_named ../themes
(I tried the last two just in case)

Any feedback on wtf I am missing is greatly appreciated.


  themes: !include_dir_merge_named themes
1 Like

Thank you! I get the “frontend” component now.


did this theme break in 0.113.1? All my panels are white. The background is still dark and most colors still seem good, but the container around entities and others are white now

never mind, downloaded updated version, called frontend.reload_themes, all good now

Updated version???

I had the same issue and for some reason the change to remove:

  paper-card-background-color: var(--card-background-color)

is what caused the problem. Restoring that and the white is gone again. That was the only change?

It was the mini-media-card so I edited the js file to change the variable name to fix it.
Torn about this as the right way is to remove the variable but it causes no harm having that mapping in there. The solution is a @kalkih to fix the variable in the card…

I just updated this and the media player card is white now. Running HA 0.113.1 and Google dark theme 1.7.

Yeah because JuanTech removed the old deprecated variable before the custom card makers reacted to the change (for no good reason).
2 ways to fix for now… Either revert the theme to the previous version (which restores the one line of code he deleted) or do a search and replace on the js card for the mini-player. and whichever option you choose, please head over to the repo for the card and add a me too to the issue I created.

i just installed that dark theme, first time playing with themes
but i need to remove the 2 spaces in all lines, indent all to left, otherwise it doesnt load the theme

why is that ?

what exactly did you change in the media player card? i still have white when the receiver is OFF


Do a search for the old variable and replace with the new one.

strange, i have it like this; but still white :

background: var(–ha-card-background, var(–card-background-color, white)