Nativescript android colored bars / fullscreen effect

android-system-bars.ts

import { Application, Color, isAndroid } from '@nativescript/core';

const LIGHT_STATUS = '#F5F5F5';
const LIGHT_NAV = '#F5F5F5';
const DARK_STATUS = '#000000';
const DARK_NAV = '#000000';

export type BarOverrides = {
	status?: string;
	navigation?: string;
};
export const applyAndroidSystemBars = (darkMode: boolean, overrides?: BarOverrides) => {
	if (!isAndroid) return;
	try {
		const foregroundActivity = Application.android.foregroundActivity || Application.android.startActivity;
		const window = foregroundActivity?.getWindow?.();
		if (!window) return;

		const statusHex = overrides?.status ?? (darkMode ? DARK_STATUS : LIGHT_STATUS);
		const navHex = overrides?.navigation ?? (darkMode ? DARK_NAV : LIGHT_NAV);
		const statusColor = new Color(statusHex).android;
		const navColor = new Color(navHex).android;
		window.setStatusBarColor(statusColor);
		window.setNavigationBarColor(navColor);

		const decorView = window.getDecorView?.();
		if (!decorView) return;

		const windowCompat = (globalThis as any).androidx?.core?.view?.WindowCompat;
		const controller = windowCompat?.getInsetsController?.(window, decorView);
		if (controller?.setAppearanceLightStatusBars && controller?.setAppearanceLightNavigationBars) {
			controller.setAppearanceLightStatusBars(!darkMode);
			controller.setAppearanceLightNavigationBars(!darkMode);
			return;
		}

		const sdk = android.os.Build.VERSION.SDK_INT;
		let flags = decorView.getSystemUiVisibility?.() ?? 0;
		if (sdk >= 23) {
			flags = darkMode
				? flags & ~android.view.View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
				: flags | android.view.View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR;
		}
		if (sdk >= 26) {
			flags = darkMode
				? flags & ~android.view.View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR
				: flags | android.view.View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR;
		}

		decorView.setSystemUiVisibility?.(flags);
	} catch (err) {
		console.error('applyAndroidSystemBars failed', err);
	}
};