Thank you for your donation!


Cloudsmith graciously provides open-source package management and distribution for our project.


Theme-Color Meta Tag
#1
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
Reply
#2
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>
Enjoy the Music!
moodeaudio.org | Mastodon Feed | GitHub
Reply
#3
(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.
Reply
#4
Post some screen shots showing the effect.
Enjoy the Music!
moodeaudio.org | Mastodon Feed | GitHub
Reply
#5
(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!
Reply
#6
(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]
Reply
#7
Nice :-)

I'll add to the TODO list. It might make it into 7.3.0 but no guarantee.
Enjoy the Music!
moodeaudio.org | Mastodon Feed | GitHub
Reply
#8
(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!
Reply


Forum Jump: