Material Rounded - Google Material You Theme

I’m a huge fan of Google’s Material You design principles and how it looks on Android, so I decided to recreate it in Home Assistant.

This theme aims to match the styling of the Google Home app as closely as possible, so it may change over time as the style of the Google Home app changes.

Tiles


Side by side with Google Home


Using big-slider-card:


Updated Material Design 3 Components


Material You Primary and Accent Colors


This theme is now on HACS! Search for it under frontend repositories.

This theme uses card-mod to do several things:

  • Turn the toolbar header into a footer.
  • Remove the selection bar.
  • Space the view icons evenly along the entire toolbar.
  • Add the view name below the icon.
  • Highlight the current view with a colored icon and background behind the icon.
  • Add a 12px padding to each side of the view.

If you have card-mod installed and do not want these changes to apply, use the “No Mod” version of this theme.

9 Likes

While creating this theme I did find that the CSS for some of the tile cards (notably fan and alarm control panel) are a bit weird and not custom theme friendly. While most tile features add transparency affects to disabled-color, some tiles share their “off” background color with the icon which makes hard to separately theme the two without using card-mod at the card level. It would be nice if all tile features used the transparent disabled-color method for their backgrounds so they could be better themed.

This is some great work! I am creating a dashboard using your theme as we speak.

A bit of a self promotion, but I have done some work getting the latest Material Design Symbols for M3/M You if you need some even closer resemblance to the Google Home app?

https://github.com/beecho01/material-symbols

4 Likes

Nice! The link to the community forum thread in your README just goes to the home page, could you fix that?

Ahhh! Good spot! I have updated that now :grin:

I have been working on some of the grouped category types for this.
I am going to set the labels to identify device types and count accordingly, but currently this is only holding text. The colours too, are holding values, as I think that the theme could be updated to manage this better via some clever use of variables. Same with the entities, these are just there to get the button to appear. As you can tell a bit of WIP!

I have so far:

type: custom:swipe-card
card_width: max-content
parameters:
  grabCursor: true
  centeredSlides: false
  slidesPerView: auto
  spaceBetween: 8
cards:
  - type: custom:button-card
    entity: light.james_bedroom_light
    icon: m3s:videocam-rounded
    name: Cameras
    label: 6 Cameras
    show_name: true
    show_label: true
    show_icon: true
    tap_action:
      action: none
      haptic: medium
    styles:
      grid:
        - grid-template-columns: 2fr 1fr 1fr
        - grid-template-rows: 2fr 0.1fr 1fr 1fr
        - grid-template-areas: |
            "i . ."
            ". . ."
            "n n n"
            "l l l"
      card:
        - height: 115px
        - width: 115px
        - border-radius: 30px
      name:
        - font-size: 1rem
        - font-weight: bold
        - justify-self: start
        - align-self: end
        - margin: 0px 0px 0px 20px
      label:
        - font-size: 0.85rem
        - justify-self: start
        - align-self: start
        - margin: 2px 0px 0px 20px
        - color: '#444746'
    state:
      - value: 'on'
        styles:
          card:
            - background: '#EDF0FF'
          icon:
            - color: '#0256CF'
  - type: custom:button-card
    entity: light.james_bedroom_light
    icon: m3s:light-group-rounded
    name: Lighting
    label: 8 lights
    show_name: true
    show_label: true
    show_icon: true
    tap_action:
      action: none
      haptic: medium
    styles:
      grid:
        - grid-template-columns: 2fr 1fr 1fr
        - grid-template-rows: 2fr 0.1fr 1fr 1fr
        - grid-template-areas: |
            "i . ."
            ". . ."
            "n n n"
            "l l l"
      card:
        - height: 115px
        - width: 115px
        - border-radius: 30px
      name:
        - font-size: 1rem
        - font-weight: bold
        - justify-self: start
        - align-self: end
        - margin: 0px 0px 0px 20px
      label:
        - font-size: 0.85rem
        - justify-self: start
        - align-self: start
        - margin: 2px 0px 0px 20px
        - color: '#444746'
    state:
      - value: 'on'
        styles:
          card:
            - background: '#FFEFC9'
          icon:
            - color: '#725C00'
  - type: custom:button-card
    entity: light.james_bedroom_light
    icon: m3s:wifi-sharp-filled
    name: Wi-Fi
    label: 2 Devices
    show_name: true
    show_label: true
    show_icon: true
    tap_action:
      action: none
      haptic: medium
    styles:
      grid:
        - grid-template-columns: 2fr 1fr 1fr
        - grid-template-rows: 2fr 0.1fr 1fr 1fr
        - grid-template-areas: |
            "i . ."
            ". . ."
            "n n n"
            "l l l"
      card:
        - height: 115px
        - width: 115px
        - border-radius: 30px
      name:
        - font-size: 1rem
        - font-weight: bold
        - justify-self: start
        - align-self: end
        - margin: 0px 0px 0px 20px
      label:
        - font-size: 0.85rem
        - justify-self: start
        - align-self: start
        - margin: 2px 0px 0px 20px
        - color: '#444746'
    state:
      - value: 'on'
        styles:
          card:
            - background: '#E1F6DE'
          icon:
            - color: '#136D2F'
  - type: custom:button-card
    entity: light.james_bedroom_light
    icon: m3s:thermostat-sharp-filled
    name: Climate
    label: 2 Devices
    show_name: true
    show_label: true
    show_icon: true
    tap_action:
      action: none
      haptic: medium
    styles:
      grid:
        - grid-template-columns: 2fr 1fr 1fr
        - grid-template-rows: 2fr 0.1fr 1fr 1fr
        - grid-template-areas: |
            "i . ."
            ". . ."
            "n n n"
            "l l l"
      card:
        - height: 115px
        - width: 115px
        - border-radius: 30px
      name:
        - font-size: 1rem
        - font-weight: bold
        - justify-self: start
        - align-self: end
        - margin: 0px 0px 0px 20px
      label:
        - font-size: 0.85rem
        - justify-self: start
        - align-self: start
        - margin: 2px 0px 0px 20px
        - color: '#444746'
    state:
      - value: 'on'
        styles:
          card:
            - background: '#FFEDE6'
          icon:
            - color: '#AA3A03'
