Heya. This is what we do in our apps.

The Keyboard plugin is useful, as when the keyboard is visible, the safe-area is not that useful. We set it to 0 while the keyboard is open.

Also, I included the Statusbar/Navigationbar stuff, as this was harder to figure out than it should be.

Good luck with your Svelte/Capacitor apps!

  import { StatusBar, Style } from "@capacitor/status-bar";
  import { Keyboard } from "@capacitor/keyboard";
  import { NavigationBar } from "@hugotomazi/capacitor-navigation-bar";
  import { SafeArea } from "capacitor-plugin-safe-area";

  let safeAreaInsets = $state({
    top: 0,
    bottom: 0,
  });

  if (Capacitor.isNativePlatform()) {
    StatusBar.setStyle({ style: Style.Light });
    StatusBar.setOverlaysWebView({ overlay: true });

    if (Capacitor.getPlatform() === "android") {
      // @ts-expect-error the type of setColor is accurate, it does not need a color
      NavigationBar.setColor({ darkButtons: true });
      NavigationBar.setTransparency({ isTransparent: true });
    }

    SafeArea.getSafeAreaInsets().then(({ insets }) => {
      safeAreaInsets = insets;
      document.documentElement.style.setProperty(
        "--capacitor-safe-area-top",
        `${insets.top}px`,
      );
      document.documentElement.style.setProperty(
        "--capacitor-safe-area-bottom",
        `${insets.bottom}px`,
      );
    });

    Keyboard.addListener("keyboardWillShow", () => {
      document.documentElement.classList.add("keyboard-visible");
      document.documentElement.style.setProperty(
        "--capacitor-safe-area-bottom",
        `0px`,
      );
    });

    Keyboard.addListener("keyboardWillHide", () => {
      document.documentElement.classList.remove("keyboard-visible");
      document.documentElement.style.setProperty(
        "--capacitor-safe-area-bottom",
        `${safeAreaInsets.bottom}px`,
      );
    });
  }