From d91d5e892b51abf757ced259ab1b3749159df40f Mon Sep 17 00:00:00 2001
From: johannesjo <johannes.millan@gmail.com>
Date: Fri, 16 Jan 2026 17:24:47 +0100
Subject: [PATCH] fix(ios): set background color for safe area behind home
 indicator

- Add backgroundColor to Capacitor iOS config to fill safe area
- Add CSS :has() rules to set html background based on theme class
---
 capacitor.config.ts  |  3 +++
 src/styles/page.scss | 10 ++++++++++
 2 files changed, 13 insertions(+)

diff --git a/capacitor.config.ts b/capacitor.config.ts
index a9e90721b..57b6e3001 100644
--- a/capacitor.config.ts
+++ b/capacitor.config.ts
@@ -26,6 +26,9 @@ const config: CapacitorConfig = {
   ios: {
     // Content inset for safe areas (notch, home indicator)
     contentInset: 'automatic',
+    // Background color for safe areas (home indicator, notch)
+    // Use dark color to match dark theme (most common on mobile)
+    backgroundColor: '#131314',
     // Allow inline media playback
     allowsLinkPreview: true,
     // Scroll behavior
diff --git a/src/styles/page.scss b/src/styles/page.scss
index dd2d70aaa..5045a1681 100644
--- a/src/styles/page.scss
+++ b/src/styles/page.scss
@@ -21,6 +21,16 @@ html {
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
 
+  // Set html background for iOS safe area (home indicator)
+  // Uses :has() to match body theme class since --bg is defined on body
+  &:has(body.isLightTheme) {
+    background: #f8f8f7;
+  }
+
+  &:has(body.isDarkTheme) {
+    background: #131314;
+  }
+
   button,
   a {
     -webkit-app-region: no-drag !important;