iOS app - iPhone X/XS space area around home bar

There is alot unused space around the homebar at iPhone X and XS.
I think it won’t be that easy to use that space because of other ios devices (compatibility)

If you use a black theme the white area is really penetrant. Is there a way to change that color in the theme?

You can use this component to customize the header Compact Custom Header.

The footer is something that needs to be changed in the app.

Can you share your theme? For me the header on the iPhone (where the clock is positioned) always has another color than the header of the HA menu. For your theme that is the same color, so I want to try to see if that works on my phone as well.

1 Like

I’m also interested in this.

As for the space at the bottom, I agree with you, but every app has a lot of space down there. I think it’s by design by Apple.

This the code I use (I got it from here Link, and modified some lines to get black cards (oled).

  # MyVariables
  base-hue: '220' #Controls the base (and accent) color hue (0-360) | 0=Red 60=Yellow 120=Green 180=Cyan 240=Blue 300=Magenta 360=Red
  base-sat: '5%' #Controls the saturation of the theme (0%-100%) | 0%=Grey 100%=Full Saturation
  # MyVar
  huesat: 'var(--base-hue), var(--base-sat),'
  # Primary Color
  primary-color: '#2581ab' #hsl(var(--huesat) 50%)' #header colors and some text colors
  dark-primary-color: 'hsl(var(--huesat) 60%)'
  light-primary-color: 'hsl(var(--huesat) 30%)'
  accent-color: 'hsl(var(--huesat) 30%)'
  # Backgrounds
  primary-background-color: 'hsl(var(--huesat) 16%)'
  secondary-background-color: 'hsl(var(--huesat) 16%)' # background behind cards
  paper-listbox-background-color: "#000000" #'hsl(var(--huesat) 16%)'
  paper-card-background-color: "#000000" # 'hsl(var(--huesat) 12%)'
  paper-dialog-background-color: "#000000"  #'var(--paper-card-background-color)'
  table-row-background-color: "#000000" #'hsl(var(--huesat) 12%)'
  table-row-alternative-background-color: "#000000" #'hsl(var(--huesat) 10%)'
  # Divider
  divider-color: 'hsla(0, 0%, 0%, 0)'
  dark-divider-opacity: '0'
  light-divider-opacity: '0'
  dark-secondary-opacity: '1'
  # Text colors
  primary-text-color: 'hsl(var(--huesat) 90%)'
  text-primary-color: 'hsl(var(--huesat) 90%)'
  secondary-text-color: 'hsl(var(--huesat) 80%)'
  disabled-text-color: 'hsl(var(--huesat) 70%)'
  sidebar-text_-_color: 'hsl(var(--huesat) 90%)'
  sidebar-text-color: 'hsl(var(--huesat) 90%)'
  paper-card-header-color: 'hsl(var(--huesat) 90%)'
  paper-button-ink-color: 'hsl(var(--huesat) 50%)'
  # Text Adjustments
  paper-font-headline_-_letter-spacing: '-0.5px'
  paper-font-headline_-_font-weight: '400'
  paper-font-body1_-_font-weight: '300'
  # Nav Menu
  paper-listbox-color: 'hsl(var(--huesat) 50%)'
  paper-grey-50: 'hsl(var(--huesat) 50%)'
  paper-grey-200: 'hsl(var(--huesat) 10%)' #active menu item
  sidebar-icon-color: 'hsl(var(--huesat) 50%)' #iron-icon-fill-color
  # Paper card
  paper-item-icon-color: 'hsl(var(--huesat) 40%)'
  paper-item-icon-active-color: 'var(--paper-item-icon-color)'
  paper-item-icon_-_color: 'var(--paper-item-icon-color)'
  paper-item-selected_-_background-color: 'hsla(0, 0%, 0%, 0.2)'
  paper-item-selected_-_color: 'hsl(var(--huesat) 20%)' #?
  paper-tabs-selection-bar-color: 'hsla(0, 0%, 0%, 0.2)'
  paper-tab-ink: 'hsl(var(--huesat) 70%)'
  paper-input-container-color: 'hsl(var(--huesat) 60%)'
  # Labels
  label-badge-red: 'var(--paper-card-background-color)'
  label-badge-border-color: 'var(--label-badge-red)'
  label-badge-background-color: 'var(--paper-card-background-color)'
  label-badge-text-color: 'var(--primary-text-color)'
  # Shadows
  shadow-elevation-2dp_-_box-shadow: '0px 0px 0px 0px hsl(var(--huesat) 10%)'
  shadow-elevation-16dp_-_box-shadow: '0px 0px 0px 0px hsl(var(--huesat) 25%)'
  # Switches
  paper-toggle-button-checked-button-color: 'hsl(var(--base-hue), 90%, 50%)'
  paper-toggle-button-checked-bar-color: 'hsl(var(--huesat) 25%)'
  paper-toggle-button-unchecked-button-color: 'hsl(var(--huesat) 25%)'
  paper-toggle-button-unchecked-bar-color: 'hsl(var(--huesat) 5%)'
  # Sliders
  paper-slider-knob-color:  'hsl(var(--base-hue), 90%, 50%)'
  paper-slider-knob-start-color: 'hsl(var(--base-hue), 80%, 25%)'
  paper-slider-pin-color:  'hsl(var(--base-hue), 90%, 50%)'
  paper-slider-active-color:  'hsl(var(--base-hue), 90%, 50%)'
  paper-slider-container-color: 'hsl(var(--huesat) 28%)'
  paper-slider-secondary-color: 'hsl(var(--huesat) 90%)'
  paper-slider-disabled-active-color: 'hsl(var(--base-hue), 80%, 25%)'
  paper-slider-disabled-secondary-color: 'hsl(var(--base-hue), 80%, 25%)'
  paper-dialog-color: 'hsl(var(--base-hue), 20%, 80%)'
1 Like

You are right, every app has that. But the unused space is significatly bigger in the home assistant app. I think because its devoleloped to fit all ios devices, there are no (or just a few?) modifications for the x/xs