Status bar text color changes unexpectedly (delayed) when using Capacitor

[veitbjarsch]

What happened?

The Android status bar text color starts dark during the splash screen, then changes to light mode about 1.5 seconds after the main screen loads.

What did you expect to happen?

The Android status bar text color should remain consistent (e.g., dark) throughout the transition from the splash screen to the main screen.

Reproduction URL

https://github.com/veitbjarsch/quasar-bug

How to reproduce?

• Create a new Quasar project.
• Add Capacitor (quasar mode add capacitor).
• Run the app on a device or emulator.
• Observe the status bar text color during the splash screen and after navigating to the main screen.

Flavour

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

Areas

Capacitor Mode

Platforms/Browsers

Android

Quasar info output

Operating System - Darwin(24.6.0) - darwin/arm64
NodeJs - 22.16.0

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

Important local packages
  quasar - 2.18.5 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.4.0 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.17.0 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.5.22 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.6.3
  pinia - 3.0.3 -- Intuitive, type safe and flexible Store for Vue
  vite - 7.1.12 -- Native-ESM powered web dev build tool
  vite-plugin-checker - Not installed
  eslint - 9.38.0 -- An AST-based pattern checker for JavaScript.
  esbuild - 0.25.11 -- An extremely fast JavaScript and CSS bundler and minifier.
  typescript - Not installed
  workbox-build - Not installed
  register-service-worker - Not installed
  electron - 36.9.5 -- Build cross platform desktop apps with JavaScript, HTML, and CSS
  @electron/packager - Not installed
  electron-builder - Not installed
  @capacitor/core - 7.4.4 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/cli - 7.4.4 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/android - 7.4.4 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - MacBook-Pro-von-Veit.local
  en0 - 172.16.82.52

Relevant log output

Additional context

When setting up a fresh Quasar project with Capacitor and running the app, the status bar text color changes unexpectedly.
On the splash screen, the status bar text color appears dark, but once the main screen loads, it switches to light mode — and this color change happens with a noticeable delay after the initial render.

Notes:

• This issue does not occur when using Cordova with Quasar.
• It also does not occur with other frameworks such as Ionic when using Capacitor.
• The problem seems specific to the Quasar + Capacitor combination.

This video has minimal adjustments just to show the effect a bit better. The text color also changes on the unchanged initial project.
https://github.com/user-attachments/assets/8848a8dc-d867-4438-a466-7896c7eb743c