Beginning with Model 15, Safari helps the theme-color <meta> tag each on macOS and iOS. That’s thrilling information as a result of now the primary desktop browser helps this <meta> tag and it additionally helps the media attribute and the prefers-color-scheme media function.
I by no means actually took a lot notice of the theme-color meta tag, however now is an efficient time to find out about its options and limitations and attempt to uncover some attention-grabbing use instances.
Options and limitations
Right here’s how I’ve been utilizing the theme-color meta tag for the previous few years: only a good ‘ol hex code for the content material attribute.
In accordance with assessments I made earlier this 12 months, this works in Chrome, Courageous and Samsung Web on Android, put in PWAs in Chrome and now additionally in Safari Expertise Preview.
Hex coloration assist is nice in all supported browsers.
CSS coloration assist
One of many first questions that got here to my thoughts was “Can we use coloration key phrases, hsl(), rgb(), too?” In accordance with the HTML spec, the worth of the attribute will be any CSS coloration. I’ve created this theme-color testing CodePen to confirm that.
The theme-color meta tags helps CSS colours in any kind: key phrases, rgb(), hsl() or hex code.
Taking a look at Chrome 90 on an Android Galaxy S20
HEX codes, rbg(), hsl() and key phrases are properly and persistently supported, however colours that embrace transparency: not a lot. Really, they’re supported in most browsers, however the outcomes aren’t very constant and typically surprising.
clear is a CSS coloration and used within the theme-color meta tag most browsers do what you’d anticipate. All common cell browsers don’t change coloration and show the default tab bar, however Safari on macOS and the Chrome Canary PWA on macOS flip the tab bar black. The PWA on Android falls again to theme-color outlined within the manifest.json, which we’ll speak about in a bit.
Browser with a clear theme-color meta tag
All browsers interpret hsla() and rgba(), however they set the alpha worth to 1. The one exception is Safari on macOS; it interprets the transparency, however it looks like the clear coloration has a black baseline. This has the impact that the sunshine orange coloration seems to be like darkish orange.
hsla() utilized to the theme-color meta tag
New coloration capabilities
Safari 15 is the primary browser to assist lab(), lch(), and hwb() coloration capabilities. These capabilities work for those who use them in CSS, however not for those who use them within the theme-color meta tag.
In case you use any of the brand new coloration capabilities within the theme-color meta tag, Safari doesn’t interpret them and falls again to its personal algorithm of choosing the colour. It’s probably that Safari makes use of the background coloration of your <physique> for the theme-color, which implies that you would possibly get the anticipated consequence with out defining the theme-color explicitly.
If CSS colours are supported, currentColor ought to work, too, proper? No, sadly not in any browser. It’s most likely an unusual use case, however I’d anticipate that we are able to set the theme-color to the present coloration of the <physique> or <html> component.
After I was testing CSS coloration key phrases, I used the colour crimson and it didn’t work. First, I believed that key phrases weren’t supported, however blue, hotpink, and inexperienced labored nice. As is seems, there’s a slender vary of colours that Safari doesn’t assist, colours that will get in the way in which of utilizing the interface. crimson doesn’t work as a result of it’s visually too near the background coloration of the shut button within the tab bar. This limitation is particular to Safari, in all different supported browsers any coloration appear to work nice.
In case you set the theme-color to crimson, Safari makes use of any coloration it deems applicable.
I don’t know sufficient in regards to the internals of browsers and customized properties and if it’s even potential to entry customized properties within the <head>, however I attempted it anyway. Sadly, it didn’t work in any browser.
That’s just about every thing I wished to find out about fundamental assist of the theme-color meta tag. Subsequent, let’s see the best way to and the way to not implement darkish mode for the tab bar.
Safari 15 is the primary desktop browser to assist the media attribute and the prefers-color-scheme media function on theme-color meta tags. Beginning with model 93, Chrome helps it too, however just for put in progressive net apps.
I used to be keen to seek out out what occurs in browsers that don’t assist the media attribute. I’ve created a demo web page for testing darkish mode that features the meta tags above and likewise permits you to set up the location as a PWA. The webmanifest.json consists of one other coloration definition for the theme-color.
Right here’s how supported browsers show the tab bar in gentle mode. It doesn’t matter if a browser helps the media attribute or not, it is going to interpret the primary meta tag regardless.
Right here’s how the tab bar on the identical web page seems to be like in darkish mode. These outcomes are extra attention-grabbing as a result of they fluctuate a bit. The Canary PWA and Safari assist and present the darkish coloration. All cell browsers use their default darkish tab bar styling, aside from Samsung Web, which makes use of the sunshine styling as a result of it doesn’t assist the prefers-color-scheme media function. (TIL: This could change within the close to future.)
I did one final check. I wished to see what occurs if I solely outline a theme coloration for darkish mode, however entry the web page in gentle mode.
These outcomes shocked me probably the most as a result of I anticipated all cell browsers to disregard the media attribute and simply use the darkish coloration within the meta tag regardless, however peculiar Chrome Canary fully ignores the entire meta tag, although it doesn’t assist the media attribute. As anticipated, each Canary PWAs fall again to the colour outlined within the manifest file.
The opposite attention-grabbing factor is that Safari shows a theme-color although I haven’t outlined one for gentle mode. That’s as a result of Safari will choose a coloration by itself, for those who don’t present a theme-color. On this case, it makes use of the background coloration of the web page, however it additionally would possibly use the background coloration of the <header> component, for instance.
If you wish to outline a theme coloration for gentle and darkish mode, your greatest wager is to outline each colours and use the primary meta tag as a fallback for browsers that don’t assist the media function.
Demos and use instances
poolsuite.web gives totally different themes for the location and adjustments the theme-color accordingly.
Most web sites don’t present customized themes, however you’ll be able to nonetheless give your pages that sure one thing. Dave makes use of totally different key colours in his weblog posts for hyperlinks and icons, and now additionally within the tab bar.
In case you’re utilizing gradients in your web page, you’ll be able to spotlight your styling by making the gradient span the entire browser. The theme-color meta tag doesn’t assist gradients, however you should use the identical coloration for the meta tag and the beginning coloration of the gradient of you web page’s background.
At Marketing Solution Australia we strive to deliverer elegant responsive websites for your business integrated with our personal SEO Optimization package to bring your pages on the first page of Google.