This package has been deprecated

Author message:

Package no longer supported. Consider using chroma-js directly.

React Chameleon Theme Color

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

Devices

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

Live Demo

Android

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

This should take effect for Chrome and Opera.

iOS

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.

Installation

Yarn

yarn add react-chameleon-theme-color

npm

npm install react-chameleon-theme-color

Usage

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} />
  </div>
)

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.

Props

Contrast-Ratio

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

Color

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