{"id":15491505,"url":"https://github.com/diegohaz/styled-theme","last_synced_at":"2025-04-06T18:16:14.808Z","repository":{"id":57373395,"uuid":"78586709","full_name":"diegohaz/styled-theme","owner":"diegohaz","description":"Extensible theming system for styled-components 💅","archived":false,"fork":false,"pushed_at":"2017-12-02T00:06:28.000Z","size":108,"stargazers_count":181,"open_issues_count":8,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-19T10:04:59.045Z","etag":null,"topics":["css-in-js","font","palette","react","sizes","styled-components","theme"],"latest_commit_sha":null,"homepage":"https://diegohaz.github.io/styled-theme","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/diegohaz.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}},"created_at":"2017-01-11T00:16:40.000Z","updated_at":"2024-09-04T03:28:17.000Z","dependencies_parsed_at":"2022-09-17T16:21:25.317Z","dependency_job_id":null,"html_url":"https://github.com/diegohaz/styled-theme","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diegohaz%2Fstyled-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diegohaz%2Fstyled-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diegohaz%2Fstyled-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diegohaz%2Fstyled-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/diegohaz","download_url":"https://codeload.github.com/diegohaz/styled-theme/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247526764,"owners_count":20953143,"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":["css-in-js","font","palette","react","sizes","styled-components","theme"],"created_at":"2024-10-02T07:54:07.581Z","updated_at":"2025-04-06T18:16:14.776Z","avatar_url":"https://github.com/diegohaz.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# styled-theme 💅🏿\n\n[![Generated with nod](https://img.shields.io/badge/generator-nod-2196F3.svg?style=flat-square)](https://github.com/diegohaz/nod)\n[![NPM version](https://img.shields.io/npm/v/styled-theme.svg?style=flat-square)](https://npmjs.org/package/styled-theme)\n[![Build Status](https://img.shields.io/travis/diegohaz/styled-theme/master.svg?style=flat-square)](https://travis-ci.org/diegohaz/styled-theme) [![Coverage Status](https://img.shields.io/codecov/c/github/diegohaz/styled-theme/master.svg?style=flat-square)](https://codecov.io/gh/diegohaz/styled-theme/branch/master)\n\nTheming system for [styled-components 💅](https://github.com/styled-components/styled-components)\n\n## Install\n\n    $ npm install --save styled-theme\n\n## Usage\n\nPlay with it on [WebpackBin](https://www.webpackbin.com/bins/-KeZfaFl3_761CAGa0CC)\n```js\nimport styled from 'styled-components'\nimport { font, palette } from 'styled-theme' \n\nconst Text = styled.span`\n  font-family: ${font('primary')};\n  background-color: ${palette(1)};\n  color: ${palette('grayscale', 0, true)};\n`\n\nText.defaultProps = {\n  palette: 'primary'\n}\n```\n\n```jsx\n\u003cText\u003eHello\u003c/Text\u003e\n```\n\n![image](https://cloud.githubusercontent.com/assets/3068563/21835155/f92c4a74-d7a1-11e6-85c1-93d6e447f98a.png)\n\n```jsx\n\u003cText reverse\u003eHello\u003c/Text\u003e\n```\n\n![image](https://cloud.githubusercontent.com/assets/3068563/21835169/18b3ea28-d7a2-11e6-8f3f-2fc76c706f45.png)\n\n```jsx\n\u003cText palette=\"secondary\"\u003eHello\u003c/Text\u003e\n```\n\n![image](https://cloud.githubusercontent.com/assets/3068563/21835195/350f4514-d7a2-11e6-9095-4e30d04b3d61.png)\n\n### Provide your own theme\n\n```jsx\nimport { ThemeProvider } from 'styled-components'\n\nconst xmasTheme = {\n  fonts: {\n    primary: 'Georgia, serif'\n  },\n  palette: {\n    // red gradient\n    primary: ['#D32F2F', '#F44336', '#F8877F', '#FFCDD2']\n  }\n}\n\n\u003cThemeProvider theme={xmasTheme}\u003e\n  \u003cText\u003eHello\u003c/Text\u003e\n\u003c/ThemeProvider\u003e\n```\n\n![image](https://cloud.githubusercontent.com/assets/3068563/21835499/a49b94bc-d7a4-11e6-9cf3-ab41519cd962.png)\n\n## Default theme structure\n\nThis is the content of [`src/theme.js`](src/theme.js):\n\n```js\nimport coolorsToHex from 'coolors-to-hex'\nimport { reversePalette } from './composer'\n\nconst theme = {}\n\ntheme.palette = {\n  primary: coolorsToHex('https://coolors.co/1976d2-2196f3-71bcf7-97cef9-c2e2fb'),\n  secondary: coolorsToHex('https://coolors.co/c2185b-e91e63-f06292-f48caf-f8bbd0'),\n  danger: coolorsToHex('https://coolors.co/d32f2f-f44336-f8877f-f9a7a1-ffcdd2'),\n  alert: coolorsToHex('https://coolors.co/ffa000-ffc107-ffd761-ffecb3-fff2ce'),\n  success: coolorsToHex('https://coolors.co/388e3c-4caf50-7cc47f-9fd4a1-c8e6c9'),\n  grayscale: ['#212121', '#616161', '#9e9e9e', '#bdbdbd', '#e0e0e0', '#ffffff']\n}\n\ntheme.reversePalette = reversePalette(theme.palette)\n\ntheme.fonts = {\n  primary: 'Helvetica Neue, Helvetica, Roboto, sans-serif',\n  pre: 'Consolas, Liberation Mono, Menlo, Courier, monospace',\n  quote: 'Georgia, serif'\n}\n\ntheme.sizes = {\n  maxWidth: '1100px'\n}\n\nexport default theme\n```\n\n[`reversePalette`](#reversePalette) is a helper method. Import it from `styled-theme/composer`.\n\n## API\n\n\u003c!-- Generated by documentation.js. Update this documentation by updating the source code. --\u003e\n\n### reversePalette\n\nRevert the palette\n\n**Parameters**\n\n-   `palette` **[Palette](#palette)** \n\n**Examples**\n\n```javascript\nreversePalette({ primary: ['red', 'yellow', 'green'] })\n// { primary: ['green', 'yellow', 'red'] }\n```\n\nReturns **[Palette](#palette)** \n\n### key\n\nReturns the value of `props.theme[path]` or `styledTheme[path]`\n\n**Parameters**\n\n-   `path` **([string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) \\| [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)\u0026lt;[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)\u003e)** \n-   `defaultValue` **any** \n\n**Examples**\n\n```javascript\nconst Button = styled.button`\n font-family: ${key('fonts.primary')};\n color: ${key(['colors', 'primary', 0])};\n`\n```\n\nReturns **any** \n\n### font\n\nShorthand to `key(['fonts', path])`\n\n**Parameters**\n\n-   `path` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** \n-   `defaultValue` **any** \n\n**Examples**\n\n```javascript\nconst Button = styled.button`\n font-family: ${font('primary')};\n`\n```\n\nReturns **[Font](#font)** \n\n### size\n\nShorthand to `key(['sizes', path])`\n\n**Parameters**\n\n-   `path` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** \n-   `defaultValue` **any** \n\n**Examples**\n\n```javascript\nconst Button = styled.button`\n padding: ${size('padding')};\n`\n```\n\nReturns **[Size](#size)** \n\n### palette\n\nReturns the value of `props.theme[palette || reversePalette][path][index]` or\n`styledTheme[palette || reversePalette][path][index]` (default theme)\n\nThe arguments can be passed in any order, as long as types are kept.\n\n**Parameters**\n\n-   `index` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** The index of tone in theme palette tones array\n-   `path` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** The key of the tones in theme palette object (optional, default `props.palette`)\n-   `exceptions` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)?** An object with path as key and index as value\n-   `reverse` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)?** Flag to return tone from `reversePalette` or `palette`\n-   `defaultValue` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** Default value\n-   `args` **...any** \n\n**Examples**\n\n```javascript\n// index = 1\n// exception = { grayscale: 0 }\n// reverse = true\nconst Button = styled.button`\n background-color: ${palette({ grayscale: 0 }, 1, true)};\n`\n\n// renders props.theme.reversePalette.grayscale[0]\n\u003cButton palette=\"grayscale\" /\u003e\n\n// renders props.theme.palette.danger[1] (nullify reverse)\n\u003cButton palette=\"danger\" reverse /\u003e\n```\n\nReturns **[Tones](#tones)** \n\n### Tone\n\nType: [string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)\n\n### Tones\n\nType: [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)\u0026lt;[Tone](#tone)\u003e\n\n### Font\n\nType: [string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)\n\n### Size\n\nType: [string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)\n\n### Palette\n\nType: {}\n\n### Fonts\n\nType: {}\n\n### Sizes\n\nType: {}\n\n### Theme\n\nType: {palette: [Palette](#palette)?, reversePalette: [Palette](#palette)?, fonts: [Fonts](#fonts)?, sizes: [Sizes](#sizes)?}\n\n## Related\n\n-   [styled-tools](https://github.com/diegohaz/styled-tools) - Utilities for styled-components (like lodash)\n\n## License\n\nMIT © [Diego Haz](https://github.com/diegohaz)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiegohaz%2Fstyled-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdiegohaz%2Fstyled-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiegohaz%2Fstyled-theme/lists"}