Theme-Color Meta Tag

[maccski]

Hi,

It would be great if the theme-color meta tag matched the selected UI theme background colour.

e.g. if the selected theme was Putty, the theme-color tag would be <meta name="theme-color" content="#c3c3c3">



Cheers!
David

[Tim Curtis]

Do you mean the line in this code block in header.php?

Code:

    <!-- MOBILE APP ICONS -->
    <!-- Apple -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="apple-touch-icon" sizes="180x180" href="/v5-apple-touch-icon.png">
    <link rel="mask-icon" href="/v5-safari-pinned-tab.svg" color="#5bbad5">
    <!-- Android/Chrome -->
    <link rel="icon" type="image/png" sizes="32x32" href="/v5-favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/v5-favicon-16x16.png">
    <!--link rel="manifest" href="/site.webmanifest"-->
    <meta name="theme-color" content="#ffffff">
    <!-- Microsoft -->
    <meta name="msapplication-TileColor" content="#da532c">
</head>

[maccski]

Do you mean the line in this code block in header.php?

Code:

    <!-- MOBILE APP ICONS -->
    <!-- Apple -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="apple-touch-icon" sizes="180x180" href="/v5-apple-touch-icon.png">
    <link rel="mask-icon" href="/v5-safari-pinned-tab.svg" color="#5bbad5">
    <!-- Android/Chrome -->
    <link rel="icon" type="image/png" sizes="32x32" href="/v5-favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/v5-favicon-16x16.png">
    <!--link rel="manifest" href="/site.webmanifest"-->
    <meta name="theme-color" content="#ffffff">
    <!-- Microsoft -->
    <meta name="msapplication-TileColor" content="#da532c">
</head>

Yes, that's it - I use moode on Chrome in a window. The theme color would make the white header bar the same color as the backgound.

[Tim Curtis]

Post some screen shots showing the effect.

[maccski]

Post some screen shots showing the effect.

Before (top bar is white):



After (the top bar matches the theme):



To get this I hard-coded header.php to "#C3C3C3", but it would be great if the top bar matched the background color of the chosen theme. It would also look awesome on Chome on Android devices.

Cheers!

[maccski]

Post some screen shots showing the effect.

Before and after with Purple Rain theme on my phone (Pixel 4a)

[Tim Curtis]

Nice :-)

I'll add to the TODO list. It might make it into 7.3.0 but no guarantee.

[maccski]

Nice :-)

I'll add to the TODO list. It might make it into 7.3.0 but no guarantee.

Awesome, thanks!