How to Change the Status Bar Background Color in an Old Apache Cordova iOS Project
Building native apps using web technologies with Apache Cordova makes development easier for web developers like me. However, simple tasks—such as changing the status bar background color—often require multiple plugins.
Recently, while working on an old Cordova project, I encountered an issue when trying to change the status bar background color. Like most developers, I used the cordova-plugin-statusbar
, but since my project was outdated, the plugin didn’t work as expected.
After some troubleshooting, I found a workaround to manually set the status bar color in the iOS project.
Step-by-Step Guide to Changing the Status Bar Color
Follow these steps to manually set the status bar background color in your Cordova iOS project:
1. Open the AppDelegate.m File
Navigate to the following location in your Cordova project:
Cordova project root / platforms / ios / your_project_name / Classes / AppDelegate.m
2. Replace the Code in AppDelegate.m
Replace the existing code with the following implementation:
#import "AppDelegate.h"
#import "MainViewController.h"
#import <UIKit/UIKit.h>
@implementation AppDelegate
- (BOOL)application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary*)launchOptions {
// Initialize the main view controller
self.viewController = [[MainViewController alloc] init];
// Initialize the window and set the root view controller
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
self.window.rootViewController = self.viewController;
[self.window makeKeyAndVisible];
// Set the status bar background color to #50944b
CGRect statusBarFrame = [UIApplication sharedApplication].statusBarFrame;
CGFloat statusBarHeight = statusBarFrame.size.height + 10; // Increase height by 10px
UIView *statusBarView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.window.frame.size.width, statusBarHeight)];
statusBarView.backgroundColor = [UIColor colorWithRed:80.0/255.0 green:148.0/255.0 blue:75.0/255.0 alpha:1.0]; // #50944b in RGB
[self.window addSubview:statusBarView];
// Set the status bar style to light content (white text)
[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];
// Adjust the WebView's top margin to prevent overlap
self.viewController.view.frame = CGRectMake(0, statusBarHeight, self.window.frame.size.width, self.window.frame.size.height - statusBarHeight);
return YES; // Successfully launched
}
@end

3. Save the File and Run the App
After saving the changes, run your app in the iOS simulator to test the new status bar color.
4. Customize the Status Bar Color
To change the background color, modify the following line with your desired color values:
statusBarView.backgroundColor = [UIColor colorWithRed:R/255.0 green:G/255.0 blue:B/255.0 alpha:1.0];
You can convert hex color codes to RGB values using online tools.
Conclusion
If you’re working on an old Cordova project and facing issues with cordova-plugin-statusbar
, this workaround provides a manual way to modify the status bar background color.
I hope this guide helps! If you have any questions, feel free to contact me at developersnepal@gmail.com. 🚀