solarizer

A utility which contains the default hexadecimal and RGB values for Solarized color values as well as the ability to convert colors into a solarized-style theme by mimicking the color differences found in the "Base" colors.

Installation

npm install --save solarizer

Usage

Here's an example of how one might create some solarized react-native-really-awesome-buttons.

import { createBasesFromColor, rgb, rgbStrings as bases } from "solarizer";

const blue = createBasesFromColor(rgb.blue, "base01");
const red = createBasesFromColor(rgb.red, "base01");
const green = createBasesFromColor(rgb.green, "base01");

Then later...

  render() {
    return (
      <View style={styles.root} >
        <AwesomeButton
          key="Clear Button"
          onPress={() => this.clear()}
          backgroundColor={this.state.busy ? bases.base01 : red.base01}
          backgroundActive={this.state.busy ? bases.base02 : red.base02}
          backgroundDarker={this.state.busy ? bases.base03 : red.base03}
          disabled={this.state.busy}
        >
          Clear
        </AwesomeButton>
        <AwesomeButton
          key="Submit Button"
          onPress={() => this.submit()}
          accessibilityLabel="Submit"
          backgroundColor={this.state.busy ? bases.base01 : green.base01}
          backgroundActive={this.state.busy ? bases.base02 : green.base02}
          backgroundDarker={this.state.busy ? bases.base03 : green.base03}
          disabled={this.state.busy}
        >
          Submit
        </AwesomeButton>
      </View >);
  }
}

The result will look something like this:

Details

Using an initial color and the known RGB differences between "Base" colors in the Solarized theme:

We can choose a point in the Base range to use the initial color and then calculate Solarized-esque values for other Base values.

This is a very naive approach (see Color Difference) but it seems to work pretty well for coloring UI buttons, etc.