Как в мобильном приложении на Vue js управлять цветом системных иконок в статусбаре

Иногда в разработке приложения возникает необходимость менять цвет иконок StatusBar в приложении во время работы приложения. Например, если нужно менять тему оформления с темной на светлую. Ниже рассмотрим как это сделать в приложении на Vue + Capacitor + TypeScript.

Для начала нужно установить плагин для работы со статусбаром:

npm install @capacitor/status-bar

Далее нужно импортировать плагин в компонент Vue:

import { StatusBar, Style } from '@capacitor/status-bar'
import { Capacitor } from '@capacitor/core'

Capacitor тоже должен быть импортирован. К нему нужно будет обращаться.

В iOS приложении нам нужно управлять только статусбаром, который расположен вверху. Но для андроид устройств есть еще панель навигация внизу, цветом которой тоже нужно управлять.

Android Navigation Bar светлой темы

Android Navigation Bar темной темы

Поэтому, для того чтобы управлять навбаром на андройде, нужно подготовить специальный нативный код, который поможет им управлять. Для этого будем править файл, который расположен в папке:
android/app/src/main/java/com/appName/app/MainActivity.java

В нем нужно написать вот такой AndroidNavigationBar мост:

package com.youappname.app;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.graphics.Color;
import com.getcapacitor.BridgeActivity;
import android.webkit.WebView;

public class MainActivity extends BridgeActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        this.getBridge().getWebView().addJavascriptInterface(new Object() {
            @android.webkit.JavascriptInterface
            public void setNavBarColor(final String colorHex, final boolean darkIcons) {
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        Window window = getWindow();
                        window.setNavigationBarColor(Color.parseColor(colorHex));

                        View decorView = window.getDecorView();
                        int flags = decorView.getSystemUiVisibility();

                        if (darkIcons) {
                            flags |= View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR; // Делаем иконки темными (для светлой темы)
                        } else {
                            flags &= ~View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR; // Делаем иконки светлыми (для темной темы)
                        }
                        decorView.setSystemUiVisibility(flags);
                    }
                });
            }
        }, "AndroidNavigationBar");
    }
}

где com.youappname.app нужно заменить на ваш ID.

После того как мы обновили MainActivity, мы можем управлять цветом навбара из Vue компонента. Сначала зарегистрируем нужный интерфейс Window:

declare global {
  interface Window {
    AndroidNavigationBar?: {
      setNavBarColor: (colorHex: string, darkButtons: boolean) => void;
    };
  }
}

Затем добавим функцию смены цвета Navigation Bar:

const updateNavBar = (theme: 'light' | 'dark') => {
  if (window.AndroidNavigationBar) {
    if (theme === 'light') {
      window.AndroidNavigationBar.setNavBarColor('#FFFFFFFF', true);
    } else {
      window.AndroidNavigationBar.setNavBarColor('#FF000000', false);
    }
  }
}

Теперь можем написать полную функцию для смены цвета:

const changeTheme = async (theme: 'dark' | 'light') => {
  document.documentElement.setAttribute('data-theme', theme)
  if (Capacitor.isNativePlatform()) {
    await StatusBar.setStyle({ style: theme === 'dark' ? Style.Dark : Style.Light })
    if (Capacitor.getPlatform() === 'android') {
      updateNavBar(theme)
    }
  }
}

Если оформление выбрано автоматически, как в системе, то можно определить какой цвет темы сейчас установлен:

const systemPrefersDark = ref(false)

const updateSystemPreference = () => {
  systemPrefersDark.value = window.matchMedia('(prefers-color-scheme: dark)').matches
}

updateSystemPreference() вызывать при загрузке компонента, чтобы определить цвет темы на момент загрузки.