In my AppComponent, I have code that manages the status bar color, setting it on platform.ready and changing it to black (and back) when opening (and closing) my fullscreen image viewer (using custom events for slideshowOpen and slideshowClose). This works fine up to API 32 in the emulator.
this.platform.ready().then(() => {
// ...
this.project.statusbarLightText == true
? StatusBar.setStyle({ style: Style.Dark })
: StatusBar.setStyle({ style: Style.Light });
if (this.platform.is('android')) {
StatusBar.setBackgroundColor({
color: this.project.androidStatusBarColor, // e.g. #004157
});
this.events.subscribe('slideshowOpen', () => {
StatusBar.setBackgroundColor({
color: '#000000',
});
});
this.events.subscribe('slideshowClose', () => {
StatusBar.setBackgroundColor({
color: this.project.androidStatusBarColor, // e.g. #004157
});
});
}
}
});
In API 33, this doesn’t quite work. Upon starting the app, the status bar is grey. Only when I fire one of those custom events for the image viewer (slideshowOpen and slideshowClose), does the status bar plugin change the color.
As a workaround, I’ve added the following to styles.xml, which sets the status bar to transparent and the app background to my desired color (e.g. #004157).
<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:background">#004157</item> <!-- step 1 -->
<item name="android:statusBarColor">@android:color/transparent</item> <!-- step 2 -->
</style>
I’m using "@capacitor/status-bar": "^5.0.6", which is currently the latest version as far as I can tell.
Anyway, has anyone found a fix for – or even noticed – this issue? I’d like to avoid using the styles.xml workaround, since it doesn’t fit well into my workflow.
Obligatory ionic info below:
Ionic:
Ionic CLI : 7.1.1 (/Users/redacted/.nvm/versions/node/v16.20.1/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 7.2.0
@angular-devkit/build-angular : 16.1.5
@angular-devkit/schematics : 16.1.5
@angular/cli : 16.1.5
@ionic/angular-toolkit : 10.0.0
Capacitor:
Capacitor CLI : 5.2.2
@capacitor/android : 5.2.2
@capacitor/core : 5.2.2
@capacitor/ios : 5.2.2
Utility:
cordova-res : 0.15.4
native-run : 1.7.2
System:
NodeJS : v16.20.1 (/Users/redacted/.nvm/versions/node/v16.20.1/bin/node)
npm : 9.8.1
OS : macOS Unknown