summaryrefslogtreecommitdiff
path: root/readme.md
diff options
context:
space:
mode:
Diffstat (limited to 'readme.md')
-rw-r--r--readme.md17
1 files changed, 14 insertions, 3 deletions
diff --git a/readme.md b/readme.md
index 2702989..fbd46b6 100644
--- a/readme.md
+++ b/readme.md
@@ -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>