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.
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).
BlueBlack:
# 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%)'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