capacitor-codeplay-system-bars

Capacitor 8 Android plugin for controlling the hardware/system navigation-bar background and icon appearance independently of the device theme.

It supports three-button and gesture navigation, Android edge-to-edge layouts, portrait, landscape, activity resume, and configuration changes.

Version 1.0.1 hides the bottom navigation-bar protection overlay while the keyboard is visible and restores it when the keyboard closes. This prevents the overlay from covering app controls above the keyboard.

Install locally

npm install W:/Android/Cordova/MyPlugin/capacitor-codeplay-system-bars
npx cap sync android

No MainActivity.java, Android manifest, or Gradle modification is required. Capacitor discovers and registers the plugin from the package metadata.

Usage

import { CodeplaySystemBars } from 'capacitor-codeplay-system-bars';

await CodeplaySystemBars.setNavigationBarTheme({
  theme: 'dark',
  color: '#1e1e22'
});

For a light application theme:

await CodeplaySystemBars.setNavigationBarTheme({
  theme: 'light',
  color: '#f4f7f8'
});

theme describes the effective application theme, not whether the user selected a System-default option. Resolve System default to light or dark before calling the plugin.

Call the method after other system-bar APIs on every page/theme activation. Capacitor's built-in SystemBars.setStyle() resets the native decor background, so this plugin must be the final system-bar call.

API

setNavigationBarTheme(options)

| Option | Type | Description | | --- | --- | --- | | theme | 'light' \| 'dark' | Controls navigation-icon contrast. | | color | string | Android-compatible color string. |

The method resolves without changing anything on non-Android platforms.