{"id":16865569,"url":"https://github.com/erikras/styled-components-theme","last_synced_at":"2025-04-05T04:14:12.337Z","repository":{"id":57373286,"uuid":"73746965","full_name":"erikras/styled-components-theme","owner":"erikras","description":"Defines themes via flexible color selectors for use with styled-components","archived":false,"fork":false,"pushed_at":"2019-12-10T17:13:50.000Z","size":199,"stargazers_count":306,"open_issues_count":7,"forks_count":17,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-14T14:47:39.463Z","etag":null,"topics":["color-manipulation","css","javascript","js","manipulation-methods","react","sass","scss","selector","styled-components","styles","styling","theme-color","themes"],"latest_commit_sha":null,"homepage":null,"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/erikras.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":"2016-11-14T21:08:32.000Z","updated_at":"2024-09-29T10:55:14.000Z","dependencies_parsed_at":"2022-08-29T14:42:19.455Z","dependency_job_id":null,"html_url":"https://github.com/erikras/styled-components-theme","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikras%2Fstyled-components-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikras%2Fstyled-components-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikras%2Fstyled-components-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikras%2Fstyled-components-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/erikras","download_url":"https://codeload.github.com/erikras/styled-components-theme/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247284951,"owners_count":20913704,"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":["color-manipulation","css","javascript","js","manipulation-methods","react","sass","scss","selector","styled-components","styles","styling","theme-color","themes"],"created_at":"2024-10-13T14:47:36.592Z","updated_at":"2025-04-05T04:14:12.310Z","avatar_url":"https://github.com/erikras.png","language":"JavaScript","readme":"[\u003cimg src=\"logo.jpg\" align=\"right\" class=\"logo\" height=\"300\" width=\"300\"/\u003e](https://github.com/erikras/styled-components-theme)\n\n# styled-components-theme\n---\n[![NPM Version](https://img.shields.io/npm/v/styled-components-theme.svg?style=flat-square)](https://www.npmjs.com/package/styled-components-theme)\n[![NPM Downloads](https://img.shields.io/npm/dm/styled-components-theme.svg?style=flat-square)](https://www.npmjs.com/package/styled-components-theme)\n[![Build Status](https://img.shields.io/travis/erikras/styled-components-theme/master.svg?style=flat-square)](https://travis-ci.org/erikras/styled-components-theme)\n[![codecov.io](https://codecov.io/github/erikras/styled-components-theme/coverage.svg?branch=master)](https://codecov.io/github/erikras/styled-components-theme?branch=master)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n[`styled-components-theme`](https://github.com/erikras/styled-components-theme) generates \nselectors for colors in your\n[`styled-components`](https://github.com/styled-components/styled-components) theme that allows\ncolor manipulation, using the [`color`](https://github.com/qix-/color) library via calls on the\nselectors themselves.\n\nA **selector**, in this context, is defined as a function that looks like\n`(props) =\u003e props.theme.myColor` that the `styled-components` library [accepts as a template\nvariable](https://github.com/styled-components/styled-components/blob/master/docs/theming.md#using-theming).\n\n---\n\n\n\n## Why?\n\n`styled-components` is an awesome library, and their React context-based theming scheme is great, \nbut:\n\n1. Having `${(props) =\u003e props.theme.highlight}` functions all over your template literals to use \n   any of your theme colors is both hard to read and cumbersome to type.\n\n2. In migrating from SASS and CSS Modules, I missed the ability to `lighten()` or `darken()` or \n   `transparentize()` a theme color at will to make subtle gradients or overlays.\n\n---\n\n## Installation\n\nUsing [npm](https://www.npmjs.org/):\n\n```bash\n  $ npm install --save styled-components-theme\n```\n\nUsing [yarn](https://yarnpkg.com/):\n\n```bash\n  $ yarn add styled-components-theme\n```\n\n---\n\n## Usage\n\n#### 1) Define your theme colors\n\n```jsx\n// colors.js\n\nconst colors = {\n  main:  '#393276',\n  dark:  '#0D083B',\n  light: '#837EB1'\n}\n\nexport default colors\n```\n\n#### 2) Apply your theme with [`ThemeProvider`](https://github.com/styled-components/styled-components/blob/master/docs/theming.md)\n\n```jsx\nimport { ThemeProvider } from 'styled-components';\nimport colors from './colors' // from Step #1\n\nconst App = props =\u003e\n  \u003cThemeProvider theme={colors}\u003e\n    {props.children}\n  \u003c/ThemeProvider\u003e\n\n```\n\n#### 3) Create an importable theme object using `styled-components-theme`\n\n```jsx\n// theme.js\n\nimport createTheme from 'styled-components-theme';\nimport colors from './colors' // from Step #1\n\nconst theme = createTheme(...Object.keys(colors))\nexport default theme\n```\n\n#### 4) Use the theme colors in your components\n\n```jsx\nimport styled from 'styled-components'\nimport theme from './theme' // from Step #3\n\nconst Header = styled.div`\n  background: ${theme.dark};\n  color: ${theme.light};\n`\n\nconst Button = styled.button`\n  background-image: linear-gradient(${theme.light}, ${theme.light.darken(0.3)});\n  color: ${theme.dark};\n  padding: 10px;\n`\n```\n\n---\n\n## Available manipulation functions\n\nThis library uses [the color manipulation provided by the\n`color` library](https://github.com/qix-/color#manipulation).\n\n```js\ntheme.color.negate()         // rgb(0, 100, 255) -\u003e rgb(255, 155, 0)\n\ntheme.color.lighten(0.5)     // hsl(100, 50%, 50%) -\u003e hsl(100, 50%, 75%)\ntheme.color.darken(0.5)      // hsl(100, 50%, 50%) -\u003e hsl(100, 50%, 25%)\n\ntheme.color.saturate(0.5)    // hsl(100, 50%, 50%) -\u003e hsl(100, 75%, 50%)\ntheme.color.desaturate(0.5)  // hsl(100, 50%, 50%) -\u003e hsl(100, 25%, 50%)\ntheme.color.greyscale()      // #5CBF54 -\u003e #969696\n\ntheme.color.whiten(0.5)      // hwb(100, 50%, 50%) -\u003e hwb(100, 75%, 50%)\ntheme.color.blacken(0.5)     // hwb(100, 50%, 50%) -\u003e hwb(100, 50%, 75%)\n\ntheme.color.fade(0.5)        // rgba(10, 10, 10, 0.8) -\u003e rgba(10, 10, 10, 0.4)\ntheme.color.opaquer(0.5)     // rgba(10, 10, 10, 0.8) -\u003e rgba(10, 10, 10, 1.0)\n\ntheme.color.rotate(180)      // hsl(60, 20%, 20%) -\u003e hsl(240, 20%, 20%)\ntheme.color.rotate(-90)      // hsl(60, 20%, 20%) -\u003e hsl(330, 20%, 20%)\n\ntheme.color.mix(theme.otherColor, 0.2) // rgb(0, 0, 255) * 0.8 + rgb(0, 255, 0) * 0.2 -\u003e rgb(0, 51, 204)\n```\n\n---\n\n## FAQ\n\n### Why use `color`? Why not [other color manipulation library]?\n\nBecause `color`'s manipulation methods were so influenced by SASS, LESS and\nStylus, they are already familiar to CSS coders.\n\n### Isn't `Color` mutable? Don't I need to `clone()`?\n\nYes, `Color` is mutable, but this library handles the cloning for you, so\nyou can chain the manipulation methods together to your heart's content\nwithout mutating the original theme color. e.g.\n`theme.primary.saturate(0.3).lighten(0.2).fade(0.4)`.\n\n**The manipulation methods in `styled-components-theme` are *immutable***.\n\n---\n\nMade with ❤️ in 🇪🇸 by [@erikras](https://twitter.com/erikras).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferikras%2Fstyled-components-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferikras%2Fstyled-components-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferikras%2Fstyled-components-theme/lists"}