Changing status bar colours

Ionic Framework Ionic Vue
1

I am trying Ionic + Vue3 and just want to know how to change these colours in the screenshot for Android (specifically Pixel 5)? I’m sure it’s a simple change but it’s all new to me!

Thanks!

image
image1088×2354 109 KB

2

You can try adding in src/app/theme/variable.scss

the following variable:

–ion-toolbar-background: #ffffff

changing #ffffff with the color you want,

I’m not sure that this work but in anycase try do not cost.

I hope this will help

3

Hmm thanks, though I don’t think that worked sorry.

I"m pretty sure I have to implement this but I have no idea how to start or where to put the code:

4

You can use Capacitor’s StatusBar plugin to change the Status Bar (top), not sure about the bottom one

import { Plugins } from '@capacitor/core';
const { StatusBar } = Plugins;

StatusBar.setBackgroundColor({
    color: '#FF0000'
});

About the where, that depends on your app, I would put it on some place where it would be executed soon enough.

1 Like