Material Rounded - A Google Material You Inspired Theme

Nerwyn · October 7, 2023, 3:55am

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:

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 margin 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.

Nerwyn · October 7, 2023, 4:01am

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.

beecho01 · November 2, 2023, 10:16pm

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

Nerwyn · November 3, 2023, 4:47pm

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

beecho01 · November 5, 2023, 4:43pm

Ahhh! Good spot! I have updated that now

beecho01 · November 22, 2023, 10:29pm

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'

ZOXSOCKS · November 28, 2023, 12:17am

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!

Nerwyn · November 28, 2023, 1:28am

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.

ZOXSOCKS · November 28, 2023, 4:28am

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!

thecraigmcrae · January 7, 2024, 1:57pm

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


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

Nerwyn · January 7, 2024, 5:46pm

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

woodenapple · February 15, 2024, 10:08pm

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?

Nerwyn · February 16, 2024, 4:27am

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.

filikun · February 23, 2024, 2:03pm

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

Nerwyn · April 30, 2024, 6:19am

@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!