Moode Forum

Full Version: Theme-Color Meta Tag
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
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
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>
(06-04-2021, 10:58 PM)Tim Curtis Wrote: [ -> ]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.
Post some screen shots showing the effect.
(06-05-2021, 10:45 PM)Tim Curtis Wrote: [ -> ]Post some screen shots showing the effect.

Before (top bar is white):

[Image: MoodeBefore.jpg]

After (the top bar matches the theme):

[Image: MoodeAfter.jpg]

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!
(06-05-2021, 10:45 PM)Tim Curtis Wrote: [ -> ]Post some screen shots showing the effect.

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

[Image: MoodePixel.jpg]
Nice :-)

I'll add to the TODO list. It might make it into 7.3.0 but no guarantee.
(06-06-2021, 10:14 AM)Tim Curtis Wrote: [ -> ]Nice :-)

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

Awesome, thanks!