react-base16-styling 

React styling with base16 color scheme support

Inspired by react-themeable, this utility provides flexible theming for your component with base16 theme support.

Install

``
yarn add react-base16-styling
`

Usage

`jsx
import { createStyling } from 'react-base16-styling';
import base16Themes from './base16Themes';

function getStylingFromBase16(base16Theme) {
return {
myComponent: {
backgroundColor: base16Theme.base00,
},

myComponentToggleColor({ style, className }, clickCount) {
return {
style: {
...style,
backgroundColor: clickCount % 2 ? 'red' : 'blue',
},
};
},
};
}

const createStylingFromTheme = createStyling(getStylingFromBase16, {
defaultBase16: base16Themes.solarized,
base16Themes,
});

class MyComponent extends Component {
state = { clickCount: 0 };
render() {
const { theme } = this.props;
const { clickCount } = this.state;

const styling = createStylingFromTheme(theme);

return (


createStyling

`js
function(getStylingFromBase16, defaultStylingOptions, themeOrStyling)
`

| Argument | Signature | Description |
| ----------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| getStylingFromBase16 | function(base16Theme) | creates object with default stylings for your component, using provided base16 theme. |
| defaultStylingOptions | { defaultBase16, base16Themes } | optional parameters, allow to set default base16 theme and additional base16 themes for component. |
| themeOrStyling | string or object | base16 theme name, base16 theme object or styling object. Theme name can have a modifier: "themeName:inverted" to invert theme colors (see [[#invertTheme]]) |

Styling object values could be: - objects (treated as style definitions) - strings (class names) - functions (they may be provided with additional parameters and should return object { style, className })

getBase16Theme

`js
function(themeOrStyling, base16Themes)
`

Helper method that returns base16 theme object if themeOrStyling is base16 theme name or theme object.

invertBase16Theme

`js
function(base16Theme)
`

Helper method that inverts base16 theme colors, creating light theme out of dark one or vice versa.

invertTheme

`js
function(theme)
`

Helper method that inverts a theme or styling object to be passed into the themeOrStyling` parameter of createStyling.