Material Rounded - Google Material You Theme

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?

Screenshot 2024-05-21 at 11.14.56Screenshot 2024-05-21 at 11.15.04
Screenshot 2024-05-21 at 11.24.46

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 :grinning: Thanks.

image

3 Likes

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.

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?

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

Here’s an example:

See how the section title “Test” doesn’t align with the hamburger icon very well while on the screenshots on the repo showing text aligning pretty well: GitHub - Nerwyn/material-rounded-theme: A Material You and Google Home app influenced theme for Home Assistant

Not sure if your screenshots are using the new HA Section View Type, however.

I’m not using section views, I mostly use layout-card grid views. My section headers are made using button card. I mention this in the README.

It looks like sections view section headers have more padding on the top. There’s nothing I can do about that, but you can try to do something about it using card-mod.
image