How to change the color of header bar and address bar in newest Chrome version on Lollipop?
Found the solution after some searching.
You need to add a <meta>
tag in your <head>
containing name="theme-color"
, with your HEX code as the content value. For example:
<meta name="theme-color" content="#999999" />
Update:
If the android device has native dark-mode
enabled, then this meta
tag is ignored.
Chrome for Android does not use the color on devices with native
dark-mode
enabled.
source: https://caniuse.com/#search=theme-color
How to change the TEXT color of header bar and address bar in newest Android Chrome version on Lollipop or Android M?
Short answer: you can't.
Depending on the background color you choose, Google chrome will decide whether to render text in white or black color in order to maximize contrast / readability.
If it was allowed, someone could go around choosing the same color for the text and background (say black on black) and visually break Chrome's UI.
Here's an article from Material Design guidelines on the matter of text legibility and text backgrounds
Color in top bar in mobile version of chrome
Starting in version 39 of Chrome for Android on Lollipop, you’ll now
be able to use thetheme-color
meta tag to set the toolbar color—this
means no more Seattle gray toolbars! The syntax is pretty simple: add
a meta tag to your page’s<head>
with thename="theme-color"
, and set
thecontent
to any valid CSS color.For example, to set the background to your favorite color or
HTML5Rocks orange:
<meta name="theme-color" content="#db5945">
In addition, Chrome will show beautiful high-res favicons when they’re
provided. Chrome for Android picks the highest res icon that you
provide, and we recommend providing a 192×192px PNG file. For example:
<link rel="icon" sizes="192x192" href="nice-highres.png">
Check out the theme-color here on HTML5Rocks as well as on the Web
Fundamentals site, and be sure to check out the Add to home screen docs for more ways to make your site stand out.
Source : https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android
How to change address bar color on mobile browsers in Gatsby.js
You can change the color on mobile Android using the meta
tag theme-color
in the head
of your page, e.g.
<meta name="theme-color" content="#123456">
See https://stackoverflow.com/a/33193739/1247853 for a more in-detail discussion about other browsers.
If you are using the gatsby-starter-blog
or the gatsby-starter-default
you can set this meta tag in gatsby-config.js
:
{
resolve: `gatsby-plugin-manifest`,
options: {
...
theme_color: `#123456`,
...
},
If you are not using these starters, you can use React Helmet. Install it by following the instructions on https://www.gatsbyjs.org/docs/add-page-metadata/ , then place the following code somewhere that is executed on every page, e.g. in src/components/layout.js
import { Helmet } from "react-helmet"
return (
<Helmet
meta={[
{
name: `theme-color`,
content: '#123456',
},
]}>
// ... rest of the page ...
</Helmet>
)
Android lollipop change navigation bar color
It can be done inside styles.xml using
<item name="android:navigationBarColor">@color/theme_color</item>
or
window.setNavigationBarColor(@ColorInt int color)
http://developer.android.com/reference/android/view/Window.html#setNavigationBarColor(int)
Note that the method was introduced in Android Lollipop and won't work on API version < 21.
The second method (works on KitKat) is to set windowTranslucentNavigation to true in the manifest and place a colored view beneath the navigation bar.
Related Topics
What Is Exactly a "Clock Tick" in the Context of Android CPU Usage
Difference Between /Res and /Assets Directories
Android Mediaplayer Error (1, -2147483648)
How to Maintain Multi Layers of Imageviews and Keep Their Aspect Ratio Based on the Largest One
The APK File Does Not Exist on Disk
How to Handle Cookies in Httpurlconnection Using Cookiemanager
Android Timepickerdialog Set Max Time
Ffmpeg for a Android (Using Tutorial: "Ffmpeg and Android.Mk")
How to Change Endianness Mid-Execution on Arm (Android/Linux)
Schedule a Work on a Specific Time with Workmanager
Java.Lang.Illegalargumentexception: Contains a Path Separator
Android Imagebutton with a Selected State
How to Capture an Image and Store It with the Native Android Camera