{"id":41916280,"url":"https://github.com/ericrav/theme-party","last_synced_at":"2026-01-25T16:23:53.523Z","repository":{"id":237038502,"uuid":"656936552","full_name":"ericrav/theme-party","owner":"ericrav","description":"React theme provider: swap styles or entire component layouts","archived":false,"fork":false,"pushed_at":"2024-09-16T18:30:35.000Z","size":111805,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-09-16T22:56:12.860Z","etag":null,"topics":["react","theme","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/ericrav.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":"2023-06-22T00:48:51.000Z","updated_at":"2024-09-16T18:25:52.000Z","dependencies_parsed_at":"2024-09-16T22:25:40.174Z","dependency_job_id":null,"html_url":"https://github.com/ericrav/theme-party","commit_stats":null,"previous_names":["ericrav/theme-party"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/ericrav/theme-party","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericrav%2Ftheme-party","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericrav%2Ftheme-party/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericrav%2Ftheme-party/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericrav%2Ftheme-party/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ericrav","download_url":"https://codeload.github.com/ericrav/theme-party/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericrav%2Ftheme-party/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28755267,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-25T13:59:49.818Z","status":"ssl_error","status_checked_at":"2026-01-25T13:59:33.728Z","response_time":113,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["react","theme","typescript"],"created_at":"2026-01-25T16:23:50.688Z","updated_at":"2026-01-25T16:23:53.515Z","avatar_url":"https://github.com/ericrav.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Theme Party](docs/public/logo.png)\n\n# Theme Party\n\n\u003ca href=\"https://www.npmjs.com/package/theme-party\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/theme-party\"\u003e\n\u003c/a\u003e\n\n\nTheme Party is an unstyled \u0026 unopinionated method of providing an interchangeable theme to React apps.\nYou can structure your theme objects however you like, and use any styling engine. Themes can override primitive values (such as colors \u0026 fonts)\nas well as swap out entire components for more complex layout differences between themes.\n\n## Quick Start\n\nTheme Party has the following major exports:\n- `ThemeParty`\n- `ThemeProvider`\n- `useTheme`\n- `costumed`\n\n### Install\n\n```\nyarn add theme-party\n```\n\n### Make your first theme party\n\nCreate your first `ThemeParty` instance. This is generally where you should define the shape of your theme\nand the types \u0026 names of design tokens/primitives you will use. This an example, you can use any shape or token names.\nIf you're using TypeScript, the instance will infer the type of your theme object.\n\n```ts\nimport { ThemeParty } from 'theme-party';\n\nexport const myThemeParty = new ThemeParty({\n  color: {\n    primary: '#85FFC7',\n    secondary: '#297373',\n    accent: '#FF8552',\n    ghost: '#E6E6E6',\n    text: '#39393A',\n    link: theme =\u003e theme.color.primary,\n  },\n  spacing: {\n    sm: '4px',\n    md: '8px',\n    lg: '16px',\n  },\n  typography: {\n    sans: 'Arial',\n    serif: 'Georgia',\n  },\n});\n```\n\nThis instance can act as your default theme.\n\nIf you're using TypeScript, make your custom theme shape available to other `theme-party` utils by adding to the above:\n\n```ts\ndeclare module 'theme-party' {\n  interface UserTheme {\n    default: typeof myThemeParty;\n  }\n}\n```\n\n### Create an alternate theme\n\nCreate another theme by extending your first with overrides.\n\n```ts\nconst myOtherTheme = myThemeParty.createTheme({\n  color: {\n    primary: '#CE2D4F', // this will update both the primary color and the link color (since link points to primary)\n    secondary: theme =\u003e theme.color.accent,\n  },\n});\n```\n\n### Add a theme provider to your React app\n\n```tsx\nimport { ThemeProvider } from 'theme-party';\n\nexport function App() {\n  const [theme, setTheme] = useState(myThemeParty);\n\n  return (\n    \u003cThemeProvider theme={theme}\u003e\n      // ...\n      \u003cbutton onClick={() =\u003e setTheme(myOtherTheme)}\u003e\n        Change theme\n      \u003c/button\u003e\n    \u003c/ThemeProvider\u003e\n  );\n}\n```\n\n`ThemeProvider` takes a `ThemeParty` instance as its `theme` prop.\nIt can be nested further down in your component hierarchy to override the theme for its children.\n\n### Use theme values in your components\n\nUse the `useTheme` hook to retrieve your active theme's values.\nThis can be combined with any method of styling such as Emotion or Tailwind.\n\n```tsx\nimport { useTheme } from 'theme-party';\n\nexport function Link({ children }) {\n  const theme = useTheme();\n\n  return (\n    \u003ca style={{ color: theme.color.link }}\u003e\n      {children}\n    \u003c/a\u003e\n  );\n}\n\n```\n\n### Replace components (\"costuming\")\n\nCreate a \"costumed\" component containing your default markup.\n\n```tsx\nimport { costumed } from 'theme-party';\n\ninterface Props {\n  name: string;\n}\n\nexport const MyComponent = costumed\u003cProps\u003e(function MyComponent({ name }) {\n  return \u003ch1\u003eHello, {name}\u003c/h1\u003e;\n});\n```\n\nIn your theme, replace the component with another by calling `useComponent` with the original costumed component above and a replacement component that matches the same props;\n\n```tsx\nmyOtherTheme.useComponent(MyComponent, ({ name }) =\u003e (\n  \u003cdiv\u003e\n    \u003cimg src={`/generate-img?name=${name}`} /\u003e\n  \u003c/div\u003e\n));\n```\n\nThen render the original component anywhere in your app. If the active theme has its own version of the component, it will be rendered in its place.\n\n```tsx\nfunction Page() {\n  return (\n    \u003cMyComponent name=\"World\" /\u003e\n  );\n}\n```\n\n### Theme overrides\n\nSometimes, you might want to override a single theme value, while inheriting the rest of the current theme.\n\n```tsx\nimport { ThemeOverride, ThemePartyConfig } from 'theme-party';\n\nconst override: ThemePartyConfig = { color: { link: 'blue' } };\nfunction Component() {\n  return (\n    \u003cThemeOverride value={override}\u003e\n      \u003cLink\u003eClick me\u003c/Link\u003e\n    \u003c/ThemeOverride\u003e\n  );\n}\n```\n\nThis creates a temporary theme that preserves the rest of the values of the currently selected theme.\n\nNote: the object passed to value must be stable across renders. Either use a constant or memoize the object.\n\n## Contributing\n\n### Releasing\n\nIn pull request branch, run\n\n```\nyarn version [patch|minor|major] --deferred\n```\n\nand commit yarn version file. When PR is merged, the package version will\nbe updated accordingly. See [Yarn Release Workflow](https://yarnpkg.com/features/release-workflow) for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fericrav%2Ftheme-party","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fericrav%2Ftheme-party","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fericrav%2Ftheme-party/lists"}