Voyager

7124 readers

5 users here now

The official lemmy community for Voyager, an open source, mobile-first client for lemmy.

Rules

Be nice.
lemmy.world instance policy

Sponsor development! 👇

💙

founded 2 years ago

MODERATORS

aeharding@lemmy.world

aeharding@vger.social

Lose title bar in iOS (lemmy.world)

submitted 2 years ago by phareous@lemmy.world to c/voyagerapp@lemmy.world

8 comments fedilink hide all child comments

When I use the app as a Home Screen PWA I can’t see the title bar anymore. This is kindof annoying because it hides the clock. Anybody have any ideas on this? Is it seeing the devs can control?

you are viewing a single comment's thread
view the rest of the comments

[–] carobwagoner@lemmy.world 1 points 2 years ago (1 children)

They can: https://stackoverflow.com/questions/19125074/how-to-change-the-background-color-of-the-ios-status-bar-for-safari-web-apps

[–] tun@lemmy.world 4 points 2 years ago (5 children)

The answer is almost 10 years old. If you are certain it can fix the issue you should create a PR.

[–] carobwagoner@lemmy.world 1 points 2 years ago* (last edited 2 years ago)

Fail enough. I went and tried the answer without quick luck. After some trial and error, in the simplest working page:

This gets you a status bar with black background and white text:

＜html>
    ＜head >
        ＜meta name="apple-mobile-web-app-capable" content="yes" />
    ＜/head>
    ＜body>
        ＜meta name="theme-color" content="#000">
        ＜p>Testing Status bar: white text text, black background＜/p>
    ＜/body>
＜/html>

This gets you a status bar with white background and black text:

＜html>
    ＜head>
        ＜meta name="apple-mobile-web-app-capable" content="yes" />
    ＜/head>
    ＜body>
        ＜meta name="theme-color" content="#fff">
        ＜p>Testing Status bar: black text, white background＜/p>
    ＜/body>
＜/html>

the important detail is getting the theme inside the body element not the head. Other colors can be used too, for example, a red status bar:

```＜meta name="theme-color" content="#ff0000">``

I don't really have time to apply this in the voyager app and I don't use it either, so I'm not really motivated to do it atm. Just for the sake of it, I've downloaded the code and tried to apply the changes I though it would make it work, but it was not a straight forward fix, so I gave up.

(Sorry for the formatting, the editor keeps removing all of the html tags in the comment)