Google Light Theme -- JuanMTech

JuanM · January 17, 2020, 4:57pm

A Home Assistant theme inspired on Google app Light mode.

Preview

Preparation

Make sure that under the configuration.yaml file you have the following:

frontend:
  themes: !include_dir_merge_named themes

Under the Home Assistant Config folder, create a new folder named themes
Restart Home assistant to apply the changes.

HACS installation

Go into the Community Store (HACS)
Search for Google Light Theme
Open the theme
Press Install

Manual installation

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

Enable theme

Open your Home Assistant Profile
Under, Themes, select the new Google Light 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)

manavees · February 9, 2020, 9:09am

Great Job on the theme!
My only issue so far is the orange color of some elements.
For example:

https://prnt.sc/qznt4l
https://prnt.sc/qzntd7
https://prnt.sc/qzntj5
Is there a way to change it?

odiv · February 25, 2020, 9:37am

Hello!
What I am doing wrong, because The header on iphone still get The primary-color ?
In custom- header I used your settings!

JuanM · February 25, 2020, 3:37pm

JuanM:

Custom Header settings

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

Copy to clipboard
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)

You need to add the above

odiv · February 25, 2020, 6:29pm

@JuanM
Yes, I used that code in custom- header.
This is my custom header

hide_header: false
footer_mode: true
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)
# split_mode: true
menu_hide: true
voice_hide: true
chevrons: false
reverse_tab_direction: false
reverse_button_direction: false
options_hide: true
hide_help: true
hide_unused: true
hide_refresh: true
hide_config: true
hide_raw: true
shadow: false
show_tabs: true
#all_tabs_css: "width: calc(20vw - 3.6px) !important; padding: 0px !important; background: 'f8f8f8'"
hidden_tab_redirect: false

tab_container_css: 'padding-bottom: 25px;'
indicator_top: true
button_text: 
  options: ':'
# exceptions:
#   - conditions:
#       tab: Home
#     config:
#       header_text: "{{ states('input_select.frontend_greeting') }}"

tneves · March 4, 2020, 4:14pm

Hey Juan! Congrats on the work that you’ve done! I use both the Light and the Dark theme changing in Sunset/Sunrise.

Only on downside: is there anyway to change this so it can be the same color? I’ve already added those settings to my custom header. Thanks!!

IMG_0282|690x205

iophobia · March 5, 2020, 2:21pm

As for what worked for me on Android: Just call frontend.set_theme from Developer Tools and restart the app on mobile.

david1 · March 5, 2020, 6:17pm

where did you get your icons?

odiv · March 5, 2020, 7:27pm

flaticon

boscorelly · March 19, 2020, 8:15pm

hi,

thanks for the theme

how did you get the cute graphs ?
i have the original ugly ones…

iophobia · March 21, 2020, 3:14pm

Those are courtesy of @kalkih’s mini-graph-card

bachoo786 · March 26, 2020, 3:32pm

hey @JuanM

Thanks for the lovely theme.

I have installed it via HACS and I am using the HA android app. However I cannot see my top android notifications or the time. See image below.

Any ideas on how to resolve this?

JuanM · March 26, 2020, 4:06pm

Yes I have that too. I thing is a bug with the app.

jono · March 27, 2020, 8:08am

Really nice theme, thanks.

I’ve tried using a script to switch themes between this one and the dark version, but can’t get it to work. Here’s a script I’m trying, that works with themes I’ve created in the past

script:
  google_light_theme:
    alias: Google Light Theme
    sequence:
      - service: frontend.set_theme
        data:
          name: google_light_theme

Am I doing something wrong here?

[EDIT]…never mind, I figured it out[/EDIT]

THE-ST1G21 · March 30, 2020, 9:14pm

Great looking theme, thanks for that. Having trouble adding custom_header, where exactly do I add this? including resources and url? its not being accepted in configuration file or lovelace via raw configuration editor. And I cant edit the lovelace UI configuration panel because i’m using the default.

JuanM · May 12, 2020, 2:15pm

Release 1.3

Added:

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

Changed:

ha-card-border-radius value

bachoo786 · May 15, 2020, 9:38am

Hi @JuanM

Did the taskbar on android where the time and other icons such as wifi, gps etc get sorted with the HA android app? I still cannot see the time as it clashes with your theme and I remember you mentioned its a bug in the HA android app?

Thanks.

bmaehr · December 23, 2021, 10:26pm

Changed the color of the active lights and switches to yellow with paper-item-icon-active-color: rgb(255, 183, 80)

StingBot · January 10, 2022, 6:04am

Really liking this theme, matches nicely with new Pixel 6.

One thing it seems to be missing compared with default theme is gridlines when viewing graphs.

Is there a line that needs to be added to the yaml file to bring them back?

mamekedi · June 14, 2022, 4:58am

HI,

Can you tell me how to add gridlines see picture below