How to Change Android System Colors in Capacitor Ionic 4/5

Hi I just searched for over one day and couldnt find out how to change the android system navigation bar on the bottom of the app to a custom color? Is that even possible.

On Ionic 3 there was this plugin for it:

4 Likes

Hello, of course this is possible, if there is plugin for cordova, then it could be done for capacitor aswell
Here is kinda solution:

This is the answers by which i succeded in changing colors.
Find BridgeActivity.java in android studio, and write down command inside init class


I use angular + ionic + capacitor, don’t think that this solution will be different for other frameworks.
This command could be appended in other parts of ‘android java files like that’, but i never had deals with java, and this solution fine for now to me.
Also it could be done from styles.xml, i searched for some in android project, but adding appropriate item didn’t give any changes.

Also im tired watching on white status bar on DARK application, and very dissatisfied that all developers of capacitor seems like doing well with this.
I think, someday i will get started with navigation bar color plugin for capacitor :smile:

1 Like

Nice one! I have tested it and it worked.
I created a new color in capacitor-android → res → values → colors.xml
<color name="darktheme">#121212</color>

and in capacitor-android → java → com.getcapacitor → util → BridgeActivity.java I added this lines:

   getWindow().setNavigationBarColor(getResources().getColor(R.color.darktheme));
   getWindow().setStatusBarColor(getResources().getColor(R.color.darktheme));

With this both lines I have now Status Bar and Navigation Bar in the same color. Nice :slight_smile:

1 Like