AddressbarColor Plugin: Different Behavior Android vs. iOS

[54mu3l]

What happened?

I used the AdressbarColor Plugin as described in the docs (https://quasar.dev/quasar-plugins/addressbar-color).

I set the color in /src/boot/addressbar-color.js to #f00 with the following lines of code:

import { AddressbarColor } from 'quasar'

export default () => {
  AddressbarColor.set('#f00')
}

But on iOS 18 the adressbar was white (instead of red).

Reason for this problem is, that Quasar sets the meta tag apple-mobile-web-app-status-bar-style which only supports default, black, and black-translucent.

<meta name="apple-mobile-web-app-status-bar-style" content="#f00">

What did you expect to happen?

I would expect the adressbar to be red (#f00).

For this to happen I would expect Quasar to set the meta tag theme-color (instead of apple-mobile-web-app-status-bar-style) which is fully support since Safari for iOS version 15.

<meta name="theme-color" content="#f00">

Reproduction URL

https://stackblitz.com/edit/quasarframework-stackblitz-templates-tkkdnwdc?file=src%2Fboot%2Faddressbar-color.ts

How to reproduce?

Generally speaking:

1. Set the addressbar color to red with $q.addressbarColor.set('#f00')
2. Open the page on an iPhone
3. The adressbar won't be red

---

With the provided stackblitz:

1. Open the provided stackblitz
2. Simulate an iPhone (with dev-tools)
3. Check the generated html code and see that apple-mobile-web-app-status-bar-style is set
4. Simulate a Pixel 7 (with dev-tools)
5. Check the generated html code and see that theme-color is set

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Plugins (quasar)

Platforms/Browsers

iOS

Quasar info output

Operating System - Linux(5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36) - linux/x64
NodeJs - 18.20.3

Global packages
  NPM - 10.2.3
  yarn - 1.22.19
  pnpm - 8.15.6
  bun - Not installed
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.18.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.1.4 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.17 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.5.13 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.5.0
  pinia - Not installed
  vite - 6.2.1 -- Native-ESM powered web dev build tool
  vite-plugin-checker - Not installed
  eslint - 9.22.0 -- An AST-based pattern checker for JavaScript.
  esbuild - 0.25.1 -- The cross-platform WebAssembly binary for esbuild, a JavaScript bundler.
  typescript - Not installed
  workbox-build - Not installed
  register-service-worker - Not installed
  electron - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - quasarframeworkstackblitztempl-cy3h
  en0 - 192.168.1.104

Relevant log output

Additional context

I provided a GIF that shows the different behavior of theme-color vs. apple-mobile-web-app-status-bar-style on iOS 18. For demo purposes I edited the index.html directly without the use of the addressbar plugin (screen recording using iPhone mirroring):

I would argue the behavior should be the same for Android and iOS. As far as I can see, I don't see any reason why not to use theme-color for every device.

See also: https://stackoverflow.com/a/69699288/4251427