feat: status bar dark in dark-mode

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

https://ionicframework.com

MIT License

50.47k stars 13.53k forks source link

feat: status bar dark in dark-mode #29378

Closed DorKeinath closed 2 weeks ago

DorKeinath commented 3 weeks ago

Prerequisites

[X] I have read the Contributing Guidelines.
[X] I agree to follow the Code of Conduct.
[X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

It would be fantastic if setting the mode to dark also caused the status bar to become dark.

Describe the Use Case

The actual screen looks like this:

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

sean-perkins commented 3 weeks ago

Hello @DorKeinath, dark mode is handled through CSS imports. An application could be using a static palette or using a palette based on the system preferences.

Status bar style is handled by the JS layer and the Capacitor plugin.

Developers are expected to use the plugin API directly: https://capacitorjs.com/docs/apis/status-bar#setstyle to configure the appearance of the status bar, since the UI library will not have context to this decision in your application.

DorKeinath commented 3 weeks ago

Thank you @sean-perkins a lot for your answer, it helps me a lot. I came across this option but I thought, why not suggest adding a switch to enable it? It's quite common for users to desire this feature, and currently, each user must individually implement it. Therefore, it would be efficient for them to provide such an option, perhaps within the vsc extention?

aparajita commented 3 weeks ago

@DorKeinath Take a look at capacitor-dark-mode. It handles dark mode in the CSS and in the status bar for you.

sean-perkins commented 2 weeks ago

I am going to close this feature request as there are alternative solutions that solve this request: https://github.com/ionic-team/ionic-framework/issues/29378#issuecomment-2073441940

Our considerations within Ionic Framework are often different than plugins and solutions that exist outside of it. With dark mode/palettes, we internally discussed and compared solution designs for a JS API to opt-in/out of the feature set. We decided with the CSS-only approach to enable developers to have the least amount of JS overhead and more control over how the feature applies in their application. This allows developers to build plugins and solutions outside of Ionic Framework that may be a perfect fit for scenarios developers find themselves needing.

We appreciate the feature request and ideas on how we may continue to improve Ionic Framework!