Doubt with Theme-color, change the color of the browser

Asked

Viewed 1,692 times

1

After accessing the mobile phone, I did not notice that he changed the color of the browser, nothing changed, using safari on Ios or Android, did anything missing? I made the inclusion in my head :

<!--mudar a cor do navegador -->
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#FFFFFF" />
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#FFFFFF" />
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
css html5

  • try placing with single quotes <meta name='Theme-color' content='#FFFFFF' /> http://www.dicasparablogs.com.br/2016/03/mudar-cor-barra-address-android.html

  • Thank you, I’ll test!

  • Douglar’s solution worked out?

  • Failed, see http://rocasafari.com.br/

  • An addendum on the information above, if you are using Dark theme on smartphone, the code is not enabled.

1 answer

1

For example, to set the background for a color

Add below Meta Property to your HTML code in HEAD

<head>
  ...
  <meta name="theme-color" content="Seu Código Hexadecimal">
  ...
</head>

Example

<head>
  ...
  <meta name="theme-color" content="#444444">
  ...
</head>

In below the image I just mentioned how Chrome picked up its theme color property

enter image description here

Firefox OS, Safari, Internet Explorer and Opera Coast allow you to set colors for browser elements and even the platform using metatags.

<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Style specific to Safari

For more details Documentation here

Hiding the Safari UI components

Set the metatag compatible with the Apple-mobile-web-web app to yes to enable standalone mode. For example, the following HTML displays web content using standalone mode.

<meta name="apple-mobile-web-app-capable" content="yes">

Changing the appearance of the status bar

You can change the appearance of the default status bar to black or translucent-black. With black-translucent, the status bar floats on top of the content of the full screen instead of pressing it. This gives the layout greater height but blocks the top. Here is the required code:

<meta name="apple-mobile-web-app-status-bar-style" content="black">

For more information about the status bar appearance, see apple-mobile-web-app-status-bar-style.

For example:

Screenshot using black-translucent

Screenshot usando preto-translúcido

Screenshot using black

Screenshot usando preto

  • Friend, I thank you but it didn’t work, I don’t know why http://rocasafari.com.br/

  • @itasouza tries another color instead of white

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.