Theme-Color Meta Tag - Printable Version

Theme-Color Meta Tag - Printable Version

+- Moode Forum (https://moodeaudio.org/forum)
+-- Forum: moOde audio player (https://moodeaudio.org/forum/forumdisplay.php?fid=3)
+--- Forum: Feature requests (https://moodeaudio.org/forum/forumdisplay.php?fid=8)
+--- Thread: Theme-Color Meta Tag (/showthread.php?tid=3887)

Theme-Color Meta Tag - maccski - 06-04-2021

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

RE: Theme-Color Meta Tag - Tim Curtis - 06-04-2021

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>

RE: Theme-Color Meta Tag - maccski - 06-05-2021

(06-04-2021, 10:58 PM)Tim Curtis Wrote: Do you mean the line in this code block in header.php?

Code:
  <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">  <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">  <meta name="theme-color" content="#ffffff">  <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.

RE: Theme-Color Meta Tag - Tim Curtis - 06-05-2021

Post some screen shots showing the effect.

RE: Theme-Color Meta Tag - maccski - 06-06-2021

(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!

RE: Theme-Color Meta Tag - maccski - 06-06-2021

(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]

RE: Theme-Color Meta Tag - Tim Curtis - 06-06-2021

Nice :-)

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

RE: Theme-Color Meta Tag - maccski - 06-06-2021

(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!