Meta attribute theme-color uses the default header background color, not the active one

gkln · September 8, 2018, 10:17am

Hi,

When users select another theme in their settings, the meta attribute theme-color is still set to the header_background property of the default theme. It should be set to the value of the active theme instead.

Thanks in advance for looking into this.

(Running Discourse v2.0.5.)

david · September 11, 2018, 9:46am

I had this reported yesterday on another forum.

The theme-color tag is used by Chrome on android to style tabs according to the website’s color scheme.

As @gkln said, this seem to have stopped working properly for Discourse sites. Looking at the code, I’m not sure if/how it ever fetched colors from a non-default theme, but it can’t be a coincidence that two separate people have reported it . @osama maybe something related to the recent theme changes?

github.com/discourse/discourse

app/views/layouts/_head.html.erb

main


      
          <%- if SiteSetting.site_favicon_url.present? %>
          <link rel="icon" type="image/png" href="<%=SiteSetting.site_favicon_url%>">
          <%- end %>
          <% site_apple_touch_icon_url = SiteSetting.site_apple_touch_icon_url %>
          <%- if site_apple_touch_icon_url.present? %>
          <link rel="apple-touch-icon" type="image/png" href="<%= ::UrlHelper.absolute(site_apple_touch_icon_url) %>">
          <%- end %>
          <%= discourse_theme_color_meta_tags %>
          <%= discourse_color_scheme_meta_tag %>
          <%# viewport is updated further in instance-initializers/viewport-setup.js %>
          <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
          <%- if Discourse.base_path.present? %>
          <meta name="discourse-base-uri" content="<%= Discourse.base_path %>">
          <% end %>
          <%= canonical_link_tag %>
          <%= render_sitelinks_search_tag %>
          <% if SiteSetting.google_site_verification_token.present? %>
            <meta name="google-site-verification" content="<%= SiteSetting.google_site_verification_token %>">
          <% end %>
          <link rel="search" type="application/opensearchdescription+xml" href="<%= Discourse.base_url %>/opensearch.xml" title="<%= SiteSetting.title %> Search">

Osama · September 11, 2018, 2:22pm

The theme-color meta attribute always used the site’s default color scheme instead of the scheme of the current user theme. We’ve had this bug since the inception of user-selectable themes. Here is a fix for it:

@gkln thanks for reporting this ancient bug!

Falco · September 11, 2018, 2:25pm

@Osama should we also set the user selected color in the https://meta.discourse.org/manifest.webmanifest ?

Osama · September 11, 2018, 3:05pm

Yep, looks like Google docs recommend the colors in theme-color meta attr and the manifest file match, so I updated my PR so that the manifest file uses the same colors.

Topic		Replies	Views
Regarding theme-color Bug	3	1408	May 5, 2017
Meta theme-color is not respecting current color scheme Bug	16	6909	November 12, 2022
Discourse is taking `theme-color` from `header background` Support	1	636	September 22, 2022
Decouple theme color from header background colour Feature	3	1250	February 7, 2022
Switching between the Default and Dark theme doesn't have any effect on bg color Bug dark-theme	5	89	December 17, 2024

Meta attribute theme-color uses the default header background color, not the active one

Related topics