Google Dark Theme

A Home Assistant theme inspired on Google app dark mode.

Screenshots

1. Desktop

2. Mobile

Preparation

  1. Make sure that under the configuration.yaml file you have the following:
frontend:
  themes: !include_dir_merge_named themes
  1. Under the Home Assistant Config folder, create a new folder named themes
  2. Restart Home assistant to apply the changes.

HACS installation

  1. Go into the Community Store (HACS)
  2. Search for Google Dark Theme
  3. Open the theme
  4. Press Install
  5. Restart Home Assistant

Manual installation

  1. In the Home assistant themes folder, create a file named google_dark_theme.yaml
  2. In this GitHub repo, go into the themes folder, open the google_dark_theme.yaml file and copy the content
  3. Paste the content in the google_dark_theme.yaml file created under your Home Assistant themes folder

Enable theme

  1. Open your Home Assistant Profile
  2. Under, Themes, select the new Google Dark Theme

Custom Header settings

When using the Custom Header plugin, add the following to make sure that the header matches the theme.

custom_header:
  compact_mode: true
  background: var(--app-header-background-color)
  elements_color: var(--app-header-text-color)
  active_tab_color: var(--state-icon-active-color)
  tab_indicator_color: var(--state-icon-active-color)
11 Likes

Hi Juan, forgive me but I couldn’t find your themes by simply searching on HACS…could you please help me to find some issues in my way to find them?
Thanks.

just need to search ‘google dark theme’ in HACS. make sure you are on the themes tab up the top

This feels like a dumb question, but where is this code supposed to go? Thanks.

Im using this with 0.106.2 and the cards look white, everything else is ok just the card background is white. How can I change this??

Should that not be ./themes, or just themes?

1 Like

Make sure you have backend-selected in your profile.

?my media players are blank white with this theme.

Is it an idea to make these text colors the other way around? Because in this example the darkest are the ones disabled and the lightest are the ones enabled. And in most UI it’s the other way around.Untitled

1 Like

Is there a way to change the color of the drop down menus to a darker color? Mine show in white and makes it hard to read.

1 Like

Cool theme!
I had to remove the “…/” on my installation.
themes: !include_dir_merge_named ../themes

frontend:
themes: !include_dir_merge_named themes

If I recall correctly from work done recently these are:
material-background-color: for background of drop down list (white in your screenshot)
material-secondary-background-color: for selection (light gray in your screenshot)

Ok. Kind of understanding. Do I need to change that variable in the theme configuration?

Yes, it need to point either to specific color:
material-background-color: “#080808
or to other (existing) variable with theme specific color:
material-background-color: var(–primary-background-color)

1 Like

Thank you. That worked perfect.
If there is an update will that get over written?

I’m afraid yes… usually the whole theme file is updated… unless author spots this post and add these options to his update :slight_smile:

Submit a pr and he will likely merge it.

Yes. @JuanM, can you correct that typo and save noobs like me some pain?

frontend:
  themes: !include_dir_merge_named ./themes

Thanks. I was just going to put in a PR and see you already did.

1 Like

If the themes folder is inside the Config folder and not any other folder, then it would just be:

frontend: themes: !include_dir_merge_named themes

I corrected the documentation because most people will have it like this.