Material You Theme - A Fully Featured Implementation of Material Design 3 for Home Assistant

[maksym-ivchenko]

The width of the card is grid_options

type: custom:big-slider-card
name: Keukenlicht aanrecht
color: sandybrown
entity: light.hue_lightstrip
show_percentage: true
height: 88
bold_text: true
grid_options:
  columns: 6

[rcbnl (Rob)]

thanks a lot!

[maksym-ivchenko]

Hi. Right now, regardless of the entity’s state, the text on the card is always black. Shouldn’t the text change color when the entity is enabled? I did it via card_mod (see screenshot), but maybe this should be provided by the theme

[Nerwyn]

This is unrelated to the theme, it’s how big slider card styles its text.

[giovannilamarmora]

Hi everyone!

I’m excited to share with you a custom dashboard component I’ve been building that brings the look & feel of the Google Home app directly into your Home Assistant frontend!

With this component, you’ll get:

• Swipeable Google-style cards for Lights, Cameras, Climate, and Wi-Fi devices
• Material You-inspired design, with full light/dark theme support
• A clean, modern layout that feels like using the actual Google Home app
• Auto-counting and state detection of your devices
• Easy installation via CDN or manual file

Full documentation and example usage here:

Documentation

Repository

[Mariusthvdb (Marius)]

would this be related… setting badges_wrap to a view badge (with box-shadows) causes horizontal line//border of the section below · Issue #25691 · home-assistant/frontend · GitHub

I’ve logged in Frontend, but it was closed because I use card-mod…

Even though the issue lies in Core frontend imho. there’s an immediate response to shut issues down with a single mention of custom

would be great if (for the time being this being recognized as core bug) we could set a card-mod on the badges to not have that sharp cut-off. Or on the section itself.

Ive found this to make it less visible

  card-mod-view-yaml: |

    :first-child $:
      hui-view-header:
        $:
          hui-view-badges $: |
            .badges {
              padding-bottom: 16px;
            }

but, it also creates a big gap (of course…) so it is not nice either

if I do this:

  card-mod-view-yaml: |

    :first-child $:
      hui-view-header:
        $:
          hui-view-badges $: |
            .badges {
              mask-image: unset !important;
              overflow: visible !important;
            }

as you say, it does not work,

setting the same in Inspector does make it as one would hope:

(sorry for this off-topic in Material you theme. You are the first however to find this exact problem I noticed, and find a fix. Hope you can help me sort it out in my card-mod theme)

wait, its the wrong path:

  card-mod-view-yaml: |

    :first-child $:
      hui-view-header:
        $: |
          .badges {
            mask-image: unset !important;
            overflow: visible !important;
            }

seems to be the correct, but has unwanted effect of not scrolling but overflowing …

[reste_narquois (Chris Warne)]

Welcome to the forum. It’s great that you are offering a custom component to the community.

However, I feel it’s a little disrespectful to the developer of this theme to post your announcement here.

Far better to start your own thread in the ‘Share your Projects’ thread, where I’m sure it will get a lot of attention. You’ll also be able to offer support for those who use it.

[giovannilamarmora]

Thank you so much for your feedback and you’re absolutely right.

I sincerely apologize for posting in the wrong place; it wasn’t my intention to be disrespectful to the original theme’s developer or the community.

I’ll move my announcement to the ‘Share your Projects’ section where it properly belongs, and I really appreciate you pointing that out.

Thanks again for the warm welcome and your guidance!

[Nerwyn]

That’s exactly it. It’s a shame that they’ve marked it as not planned since it is an issue with the design of scrolling badges not accounting for box shadows in custom themes. I’ll look into adding some style fixes within the companion module and sharing it with you if they do not fix it within the HA frontend.

[Nerwyn]

It would also be nice if you mentioned beecho01 and I in your gitbook and didn’t call it a theme since this is the theme, while your project is a custom card suite that implements the material design system variables provided by this theme and its companion module. You also used the wrong repository name here. You should also work on making this HACS compatible as HACS isn’t listed as an installation method in your installation guides.

[giovannilamarmora]

Thank you very much for your message and you’re absolutely right on all points.

This project is still in beta, and I’m actively working on refining the code, improving the documentation, and clarifying the naming and attribution. My intention was never to misrepresent the amazing work done by you and @beecho01, and I sincerely apologize for not properly crediting you in the current version.

I’ll make sure to:

• Correctly reference your theme and its companion module as the foundation.
• Rename the project where appropriate (not calling it a theme, but a custom card suite that integrates your Material Design system).
• Fix the repository name and GitBook references.
• Add proper installation instructions including HACS compatibility as a priority.

Thanks again for pointing these things out and for all the work you’ve already done.
I truly appreciate it.