5 Likes

Just as I was starting to look for inspiration for a complete re-write of my dashboard, I see this! This is exactly the sort of thing I’ve been wanting for some time, something to replace the aesthetic of Google Home.

I’m wondering if it’s at all possible, or planned, to use the Accent Colour sensor which is available on the Home Assistant companion app to influence the overall colours of the theme?

I’m a total noob when it comes to this sort of thing, so forgive my ignorance if this isn’t possible! Just thought it would be quite cool if the accent colour could be picked up from the android device that is connected to the dashboard at that time (per user, one for me, one for my husband?)

Thanks again!

2 Likes

That’s a good find! While I don’t think it is possible to use entity sensors by default, I wonder if I can using card-mod jinja templates. I do see the accent color template in the Android companion app settings and it’s returning hex color at sensor.pixel_fold_accent_color after enabling it. I’d also like to look into letting the user manually set the primary and accent colors like can be done in the default Home Assistant theme.

Yeah, it wouldn’t be able to be done by default upon install for obvious reasons, but I could definitely see you adding some instructions to the readme to set that sort of thing up manually.

I would expect it to change the tint of the background and buttons etc, without affecting the colour of sliders if the setting is enabled to inherit the colour of the lights for example. Basically, i’d like for it to work like Material You does on android! :smiley:

Getting the following error when trying to add the custom repo.


<Template beecho01/material-symbols> Repository structure for v0.2.2 is not compliant

It looks like you’re trying to install Material Symbols, so you’re in the wrong thread. You should post in this one.

Servus Guys,

i really like this Theme, but im not very good with theming myself.
Is there a way to use the big slider card as button cards as well? Or theming a button card to fit the material design?

Big slider card currently only works with light entities, but I’ve gotten it to behave with lights that don’t have brightness control (like wall switches changed to entity type light) using the following config:

type: custom:big-slider-card
entity: light.foyer
name: Foyer
color: sandybrown
show_percentage: false
height: 88
bold_text: true
max: 0

I was able to create a similar looking card using custom button card for non light entities:

type: custom:button-card
entity: light.foyer
icon: mdi:ceiling-light
name: Foyer
layout: icon_name
color_type: card
color: rgb(94, 69, 49)
state:
  - value: 'off'
    color: var(--ha-card-background)
styles:
  card:
    - height: 88px
  icon:
    - height: 24px
    - width: 24px
  name:
    - justify-self: start
    - font-size: 14px
    - font-weight: bold
  grid:
    - grid-template-areas: i n
    - grid-template-columns: 15% 85%

You may also want to look at this thread on Reddit. Someone posted their dashboard and has some great looking Google Home style cards in it, and they posted their button configs in the comments along with a link to another community forum thread.

1 Like

That’s very nice and just what I was looking for. Do you have any more to share? I would love to implement Material you into HA

@ZOXSOCKS Someone else made a feature request about using Material You colors for this theme and I’ve gotten around to implementing an alpha build (2.0.0-alpha.001 at time of writing). It works on the dashboard but not config pages due to card-mod limitations, but will allow you to set your own base color from which accent and primary colors are computed. You can have your base color sensor point to the Android accent color sensor. There’s more details and instructions in that thread and the README for the material-you branch of this theme on GitHub.

Here’s some samples of what it looks like if I use the orange from your profile pic as the base color!
image
image

1 Like

Loving the theme version 1.6 so far. Just had to change the background to RGB 19 19 20 to get proper contrast and a matching Android status bar.

Also posted a bugreport on Github, since the navigation bar on the bottom compresses once navigate to another lovelace page via a button has been used. I need to refresh the browser to make sure it looks correct then.

1 Like

I love using these cards, so clean!

But do you know if there’s a way to force border radius to 28px instead of 12?
Right now I have to use card mod on every single big-slider-card to get the right border-radius.

With this theme border radius should already be set to 28px. If it isn’t when this theme is enabled something may be wrong with your browser cache that is preventing the theme from fully applying.

Everything but the big-slider-card here is.
Need to do the big-slider-cards manually right now.

It does that in every browser (Chrome, Firefox, Safari) on every computer here.

Will send you a small donation soon, just figured you do all kinds of cool stuff on Github. Thanks for the great work.

Also saw that I had a manual border-radius added to my slider cards. Removed the lines on every card and now works as intended. :slight_smile:

Just still having trouble if I open a hidden page (subview) on my dashboard and the bar at the bottom most likely shrinks in half after coming back. Didn’t find any solution yet.

1 Like