Several people have reached out to me, asking if RapidWeaver is capable of supporting the theme-color meta tag or whether I would consider making a new stack to do it.
The answer is that RapidWeaver already supports this meta tag and you do not need to download or buy extra stacks to do it.
I thought I would share some free advice on what this is and how you can use it, for the benefit of everyone in this community.
What is the theme-color meta tag?
The theme-color meta tag instructs a compatible web browser what colour to change the web browser title bar and address bar to (also referred to as the tab bar).
Normally these elements of the user interface cannot be changed by a website. But the theme-color meta tag is an exception to this rule. It lets a website author colour-coordinate this part of the screen.
This can give end-users more of an âapp-likeâ experience when viewing your website. For example, if your website is mostly green in colour, setting the âtheme-colorâ meta tag to a shade of green may look more harmonious; compared to the system white / silver / black colouring.
Browser compatibility
Believe it or not, Android Chrome has actually supported the theme-color meta tag since 2014! Thatâs why I have it documented on my knowledge base website here.
Interestingly, Apple announced at its developer conference last week that Safari 15 (both desktop and iOS versions) will also be supporting this. Right now, it is available to test in the Safari Technology Preview:
As of June 2021, this is not supported by any other web browsers yet. So please donât waste your time moaning and complaining that it does not work in your favourite version of Internet Explorer or whatever! This feature is what we term in the trade as a âprogressive enhancementâ.
Theme/framework compatibility
I see no reason for this to fail in any particular themes or frameworks. Unless they are doing something really bad and unconventional with the head section of your website. But you will only be able to test this in a compatible web browser (see above). It does not work in RapidWeaver 8 preview.
Getting this working
- Open your project file in RapidWeaver.
- In the side panel, click on Settings > Code > Meta Tags
- In the Name column, type
theme-colorand in the Content column, type the hexadecimal colour value you want to use.
What you see in RapidWeaver 8:
Click to enlarge the pictures.
The result (Big Sur / Safari Technology Preview 126):
Note how the complete address bar at the top has now turned green? Before this was applied, it was white. This example is using my Spring Pop theme.
Important stuff to know:
- âcolorâ is spelt without a âuâ. If you spell it the non-American way (as in âcolourâ) this wonât work. It has to be typed exactly as in the first screenshot above.
- The colour value has to be in hexadecimal format. I have not found any information to suggest it can be another format (like keywords, RGB, HSL). Possibly it can, but I have not tested it to confirm. So perhaps stick with hexadecimal format, to play things safe.
Taking this further
It is possible to change the theme-color meta tag depending on whether the user has their device or computer set to light mode or dark mode (day or night mode). Some themes like Torrent have seperate light and dark mode colour schemes, where this could be good to use.
The code is slightly more complicated and therefore cannot be entered in the RapidWeaver Settings > Code > Meta Tags. Instead you will need to use something like this:
<meta name="theme-color" content="#ecd96f" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0b3e05" media="(prefers-color-scheme: dark)">
Enter this code in Settings > Code > Head instead like this:
I have tested and confirmed that this one is working too.
I hope this helps 
-Will.