Google Home Theme for Home Assistant

A theme and the configuration I have used in Home Assistant that closely resembles the Google Home Application design. This theme has a light and dark mode to keep inline with the functionality of the Google Home Applications.

This is not for personal use only, as it uses a lot of Google Design features which are their commercial property.

---

Please be aware that this repository and instructions held within are still very much Work In Progress

I am also aware that a fair amount of my configuration and code can be reduced or shortened by use of templates. This is a planned update and will come in due course

---

           

Table of contents

• Installation
• Usage and Preview
• Troubleshooting
• Community
• Thanks
• Copyright and license

---

Installation

This Theme uses a fair amount of pre-requist resources to function as desired. Please make sure to install the following using the methods designated by their individual installation guides:

• Button Card by RomRider
• Material Symbols for Home Assistant
• Lovelace swipe card
• card-mod 3
• Big Slider Card
• auto-entities
• Frigate Lovelace Card
• Search Card

Unfortunately Google Home Theme for Home Assistant has not yet been accepted into the Home Assistant Community Store (HACS) default list yet.

However, you can, add this repository via a few methods:

My Home Assistant Link (Recommended):

Add HACS Custom Repository:

To install follow the below steps:

• Open HACS (installation instructions are here).
• Open the menu in the upper-right and select "Custom repositories".
• Enter the repository:

https://github.com/beecho01/Google-Home-Theme-For-Home-Assistant

• Select the category "Lovelace".
• Select "ADD".
• Open your configuration.yaml via File editor or other means.
• Add the following (if it does not already exist), save and restart Home Assistant.

frontend:
  themes: !include_dir_merge_named themes

Manual:

• Create the folder Google_Home into your /homeassistant/themes/ folder.
• Upload the file google_home.yaml to the newly created folder /homeassistant/themes/Google_Home
• Open your configuration.yaml via File editor or other means.
• Add the following (if it does not already exist), save and restart Home Assistant.

frontend:
  themes: !include_dir_merge_named themes

• Save, restart Home Assistant.

---

Usage and Preview

I have done my best to break down each individual page/view I have created and the necessary configuration and and components I have used. Please be aware that some methods I have used to gain access to Home Assitant components may not work for yourself and I hope methods that work for you can be found within the Home Assistant Community Forum.

Favourites

This pertains to the Favourites View or the default view in the configuration

Code Snippet Lines	Link to Configuration
Line 2 - Line 858	Link

Application Reference	Home Assistant View

Devices

This pertains to the Devices View. This is a self-populating page for each Area defined within.

Code Snippet Lines	Link to Configuration
Line 859 - Line 3965	Link

Application Reference	Home Assistant View

Automations

This pertains to the Automations View. This is a self-populating page for each Automation that exists and a way to create new ones.

Code Snippet Lines	Link to Configuration
Line 3966 - Line 4402	Link

Application Reference	Home Assistant View

Activity

This pertains to the Activity View. This is a log of each activity for the domains: switch, light, climate annd camera.

Code Snippet Lines	Link to Configuration
Line 4403 - Line 4466	Link

Application Reference	Home Assistant View

Settings

This pertains to the Settings View.

Code Snippet Lines	Link to Configuration
Line 4467 - Line 5586	Link

Application Reference	Home Assistant View

Updates

This pertains to the Updates View. This shows sensors and notifications for updates from within HACs and HA itself.

Code Snippet Lines	Link to Configuration
Line 5587 - Line 6038	Link

Application Reference	Home Assistant View

Network

This pertains to the Network View.

Code Snippet Lines	Link to Configuration
Line 6039 - Line 6513	Link

Application Reference	Home Assistant View

Network Devices

This pertains to the Network Devices sub-view.

Code Snippet Lines	Link to Configuration
Line 6514 - Line 6742	Link

Application Reference	Home Assistant View

Network Points

This pertains to the Network Points sub-view.

Code Snippet Lines	Link to Configuration
Line 6743 - Line 6781	Link

Application Reference	Home Assistant View

Connected Devices

This pertains to the Connected Devices sub-view.

Code Snippet Lines	Link to Configuration
Line 6782 - Line 7133	Link

Application Reference	Home Assistant View

Share Password

This pertains to the Share Password sub-view.

Code Snippet Lines	Link to Configuration
Line 7134 - Line 7276	Link

Application Reference	Home Assistant View

Lighting

This pertains to the Lighting sub-view.

Code Snippet Lines	Link to Configuration
Line 7277 - Line 7634	Link

Application Reference	Home Assistant View

Cameras

This pertains to the Cameras sub-view.

Code Snippet Lines	Link to Configuration
Line 7635 - Line 7737	Link

Application Reference	Home Assistant View

Troubleshooting

Can't see the icons?

If you cannot see the new icons, or you get an empty box where you're expecting an icon, clear you brpwser cache and reload the Home Assistant interface.

Icons don't show on first load of the dash?

Did you add the resource in your configuration.yaml? See the installation section for details.

---

Community

There's a thread over at the home assistant forums that tracks this repo.

---

Thanks

• Big thanks to @Nerwyn for the inspiration for this repository and work he's undertaken so far in his own repository.

Stargazers

---

Copyright and license

This work is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License][cc-by-nc-sa]. I do this for fun, without charge, and to give back to the community. You may remix, tweak, and build upon this work non-commercially, as long as you credit the original author, provide a link to the license, and indicate if any changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use unless agreed. If you remix, transform or build upon the material, you must distribute your contributions under the same or compatible license as the original.