Google Dark Theme -- JuanMTech

Share your Projects! Themes
,
1

A Home Assistant theme inspired on Google app dark mode.

Preview

Google Dark Mode 1
Google Dark Mode 11787×1469 616 KB

Google Dark Mode 2
Google Dark Mode 21787×1469 401 KB

Google Dark Mode 3
Google Dark Mode 31787×1469 406 KB

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

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)


Subscribe to YouTube channel

Buy me a coffee

Become a Patron

14 Likes
2

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.

3

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

4

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

5

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??

6

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

1 Like
7

Make sure you have backend-selected in your profile.

8

?my media players are blank white with this theme.

9

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
10

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.

image
image872×307 32.5 KB

2 Likes
11

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

frontend:
themes: !include_dir_merge_named themes
12

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)

13

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

14

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
15

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

16

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:

17

Submit a pr and he will likely merge it.

18

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

frontend:
  themes: !include_dir_merge_named ./themes
19

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

1 Like
20

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.