Unable to change Android StatusBar using setBackgroundColor()

Capacitor
1

With the following code in app.component.ts, I’m getting an error at startup:

Error: Color must be provided

From what I can tell from the source code for @capacitor/status-bar, this should only be happening when the color is null, but I cannot see how that would be the case here.

The status bar color is not changed from the default black in the Android Studio emulator (API 30 and 32).

import { StatusBar, Style } from '@capacitor/status-bar';
import { Platform } from '@ionic/angular';
import { EventsService } from '../../services/events/events.service';
import { ProjectConfigService } from '../../services/project-config/project-config.service';

export class AppComponent {
  constructor(
    private platform: Platform,
    private events: EventsService,
    public project: ProjectConfigService,
  ) {}

  this.platform.ready().then(() => {
      if (this.platform.is('hybrid')) {

        this.project.statusbarLightText == true
          ? StatusBar.setStyle({ style: Style.Dark })
          : StatusBar.setStyle({ style: Style.Light });

        if (this.platform.is('android')) {
          StatusBar.setBackgroundColor({
            color: '#00363A',
          });
          this.events.subscribe('slideshowOpen', () => {
            StatusBar.setBackgroundColor({
              color: '#000000',
            });
          });
          this.events.subscribe('slideshowClose', () => {
            StatusBar.setBackgroundColor({
              color: '#00363A',
            });
          });
        }
      }
    });
}

Here’s my environment…

Ionic:

   Ionic CLI                     : 6.19.1 (/Users/xxx/.nvm/versions/node/v14.19.2/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.1.2
   @angular-devkit/build-angular : 13.3.3
   @angular-devkit/schematics    : 13.0.4
   @angular/cli                  : 13.0.4
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

   Capacitor CLI      : 3.4.1
   @capacitor/android : 3.4.3
   @capacitor/core    : 3.4.1
   @capacitor/ios     : 3.4.3

Utility:

   cordova-res (update available: 0.15.4) : 0.15.3
   native-run (update available: 1.6.0)   : 1.5.0

System:

   NodeJS : v14.19.2 (/Users/xxx/.nvm/versions/node/v14.19.2/bin/node)
   npm    : 6.14.17
   OS     : macOS Monterey
2

In this case, I needed to ensure that my color variable was actually a string (I simplified the code above by providing static hex values).

Either of these methods fix the issue:

my_color_variable: string = '#00363A' // in my project config service

this.my_color_variable.toString() // or in StatusBar.setBackgroundColor