Material Rounded - Google Material You Theme

[beecho01 (James Beeching)]

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 (ZOX)]

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?

Sensors | Home Assistant Companion Docs

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]

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 (ZOX)]

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 (Craig)]

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]

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

[woodenapple (Dominik)]

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]

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]

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]

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

[dennisschmitz55m (Dennis Schmitz)]

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.

[dennisschmitz55m (Dennis Schmitz)]

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.

[Nerwyn]

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.

[dennisschmitz55m (Dennis Schmitz)]

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.

[dennisschmitz55m (Dennis Schmitz)]

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.

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.

[tomplums]

I’m using this theme on a small tablet which has a viewport of around 960px

How can I alter the theme to show me the reduced 3 dots menu (same as mobile) for this screen size?

Would also like to add some padding/margin to the sidebar toggle to move it off the extreme edge.

great theme, thank you

EDIT: realised this might actually be a limitation of HA itself and not the theme?

[neilimixamo]

Hi guys, thanks for sharing your work. I’m very interested in this post cause I also tried to create a dashboard inspired by Google’s layout, but without paying much attention to the Material Design theme. Now, your work will help me modernize this dashboard, which makes me very happy Thanks.

[Nerwyn]

Release 2.0.0 - Material You Colors and Components ·...

Version 2 has been released! V2 is a significant overhaul that brings Home Assistant styles even closer to Material You:

• Streamlines development via reusable styles and a build pipeline.
• Performance improvements by removing unneeded styles and optimizing slow card-mod styles.
• Upgrades many components to follow Material Design 3 specifications.
  • Separate top app bar and navigation toolbar.
  • Navigation drawer and rail updates.
  • MD3 toggle switches wherever possible and add card button.
• Allows users to set their own primary and accent color using a base color set using template sensors, either globally or per user.

[grantland]

Love the menu hamburger moving to the top, however, it doesn’t seem easily aligned when using the new Sections View Type. Would you have any recommendations on how to resolve this?

[Nerwyn]

You’re going to have to provide a screenshot, it looks the same as other view types to me.