Style mobile browser's menu bars to match the current in-scope CSS color

Usage no npm install needed!

<script type="module">
  import reactChameleonThemeColor from '';


React Chameleon Theme Color

img img img img img

A simple React component to set the theme color of mobile browsers menu bars.


The effect of this component varies by device and by browser. See demo on a mobile device.

Live Demo


The theme-color meta attribute is set to the target color.

This should take effect for Chrome and Opera.


For iOS the apple-mobile-web-app-status-bar-style meta tag is set.

As Safari only allows either a solid grey, black or transparent status bar, the contrastRatio is used as a threshold to determine what value the meta tag should be.

If the contrast ratio of the color against pure white is greater than the set contrastRatio, the value will be set to black-translucent which is a transparent status bar with black text.

Otherwise, the status bar will be set to default which is a grey status bar with black text.

Additionally, apple-mobile-web-app-capable is also set which hides the address-bar.

Windows Phone

Sets the msapplication-navbutton-color to the target color.



yarn add react-chameleon-theme-color


npm install react-chameleon-theme-color


import React from 'react'
import { ThemeColor, ChameleonThemeColor } from 'react-chameleon-theme-color'

const App = () => (
  <div style={{ background: "#123", padding: "200px" }}>
    <ChameleonThemeColor contrastRatio={1.6} />
    {/* or you can set the color manually */}
    <ThemeColor color="#123" contrastRatio={1.6} />

Simply add either the ThemeColor or ChameleonThemeColor component to the React application using JSX.

The ChameleonThemeColor component will set the target color to the first set in-scope CSS color at runtime.

Alternatively the ThemeColor component will set the target color to the value of the color prop.



The contrastRatio property can be set to control the sensitivity required for a custom color to be used on Apple devices. The higher the value, the more contrast will be provided between the status bar text and background however it will also be more likely for the status bar color to be set.

Default: 1.6


The color property controls the target color for the status bar.

Only used for the ThemeColor component as ChameleonThemeColor component sets this automatically.

If set to false, no meta attributes will be set, causing each browser to fallback to its respective default.

Default: false