Comments on demo

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>