Rubberband effect and status bar/nav bar colors about material-rounded-theme HOT 14 CLOSED

Theming - Companion

Colors should be specified in hex format (e.g. #0099ff) and defining element colors through variable names is not supported.

primary-background-color for the navigation bar background color Android
app-header-background-color for the status bar background color Android
iOS

As of version 2020.3, the iOS app will accept colors specified in hex, rgb, hsl, rgba, hsla formats or using a valid [HTML color name](https://www.w3schools.com/colors/colors_names.asp); although formats with alpha values are recognized, using alpha values less than 100 % (or 1) will currently lead to a color mismatch. 2020.2 and earlier versions of the app require colors to be specified in hex.

primary-background-color for the background color of the web view iOS
app-header-background-color for the status bar background color iOS
primary-color for the pull-to-refresh control/spinner

from material-rounded-theme.

We're a bit limited on what we can and cannot do with Home Assistant themes, and things like the toolbar are the result of card-mod and CSS hacks to add pseudo elements and backgrounds to existing elements. I don't think I can fix the rubber banding effect (but will dig more into it) but that bit on navigation and status bar theming is a good find! Let me see if I can make use of it. The incorrect navigation and status bar colors had also been bugging me for a while but I assumed it wasn't fixable.

from material-rounded-theme.

Ok, i've done some testing :

primary-background-color : Sadly, it acts for background app AND Navigation bar... that's a companion app issue. But as we want a bottom app header bar, it breaks that continuity.
app-header-background-color : Again, saldy, it acts for app header AND Status bar.

To resume:
With a top app-header we get :
statuts bar: app-header-background-color
app header: app-header-background-color
app: primary-background-color
nav bar: primary-background-color

With a bottom app-header we get (broken continuity):
statuts bar: app-header-background-color
app: primary-background-color
app header: app-header-background-color
nav bar: primary-background-color

Companion app is built in therms of coloring for a top app-header 😢.

The only way is to ask for an enhancement to companion app... if it does not already exist. Except if an "bottom bar" addon exist to fix that.

Same for rubber effect. The rubber effect is also present on native home assistant theme.

from material-rounded-theme.

You beat me to it. Except that the dashboard background uses lovelace-background, which normally points to primary-background-color but we can instead make the app color and reassign primary-background-color to be the same as the toolbar color. This does also make all of the settings pages the same color as the toolbar but I think it's a good tradeoff.

app-header-background-color is hard to get around as you said. But I think I may be able to do something with card-mod.

from material-rounded-theme.

I'm also going to have to adjust how I assign these colors because I imagine fixing this in the material you toolbar version will break the colors in the no mod version of the theme.

from material-rounded-theme.

I see that you are using the alpha v2 material you color options! I've got to copy a lot of the updated code to v1 since this fix should go in that as well so it'll take me a bit to have a usable alpha/beta version.

from material-rounded-theme.

@Jejebond I've put out a new v2 alpha which should fix the navbar and toolbar colors. Give it a try! I'm going to port over a bunch of updates to v1 and create a beta patch version for that as well.

from material-rounded-theme.

TODO before release- Update README screenshots, and use more material symbols.

from material-rounded-theme.

One problem with these changes is that the navbar color is now the same as the status bar in the no mod versions of the theme. Considering that this theme was made to be used with card mod, I'm willing to let that slide in order to improve the card-mod bottom toolbar main version.

True, but its still better. I agree with you.

As for overscroll stretch - From what I can find setting overscroll-stretch to none in the header styles is supposed to fix it but it looks like Home Assistant's companion app reads the theme CSS before card-mod is applied, so I can't fix it. It's also an issue without my theme, so you may want to create a bug for the Android app instead.

Sure ;)

The theme looks stunning !

I'll focus on reporting Material you issue from now on.

TODO before release- Update README screenshots, and use more material symbols.

PS: about Material symbols, i've stoopped using those as sometimes they won't load as fast as mdi library ones. Witch result in blank icon. Should i open a new issue ? i thought it wasn't linked to your theme.

from material-rounded-theme.

Nice. YOU beat me to it xD.

I'm using alpha if you want to deploy some test versions. i'll give you a feedback.

I'm also going to have to adjust how I assign these colors because I imagine fixing this in the material you toolbar version will break the colors in the no mod version of the theme.

100% True

from material-rounded-theme.

One problem with these changes is that the navbar color is now the same as the status bar in the no mod versions of the theme. Considering that this theme was made to be used with card mod, I'm willing to let that slide in order to improve the card-mod bottom toolbar main version.

from material-rounded-theme.

As for overscroll stretch - From what I can find setting overscroll-stretch to none in the header styles is supposed to fix it but it looks like Home Assistant's companion app reads the theme CSS before card-mod is applied, so I can't fix it. It's also an issue without my theme, so you may want to create a bug for the Android app instead.

from material-rounded-theme.

I've fixed the no-mod theme colors so the v1 version is ready for release once I update the README.

Material symbols isn't linked to my theme, but as we're both working on bringing material you styling to Home Assistant I want to give them free advertising. The creator of it was also one of the first people to show support for this theme. Have you tried the latest v1 release? It's README also has instructions for adding it has a resource which should improve it's performance. It loads just as fast as MDI icons for me.

from material-rounded-theme.

Status and navbar colors fixed in 1.6.0, and added to 2.0.0 as of alpha.007

from material-rounded-theme.