Menu
I'm trying to test out the <meta> tag <meta name="theme-color" content="#000000">, but I'd like to test this out locally on a desktop rather than somehow seeing it on a mobile device. It would be useful to see a preview of this tag in action.
This particular <meta> tag is outlined here: https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android
Is it possible to test this locally on a desktop? I tried going into Chrome Developer Tools and toggling the Device Toolbar, but unfortunately the mobile Chrome toolbar doesn't show up in that view.
409
The theme-color meta tag doesn't support gradients, but you can use the same color for the meta tag and the start color of the gradient of you page's background.
The theme-color meta tag provides a way to suggest a color that browsers should use to customize the display of the page or of the surrounding user interface. For example, browsers might use the color for the page's title bar or use it as a color highlight in a tab bar or task switcher.
Approach: We will declare the name attribute that has value as theme-color and, the content attribute will have any color Hex-code or a color name that we want. Example 1: Using Color hex-code: HTML.
Here you can see what browsers support this feature: https://caniuse.com/#search=theme-color
Currently Chrome desktop supports it if running in PWA mode. And supposedly you can run any webpage in this mode.
On my machine, from a cmd prompt I can enter:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --app=https://cnn.com
But I'm not actually seeing theme colors being displayed in the title bar.
122
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
