retheme

Functions for theming components.

WIP

I want a tiny, framework-agnostic way to get a big theme object into components, whether inline on wrapped around a component.

Next is to explores how this integrates with popular style libs, lib and UMD builds.

Example 1

Use Theme and withTheme from Context-based theming.

import { Theme, withTheme } from "./retheme";

const ThemedThing = withTheme(({ theme, ...props }) =>
	<div {...props}>{theme.blue}</div>
);

const App = props =>
	<Theme theme={{ blue: "blue" }}>
		<ThemedThing />
	</Theme>;

export default App;

Example 2

Use Theme's children callback for with inline access to theme properties.

import { Theme } from "./retheme";

const App = props =>
	<Theme theme={{ blue: "blue" }}>
		{theme =>
			<div>
				<div>{theme.blue}</div>
			</div>}
	</Theme>;

export default App;

Example 3

Use retheme to apply a theme object to a component.

import { retheme } from "./retheme"

const App = ({ theme, ...props }) =>
	<div {...props}>
		blue {theme.primary}
	</div>;

export default retheme({ primary: "blue" })(App);

Example 3

Use retheme with both wrapped theme object and Context simultaniously.

const ThemedThing = withTheme(({ theme, ...props }) =>
	<div {...props}>{theme.primary}</div>
);

const App = ({ theme, ...props }) =>
	<div {...props}>
		blue: {theme.primary}
		<ThemedThing />
	</div>;

export default retheme({ primary: "blue" })(App);