Meta Theme Colour and Trickery

No Comments

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.

<meta title=”theme-color” content material=”#319197″>

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.

<meta title=”theme-color” content material=”hsl(24.3, 97.4%, 54.3%)”>

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

All supported browsers additionally assist hsl() and rgb(). That is superior as a result of it permits us to do some fairly cool stuff with JavaScript. We’ll speak about that later, however first let’s have a look at some limitations.

Transparency

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.

All three declarations work nice in Safari 15:

physique {
background-color: hwb(27 10% 28%);
background-color: lch(67.5345% 42.5 258.2);
background-color: lab(62.2345% -34.9638 47.7721);
}

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.

<meta title=”theme-color” content material=”lab(29.2345% 39.3825 20.0664)”>

Please bear in mind that on the time of writing Safari 15 is the one browser to assist these new colours capabilities.

currentColor

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.

<fashion>
physique {
coloration: blue;
}
</fashion>

<meta title=”theme-color” content material=”currentColor”>

I discovered a ticket within the WebKit bug tracker titled “<meta title=”theme-color” content material=”…”> also needs to assist CSS currentcolor.” Assist would possibly change sooner or later, if somebody picks the ticket up.

Prohibited colours

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.

Customized properties

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.

<fashion>
:root {
–theme: blue;
}
</fashion>

<meta title=”theme-color” content material=”var(–theme)”>

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.

Darkish mode

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.

In accordance with the online app manifest web page on net.dev, for those who outline a number of theme-color meta tags, browsers choose the primary tag that matches.

<meta title=”theme-color” content material=”#872e4e” media=”(prefers-color-scheme: darkish)”>

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.

{
“title”: “My PWA”,
“icons”: [
{
“src”: “https://via.placeholder.com/144/00ff00”,
“sizes”: “144×144”,
“type”: “image/png”
}
],
“start_url”: “/theme-color-darkmode.html”,
“show”: “standalone”,
“background_color”: “hsl(24.3, 97.4%, 54.3%)”,
“theme_color”: “hsl(24.3, 97.4%, 54.3%)”
}

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.

<meta title=”theme-color” content material=”#872e4e” media=”(prefers-color-scheme: darkish)”>

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.

<meta title=”theme-color” content material=”#319197″ media=”(prefers-color-scheme: gentle)”>
<meta title=”theme-color” content material=”#872e4e” media=”(prefers-color-scheme: darkish)”>

Safari has confirmed that theme-color works nice on desktop browsers, too. I’m certain that designers and builders will discover many inventive methods to make use of this meta tag, particularly contemplating that the worth will be modified through JavaScript. I’ve collected and created some attention-grabbing demos in your inspiration.

Demos and use instances

Theming

poolsuite.web gives totally different themes for the location and adjustments the theme-color accordingly.

Max Böck additionally adjustments the theme-color on his web site whenever you change the theme.

Web page theming

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.

Gradients

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.

<meta title=”theme-color” content material=”rgb(0, 235, 255)”>

<fashion>
physique {
background: linear-gradient(rgb(0, 235, 255), #08124a);
}
</fashion>

Kind validation

I constructed this proof of idea of a kind that adjustments theme-color on kind validation. It begins with a blue tab bar which turns crimson if the submitted information is invalid or inexperienced if it’s legitimate.

const electronic mail = doc.querySelector(‘enter’)
const themeColor = doc.querySelector(‘meta[name=”theme-color”]’)
const msg = doc.querySelector(‘[aria-live]’)
let coloration = ‘#FA0000’
let message = ‘Error message’

doc.querySelector(‘button’).addEventListener(‘click on’, (e) => {
e.preventDefault()

electronic mail.reportValidity()
electronic mail.setAttribute(‘aria-invalid’, true)

if (electronic mail.validity.legitimate) {
coloration = ‘#00FF00’
message = “Success message!”
electronic mail.setAttribute(‘aria-invalid’, false)
}

msg.textContent = message
themeColor.setAttribute(‘content material’, coloration)
});

Disco mode

I’m not saying that it’s best to, however you possibly can put your website in 💃 Disco Mode 🕺 by combining setInterval and hsl() colours.

/*
Impressed by https://twitter.com/argyleink/standing/1408184587885309952
*/

const movement = window.matchMedia(“(prefers-reduced-motion: no-preference)”);

// Test if customers haven’t got a desire for decreased movement
if (movement.matches) {
let scheme = doc.querySelector(‘meta[name=”theme-color”]’)
let hue = 0
let coloration

setInterval(() => {
coloration = `hsl(${hue+=5} 50% 30%)`
doc.physique.fashion.background = coloration;
scheme.setAttribute(‘content material’, coloration)
}, 50)

Scrolling

Stuart had an awesome thought, he recommended altering theme coloration on scroll. I constructed this fast prototype, once more utilizing hsl() colours.

Please solely do that if it doesn’t have an effect on efficiency negatively.

Max constructed a demo through which he alters the theme-color in accordance with the background coloration of the present part within the viewport utilizing Intersection Observer.

const setThemeColor = (coloration) => {
const meta = doc.querySelector(‘meta[name=”theme-color”]’)
if (meta) {
meta.setAttribute(‘content material’, coloration)
}
}

if (“IntersectionObserver” in window) {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
const { isIntersecting, goal } = entry
if (isIntersecting) {
const coloration = window.getComputedStyle(goal).getPropertyValue(“background-color”);
setThemeColor(coloration)
}
})
}, {
root: doc.getElementById(‘viewport’),
rootMargin: “1px 0px -100% 0px”,
treshold: 0.1
})

doc.querySelectorAll(‘.part’).forEach(part => {
observer.observe(part)
})
}

Extracting coloration

One other attention-grabbing thought is to extract the dominant or common coloration out of your header photos robotically and use it because the theme-color.

<script sort=”module”>
import fastAverageColor from “https://cdn.skypack.dev/fast-average-color@6.4.0″;
const fac = new fastAverageColor();

fac.getColorAsync(doc.querySelector(‘img’))
.then(coloration => {
doc.querySelector(‘meta[name=”theme-color”]’).setAttribute(‘content material’, coloration.rgba)
})
.catch(e => {
console.log(e);
});
</script>

<img src=”/amy-humphries-2M_sDJ_agvs-unsplash.jpg” alt=”A sea star on blue sand.” />

That’s only a handful of concepts, however I already like the place that is going and I’m certain that you just’ll provide you with much more creatives methods of utilizing the theme-color meta tag.

Assets

theme-color specificationDesign for Safari 15Darkish Mode in Samsung Web

The submit Meta Theme Colour and Trickery appeared first on CSS-Tips. You may assist CSS-Tips by being an MVP Supporter.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment