0

I am developing a PWA using Ionic Vue.
How can I change the color of the status bar in iOS?

I read this doc and tried writing theme-color Meta in the <template> tag, but it didn't change the color.

<template>
  <ion-page>
    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#3880ff" />
    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#eb445a" />
    <ion-content>...</ion-content>
  </ion-page>
</template>
kusumoto_teruya
  • 2,415
  • 4
  • 23
  • 38
  • The color comes from your primary color in the global.scss file, Change the color there if you want to change the header color. – StackoverBlows Dec 12 '22 at 15:39

1 Answers1

0

I solved by changing Safari status bar color with theme-color meta in index.html.

<head>
  <meta name="theme-color" content="#051829" />
</head>
kusumoto_teruya
  • 2,415
  • 4
  • 23
  • 38