Unique Meta theme-color Tags For Every Post

Introduction

The theme-color meta tag. Full info on it can be found here. TLDR: It colors elements of your web browser like the address bar and or status bar.

Meta theme-color Tag Example

Adding it to all pages and post

Adding a theme-color to all posts is easy for most hugo sites. For the Stack theme I’m using its extremely easy. You just create a custom.html file in the correct location and add your code. It them gets added to the <head> tags of all pages

Customizing it for Pages and Posts differently.

Using if statements we can set different colors for posts and pages. We can use the resource color method in Hugo to easily get the most dominate color in an image. Put both of those together and we get this code to add to our custom.html file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<!-- Meta theme color for pages -->
{{ if eq .Type "page" }}
  <meta name="theme-color" content="#7825a3" />
{{ end }}
<!-- Meta theme color for posts, pulls most dominate color from cover image -->
{{ if eq .Type "post" }}
  {{ with .Resources.GetMatch "cover.*" }}
    {{ $domcolor := index .Colors 0 }}
      <meta name="theme-color" content="{{ $domcolor }}" />    
  {{ end }}
{{ end }}

Conclusion

I use this feature on this site and while its very cool, I doubt many will notice it.