{"id":17726687,"url":"https://github.com/sergeysova/themz","last_synced_at":"2026-04-15T22:32:03.792Z","repository":{"id":66330909,"uuid":"91684241","full_name":"sergeysova/themz","owner":"sergeysova","description":"Easy theming for StyledComponent, StyledJSS and ReactJSS","archived":false,"fork":false,"pushed_at":"2017-10-13T16:58:28.000Z","size":85,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T11:06:17.015Z","etag":null,"topics":["jss","library","react","styled-components","styled-jss","theme","theming"],"latest_commit_sha":null,"homepage":"https://npmjs.com/themz","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sergeysova.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-18T11:13:28.000Z","updated_at":"2020-05-07T21:46:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"03017650-b36c-4631-b73d-252e1763071c","html_url":"https://github.com/sergeysova/themz","commit_stats":null,"previous_names":["lestad/themz"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sergeysova%2Fthemz","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sergeysova%2Fthemz/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sergeysova%2Fthemz/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sergeysova%2Fthemz/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sergeysova","download_url":"https://codeload.github.com/sergeysova/themz/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246485224,"owners_count":20785263,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jss","library","react","styled-components","styled-jss","theme","theming"],"created_at":"2024-10-25T17:06:34.106Z","updated_at":"2026-04-15T22:31:58.770Z","avatar_url":"https://github.com/sergeysova.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Themz\n\n[![Build Status](https://travis-ci.org/LestaD/themz.svg?branch=master)](https://travis-ci.org/LestaD/themz)\n[![npm](https://img.shields.io/npm/v/themz.svg)](https://npmjs.com/themz)\n[![David](https://img.shields.io/david/lestad/themz.svg)](https://github.com/lestad/themz)\n[![license](https://img.shields.io/github/license/lestad/themz.svg)](https://github.com/lestad/themz)\n\n## Readme\n\n\nThemz is helpers library for easy theming with [StyledComponents](https://styled-components.com), [ReactJSS](http://cssinjs.org/react-jss), [StyledJSS](http://cssinjs.org/styled-jss)\n\n\n## Installation\n\n```bash\nnpm install --save themz\n```\n\n## Usage\n\nJust import named functions.\n\n```js\nimport {\n  theme,\n  cond,\n  breakpoint,\n  palette,\n  size,\n  propIfElse,\n  propIf,\n} from 'themz'\n```\n\nAnd define theme object\n\n```js\nconst theme = {\n  palette: {\n    primary: '#ff0',\n    primaryLight: '#ff9',\n    accent: '#f00',\n    accentDark: '#900',\n  },\n  breakpoints: {\n    mobile: {\n      small: '320px',\n      middle: '480px',\n    },\n    desktop: {\n      wide: '1920px',\n    },\n  },\n  sizes: {\n    large: '22px',\n    middle: '15px',\n    small: '8px',\n\n    control: '12px',\n  },\n}\n```\n\n### StyledComponents\n\n```js\nimport styled from 'styled-components'\nimport { palette, size } from 'themz'\n\nexport const Button = styled.button`\n  border: none;\n  padding: ${size('middle')};\n  background-color: ${palette('accent')};\n`\n```\n\n### ReactJSS\n\n```js\nimport React from 'react'\nimport injectSheet from 'react-jss'\nimport { propIfElse, palette, size } from 'themz'\n\nconst styles = {\n  button: {\n    backgroundColor: propIfElse('accent', palette('accent'), palette('control', 'Light')),\n    padding: size('middle'),\n  }\n}\n\nconst Button = ({ classes, children }) =\u003e (\n  \u003cbutton className={classes.button}\u003e\n    {children}\n  \u003c/button\u003e\n)\n\nexport default injectSheet(styles)(Button)\n```\n\n### StyledJSS\n\n```js\nimport styled from 'styled-jss'\nimport { propIf, palette, breakpoint } from 'themz'\n\nexport const Button = styled('button')({\n  boxShadow: propIf('shadowed', `1px 1px 5px -1px black`),\n  backgroundColor: palette('accent', 'Dark'),\n  width: breakpoint('mobile', 'small'),\n})\n```\n\n\n## API\n\nSee [tests](/test/index.js)\n\n### theme\n\nJust select properties from `theme` property\n\n```js\nconst styles = {\n  value: theme('palette'), // will be object\n  color: theme(['palette', 'accentLight']), // like: palette('accent', 'Light')\n  width: theme(['width', 'control', 'medium']), // same as: props =\u003e props.theme.width.control.medium\n}\n```\n\n### cond\n\nApply value if property exists in props object\n\n```js\nconst styles = {\n  backgroundColor: cond('opened', ['palette', 'accent']),\n  textDecoration: cond('active', 'underline'),\n}\n```\n\n### breakpoint\n\nSimple select breakpoint from theme. (Default size is `medium`)\n\n```js\nconst Demo = styled.div`\n  @media screen and (max-width: ${breakpoint('desktop')}) {\n    padding: ${size('controlPadding')};\n  }\n\n  @media screen and (max-width: ${breakpoint('desktop', 'small')}) {\n    padding: ${size('controlSmall')};\n  }\n`\n```\n\n### palette\n\nSelect color from theme. By default shade is `''`\n\n```js\nconst styles = {\n  backgroundColor: palette('accent', 'Light'), // same as props =\u003e props.theme.palette.accentLight\n  color: palette('black'), // props =\u003e props.theme.palette.black\n}\n```\n\n### size\n\nGet size from `theme.sizes`\n\n```js\nconst styles = {\n  width: size('block1/2'), // props =\u003e props.theme.sizes['block1/2']\n}\n```\n\n### propIf\n\nExecute condition, and it `true` return branch\n\n```js\nconst styles = {\n  padding: propIf(props =\u003e props.type === 'global', size('controlLarge')),\n  color: propIf('active', palette('secondary', 'Light')),\n  boxShadow: propIf('active', '1px 0 9px -1px #121412'),\n}\n```\n\n### propIfElse\n\n```js\nconst styles = {\n  padding: propIf(\n    props =\u003e props.type === 'global',\n    size('controlLarge'),\n    size('controlMedium')\n  ),\n  color: propIf('active', palette('secondary', 'Light'), palette('accent')),\n  boxShadow: propIf('active', '1px 0 9px -1px #121412', 'none'),\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsergeysova%2Fthemz","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsergeysova%2Fthemz","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsergeysova%2Fthemz/lists"}