diff options
Diffstat (limited to 'readme.md')
-rw-r--r-- | readme.md | 17 |
1 files changed, 14 insertions, 3 deletions
@@ -1,5 +1,7 @@ # sunlight-theme +A theme provider for `@emotion/core` and `emotion-theming` that supplies the level of sunlight with `use-sunlight`. Supports middleware via a prop. + ## Demo [https://optimistic-kalam-56c21b.netlify.com](https://optimistic-kalam-56c21b.netlify.com) @@ -7,10 +9,9 @@ ## Usage ```javascript -const containerStyle = ({ colours }) => css` - color: ${colours.main}; -` +// src/demo-component.js +// define an array of 11 colours const mainRange = colormap({ colormap: 'autumn', nshades: 11, @@ -18,6 +19,14 @@ const mainRange = colormap({ alpha: 1 }) +// define an emotion style +const containerStyle = ({ colours }) => css` + color: ${colours.main}; +` + +// define a middleware function that translates +// the light level to a "theme" (some object +// that's useful for styles) const colourMiddleware = theme => { return { ...theme, @@ -28,6 +37,8 @@ const colourMiddleware = theme => { } export const DemoComponent = ({ children }) => { + // middleware is optional but encouraged + // for mapping light level to colours return ( <SunlightTheme middleware={[colourMiddleware]}> <div css={containerStyle}>{children}</div> |