{"_id":"styled-theming","_rev":"170440","name":"styled-theming","description":"Create themes for your app using styled-components","dist-tags":{"latest":"2.2.0"},"maintainers":[{"name":"thejameskyle","email":"me@thejameskyle.com"}],"time":{"modified":"2021-06-03T11:50:57.000Z","created":"2017-07-26T22:16:31.687Z","2.2.0":"2017-09-14T01:33:43.564Z","2.1.1":"2017-08-01T03:23:43.405Z","2.1.0":"2017-08-01T03:21:52.631Z","2.0.0":"2017-08-01T02:42:46.728Z","1.0.0":"2017-07-26T22:16:31.687Z"},"users":{},"author":{"name":"James Kyle","email":"me@thejameskyle.com"},"repository":{"type":"git","url":"git+ssh://git@github.com/styled-components/styled-theming.git"},"versions":{"2.2.0":{"name":"styled-theming","description":"Create themes for your app using styled-components","version":"2.2.0","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/styled-components/styled-theming.git"},"author":{"name":"James Kyle","email":"me@thejameskyle.com"},"license":"MIT","files":["index.js","index.js.flow","dist/styled-theming.js","dist/styled-theming.min.js"],"scripts":{"test":"jest","example":"browserify -t babelify example/index.js -o example/bundle.js --debug","build":"rm -rf dist && rollup -c && NODE_ENV=production rollup -c","prepublish":"yarn build"},"devDependencies":{"babel-plugin-transform-class-properties":"^6.24.1","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babelify":"^7.3.0","browserify":"^14.4.0","flow-bin":"^0.51.0","jest":"^20.0.4","prop-types":"^15.5.10","react":"^15.6.1","react-dom":"^15.6.1","react-test-renderer":"^15.6.1","rollup":"^0.45.2","rollup-plugin-commonjs":"^8.0.2","rollup-plugin-uglify":"^2.0.1","styled-components":"^2.1.1"},"gitHead":"e2b04171fd229146804659da65833afe3dee287a","bugs":{"url":"https://github.com/styled-components/styled-theming/issues"},"homepage":"https://github.com/styled-components/styled-theming#readme","_id":"styled-theming@2.2.0","_shasum":"3084e43d40eaab4bc11ebafd3de04e3622fee37e","_from":".","_npmVersion":"3.10.8","_nodeVersion":"6.9.1","_npmUser":{"name":"thejameskyle","email":"me@thejameskyle.com"},"dist":{"shasum":"3084e43d40eaab4bc11ebafd3de04e3622fee37e","size":4415,"noattachment":false,"key":"/styled-theming/-/styled-theming-2.2.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/styled-theming/download/styled-theming-2.2.0.tgz"},"maintainers":[{"name":"thejameskyle","email":"me@thejameskyle.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-theming-2.2.0.tgz_1505352823494_0.49431299744173884"},"directories":{},"publish_time":1505352823564,"_hasShrinkwrap":false,"_cnpm_publish_time":1505352823564},"2.1.1":{"name":"styled-theming","description":"Create themes for your app using styled-components","version":"2.1.1","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/thejameskyle/styled-theming.git"},"author":{"name":"James Kyle","email":"me@thejameskyle.com"},"license":"MIT","files":["index.js","index.js.flow","dist/styled-theming.js","dist/styled-theming.min.js"],"scripts":{"test":"jest","example":"browserify -t babelify example/index.js -o example/bundle.js --debug","build":"rm -rf dist && rollup -c && NODE_ENV=production rollup -c","prepublish":"yarn build"},"devDependencies":{"babel-plugin-transform-class-properties":"^6.24.1","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babelify":"^7.3.0","browserify":"^14.4.0","flow-bin":"^0.51.0","jest":"^20.0.4","prop-types":"^15.5.10","react":"^15.6.1","react-dom":"^15.6.1","react-test-renderer":"^15.6.1","rollup":"^0.45.2","rollup-plugin-commonjs":"^8.0.2","rollup-plugin-uglify":"^2.0.1","styled-components":"^2.1.1"},"gitHead":"785d6bf23073e0d391eb5f52e1b2dc2a471f95fb","bugs":{"url":"https://github.com/thejameskyle/styled-theming/issues"},"homepage":"https://github.com/thejameskyle/styled-theming#readme","_id":"styled-theming@2.1.1","_shasum":"a7059ee4a91410c9fd2f1d981d319d2dfd8128d3","_from":".","_npmVersion":"3.10.8","_nodeVersion":"6.9.1","_npmUser":{"name":"thejameskyle","email":"me@thejameskyle.com"},"dist":{"shasum":"a7059ee4a91410c9fd2f1d981d319d2dfd8128d3","size":4255,"noattachment":false,"key":"/styled-theming/-/styled-theming-2.1.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/styled-theming/download/styled-theming-2.1.1.tgz"},"maintainers":[{"name":"thejameskyle","email":"me@thejameskyle.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-theming-2.1.1.tgz_1501557823128_0.3201335333287716"},"directories":{},"publish_time":1501557823405,"_cnpm_publish_time":1501557823405,"_hasShrinkwrap":false},"2.1.0":{"name":"styled-theming","description":"Create themes for your app using styled-components","version":"2.1.0","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/thejameskyle/styled-theming.git"},"author":{"name":"James Kyle","email":"me@thejameskyle.com"},"license":"MIT","files":["index.js","index.js.flow"],"scripts":{"test":"jest","example":"browserify -t babelify example/index.js -o example/bundle.js --debug","build":"rollup -c && NODE_ENV=production rollup -c","prepublish":"yarn build"},"devDependencies":{"babel-plugin-transform-class-properties":"^6.24.1","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babelify":"^7.3.0","browserify":"^14.4.0","flow-bin":"^0.51.0","jest":"^20.0.4","prop-types":"^15.5.10","react":"^15.6.1","react-dom":"^15.6.1","react-test-renderer":"^15.6.1","rollup":"^0.45.2","rollup-plugin-commonjs":"^8.0.2","rollup-plugin-uglify":"^2.0.1","styled-components":"^2.1.1"},"gitHead":"684b4a374e40912ac6f059aea738887cc7b3205a","bugs":{"url":"https://github.com/thejameskyle/styled-theming/issues"},"homepage":"https://github.com/thejameskyle/styled-theming#readme","_id":"styled-theming@2.1.0","_shasum":"62eabe45babe7aec31b44b76033811cbb03b7df0","_from":".","_npmVersion":"3.10.8","_nodeVersion":"6.9.1","_npmUser":{"name":"thejameskyle","email":"me@thejameskyle.com"},"dist":{"shasum":"62eabe45babe7aec31b44b76033811cbb03b7df0","size":3713,"noattachment":false,"key":"/styled-theming/-/styled-theming-2.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/styled-theming/download/styled-theming-2.1.0.tgz"},"maintainers":[{"name":"thejameskyle","email":"me@thejameskyle.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-theming-2.1.0.tgz_1501557712416_0.18326201848685741"},"directories":{},"publish_time":1501557712631,"_hasShrinkwrap":false,"_cnpm_publish_time":1501557712631},"2.0.0":{"name":"styled-theming","description":"Create themes for your app using styled-components","version":"2.0.0","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/thejameskyle/styled-theming.git"},"author":{"name":"James Kyle","email":"me@thejameskyle.com"},"license":"MIT","files":["index.js","index.js.flow"],"scripts":{"test":"jest","example":"browserify -t babelify example/index.js -o example/bundle.js --debug"},"devDependencies":{"babel-plugin-transform-class-properties":"^6.24.1","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babelify":"^7.3.0","browserify":"^14.4.0","flow-bin":"^0.51.0","jest":"^20.0.4","prop-types":"^15.5.10","react":"^15.6.1","react-dom":"^15.6.1","react-test-renderer":"^15.6.1","styled-components":"^2.1.1"},"gitHead":"c79bcc6629fe1795eeb00dc9ae8063a409514c3e","bugs":{"url":"https://github.com/thejameskyle/styled-theming/issues"},"homepage":"https://github.com/thejameskyle/styled-theming#readme","_id":"styled-theming@2.0.0","_shasum":"7c4dc40c0ca24fa3e1346b8f5d3b0f78f3407dd8","_from":".","_npmVersion":"3.10.8","_nodeVersion":"6.9.1","_npmUser":{"name":"thejameskyle","email":"me@thejameskyle.com"},"dist":{"shasum":"7c4dc40c0ca24fa3e1346b8f5d3b0f78f3407dd8","size":3559,"noattachment":false,"key":"/styled-theming/-/styled-theming-2.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/styled-theming/download/styled-theming-2.0.0.tgz"},"maintainers":[{"name":"thejameskyle","email":"me@thejameskyle.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-theming-2.0.0.tgz_1501555366641_0.269393939524889"},"directories":{},"publish_time":1501555366728,"_hasShrinkwrap":false,"_cnpm_publish_time":1501555366728},"1.0.0":{"name":"styled-theming","description":"Create themes for your app using css-in-js","version":"1.0.0","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/thejameskyle/styled-theming.git"},"author":{"name":"James Kyle","email":"me@thejameskyle.com"},"license":"MIT","files":["index.js","index.js.flow"],"scripts":{"test":"jest","example":"browserify -t babelify example/index.js -o example/bundle.js --debug"},"devDependencies":{"babel-plugin-transform-class-properties":"^6.24.1","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babelify":"^7.3.0","browserify":"^14.4.0","flow-bin":"^0.51.0","jest":"^20.0.4","react-dom":"^15.6.1","react-test-renderer":"^15.6.1","styled-components":"^2.1.1"},"dependencies":{"create-react-class":"^15.6.0","prop-types":"^15.5.10","react":"^15.6.1"},"gitHead":"b440ac7351e059e477b03847cf47b0f5ff1404dc","bugs":{"url":"https://github.com/thejameskyle/styled-theming/issues"},"homepage":"https://github.com/thejameskyle/styled-theming#readme","_id":"styled-theming@1.0.0","_shasum":"fc5a1eec456d41ffa5230caa6dd4951e8a6ff489","_from":".","_npmVersion":"3.10.8","_nodeVersion":"6.9.1","_npmUser":{"name":"thejameskyle","email":"me@thejameskyle.com"},"dist":{"shasum":"fc5a1eec456d41ffa5230caa6dd4951e8a6ff489","size":3470,"noattachment":false,"key":"/styled-theming/-/styled-theming-1.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/styled-theming/download/styled-theming-1.0.0.tgz"},"maintainers":[{"name":"thejameskyle","email":"me@thejameskyle.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-theming-1.0.0.tgz_1501107391608_0.8730154412332922"},"directories":{},"publish_time":1501107391687,"_hasShrinkwrap":false,"_cnpm_publish_time":1501107391687}},"readme":"# styled-theming\n\n> Create themes for your app using [styled-components](https://www.styled-components.com/)\n\nRead the [introductory blog post](http://thejameskyle.com/styled-theming.html)\n\n## Installation\n\n```sh\nyarn add styled-components styled-theming\n```\n\n## Example\n\n```js\nimport React from 'react';\nimport styled, {ThemeProvider} from 'styled-components';\nimport theme from 'styled-theming';\n\nconst boxBackgroundColor = theme('mode', {\n  light: '#fff',\n  dark: '#000',\n});\n\nconst Box = styled.div`\n  background-color: ${boxBackgroundColor};\n`;\n\nexport default function App() {\n  return (\n    <ThemeProvider theme={{ mode: 'light' }}>\n      <Box>\n        Hello World\n      </Box>\n    </ThemeProvider>\n  );\n}\n```\n\n## API\n\n### `<ThemeProvider>`\n\nSee [styled-components docs](https://www.styled-components.com/docs/advanced#theming)\n\n`<ThemeProvider>` is part of styled-components, but is required for styled-theming.\n\n```js\nimport {ThemeProvider} from 'styled-components';\n```\n\n`<ThemeProvider>` accepts a single prop `theme` which you should pass an object\nwith either strings or getter functions. For example:\n\n```js\n<ThemeProvider theme={{ mode: 'dark', size: 'large' }}>\n<ThemeProvider theme={{ mode: modes => modes.dark, size: sizes => sizes.large }}>\n```\n\nYou should generally set up a `<ThemeProvider>` at the root of your app:\n\n```js\nfunction App() {\n  return (\n    <ThemeProvider theme={...}>\n      {/* rest of your app */}\n    </ThemeProvider>\n  );\n}\n```\n\n### `theme(name, values)`\n\nMost of your theming will be done with this function.\n\n`name` should match one of the keys in your `<ThemeProvider>` theme.\n\n```js\n<ThemeProvider theme={{ whatever: '...' }}/>\n\ntheme('whatever', {...});\n```\n\n`values` should be an object where one of the keys will be selected by the\nvalue provided to `<ThemeProvider>` theme.\n\n```js\n<ThemeProvider theme={{ mode: 'light' }}/>\n<ThemeProvider theme={{ mode: 'dark' }}/>\n\ntheme('mode', {\n  light: '...',\n  dark: '...',\n});\n```\n\nThe values of this object can be any CSS value.\n\n```js\ntheme('mode', {\n  light: '#fff',\n  dark: '#000',\n});\n\ntheme('font', {\n  sansSerif: '\"Helvetica Neue\", Helvetica, Arial, sans-serif',\n  serif: 'Georgia, Times, \"Times New Roman\", serif',\n  monoSpaced: 'Consolas, monaco, monospace',\n});\n```\n\nThese values can also be functions that return CSS values.\n\n```js\ntheme('mode', {\n  light: props => props.theme.userProfileAccentColor.light,\n  dark: props => props.theme.userProfileAccentColor.dark,\n});\n```\n\n`theme` will create a function that you can use as a value in\nstyled-component's `styled` function.\n\n```js\nimport styled from 'styled-components';\nimport theme from 'styled-theming';\n\nconst backgroundColor = theme('mode', {\n  light: '#fff',\n  dark: '#000',\n});\n\nconst Box = styled.div`\n  background-color: ${backgroundColor}\n`;\n```\n\n### `theme.variants(name, prop, themes)`\n\nIt's often useful to create variants of the same component that are selected\nvia an additional prop.\n\nTo make this easier with theming, styled-theming provides a `theme.variants`\nfunction.\n\n```js\nimport styled from 'styled-components';\nimport theme from 'styled-theming';\n\nconst backgroundColor = theme.variants('variant', 'mode', {\n  default: { light: 'gray', dark: 'darkgray' },\n  primary: { light: 'blue', dark: 'darkblue' },\n  success: { light: 'green', dark: 'darkgreen' },\n  warning: { light: 'orange', dark: 'darkorange' },\n});\n\nconst Button = styled.button`\n  background-color: ${backgroundColor};\n`;\n\nButton.propTypes = {\n  variant: PropTypes.oneOf(['default', 'primary', 'success', 'warning'])\n};\n\nButton.defaultProps = {\n  variant: 'default',\n};\n\n<Button/>\n<Button variant=\"primary\"/>\n<Button variant=\"success\"/>\n<Button variant=\"warning\"/>\n```\n","_attachments":{},"homepage":"https://github.com/styled-components/styled-theming#readme","bugs":{"url":"https://github.com/styled-components/styled-theming/issues"},"license":"MIT"}