• 0 Posts
  • 7 Comments
Joined 2 years ago
cake
Cake day: June 23rd, 2023

help-circle



  • carobwagoner@lemmy.worldtoVoyager@lemmy.worldLose title bar in iOS
    link
    fedilink
    English
    arrow-up
    1
    ·
    edit-2
    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)