Support Edge UI Plugin

This plugin exists because the project uses Capacitor 2, which is too old to upgrade, and cannot use the official @capacitor/status-bar plugin that supports Edge-to-Edge on Android 14+.

It provides Edge-to-Edge system UI support for Android 14+, allowing you to control the appearance of system bars (status bar and navigation bar).

• Support Edge UI Plugin
• Install
• Configuration
• Example
• API
  • setSystemBarsAppearance
  • Interfaces
    • SetSystemBarsAppearanceOptions
    • SetSystemBarsAppearanceResult

Install

npm install @wisdomgarden/support-edge-ui
npx cap sync

or

yarn add @wisdomgarden/support-edge-ui
npx cap sync

Configuration

Optionally configure the background color of the system bars in capacitor.config.json:

{
  "plugins": {
    "SupportEdgeUi": {
      "darkColor": "#000000",
      "lightColor": "#FFFFFF"
    }
  }
}

If not configured, defaults to #000000 for dark mode and #FFFFFF for light mode.

Example

import { Plugins } from '@capacitor/core';

const { SupportEdgeUi } = Plugins;

// Set light appearance (dark icons, suitable for light background)
await SupportEdgeUi.setSystemBarsAppearance({ mode: 'light' });

// Set dark appearance (light icons, suitable for dark background)
await SupportEdgeUi.setSystemBarsAppearance({ mode: 'dark' });

API

setSystemBarsAppearance

setSystemBarsAppearance(options: SetSystemBarsAppearanceOptions): Promise<SetSystemBarsAppearanceResult>

Set the appearance of the system bars icon color for Edge-to-Edge mode.

Only available on Android 14+. No-op on lower versions.

| Param | Type | Description | | --------- | :-------------------------------------------------------------------------: | ---------------------------------: | | options | SetSystemBarsAppearanceOptions | The options to set the appearance |

Returns: Promise<SetSystemBarsAppearanceResult>

Interfaces

SetSystemBarsAppearanceOptions

| Param | Type | Description | Required | | ---------- | :-------------------: | --------------------------------------------------------------------------------------------: | :------: | | mode | 'light' | 'dark' | light: dark icons, suitable for light background. dark: light icons, suitable for dark background | true |

SetSystemBarsAppearanceResult

| Prop | Type | Description | | ------------- | :-------: | -----------------------------------------------------------------------: | | success | boolean | Whether the appearance was applied successfully. Returns false on Android 14 and below. |