Google Light Theme -- JuanMTech

A Home Assistant theme inspired on Google app Light mode.

Preview



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 Light Theme
  3. Open the theme
  4. Press Install

Manual installation

  1. In the Home assistant themes folder, create a file named google_light_theme.yaml
  2. In this GitHub repo, go into the themes folder, open the google_light_theme.yaml file and copy the content
  3. Paste the content in the google_light_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 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)


Subscribe to YouTube channel

Buy me a coffee

Become a Patron

7 Likes

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

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

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

1 Like

You need to add the above :point_up_2:

@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') }}"


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

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

where did you get your icons?

flaticon

hi,

thanks for the theme :slight_smile:

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

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

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?

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

1 Like

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]

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.

:tada: Release 1.3

Added:

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

Changed:

  • ha-card-border-radius value

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.

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

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?

HI,

Can you tell me how to add gridlines see picture below