{"id":18143561,"url":"https://github.com/ewgenius/tailwindcss-variable-themes","last_synced_at":"2025-04-23T00:48:17.230Z","repository":{"id":65515478,"uuid":"593521459","full_name":"ewgenius/tailwindcss-variable-themes","owner":"ewgenius","description":"TailwindCSS plugin for defining themes based on css variables","archived":false,"fork":false,"pushed_at":"2024-07-07T15:01:46.000Z","size":251,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T20:43:25.178Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://tailwindcss-variable-themes.vercel.app/custom","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/ewgenius.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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-01-26T07:57:54.000Z","updated_at":"2024-08-28T15:04:18.000Z","dependencies_parsed_at":"2024-11-16T05:01:33.906Z","dependency_job_id":"e6fc2f61-339b-401e-b45a-6f7fc6a70ea3","html_url":"https://github.com/ewgenius/tailwindcss-variable-themes","commit_stats":{"total_commits":29,"total_committers":1,"mean_commits":29.0,"dds":0.0,"last_synced_commit":"1f22429b568f99f381bb62834155a6953d5021b7"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ewgenius%2Ftailwindcss-variable-themes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ewgenius%2Ftailwindcss-variable-themes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ewgenius%2Ftailwindcss-variable-themes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ewgenius%2Ftailwindcss-variable-themes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ewgenius","download_url":"https://codeload.github.com/ewgenius/tailwindcss-variable-themes/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250252827,"owners_count":21400073,"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":[],"created_at":"2024-11-01T19:08:03.369Z","updated_at":"2025-04-23T00:48:17.208Z","avatar_url":"https://github.com/ewgenius.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tailwindcss-variable-themes\n\nTailwindCSS plugin for setting up multiple themes based on css variables\n\n\u003cimg width=\"1582\" alt=\"CleanShot 2023-01-27 at 00 09 22@2x\" src=\"https://user-images.githubusercontent.com/827338/214940044-6b32f395-9f46-4ae5-b49c-cbc5f2cd190d.png\"\u003e\n\n## Examples\n\nhttps://tailwindcss-variable-themes.vercel.app/custom ([code](apps/example/tailwind-custom.config.js))\n\nhttps://tailwindcss-variable-themes.vercel.app/radix-colors ([code](apps/example/tailwind-radix.config.js))\n\nhttps://tailwindcss-variable-themes.vercel.app/radix-semantic ([code](apps/example/tailwind-radix-semantic.config.js))\n\nhttps://tailwindcss-variable-themes.vercel.app/tailwind-colors ([code](apps/example/tailwind-tailwind.config.js))\n\n## Installation\n\nInstall the plugin from npm:\n\n```sh\nnpm install -D tailwindcss-variable-themes\n```\n\nThen add the plugin to your tailwind.config.js file:\n\n```js\nconst tailwindThemePlugin = require(\"tailwindcss-variable-themes\");\n\nmodule.exports = {\n  theme: {\n    // ...\n  },\n  plugins: [\n    tailwindThemePlugin({\n      themes: {\n        light: {\n          primary: {\n            foreground: \"#000\",\n            background: \"#fff\",\n            // ...\n          },\n          accent: {\n            // ...\n          },\n        },\n\n        dark: {\n          // ...\n        },\n      },\n    }),\n  ],\n};\n```\n\nAdd theme class to the root of your application:\n\n```html\n\u003cbody class=\"theme-light\"\u003e\n  \u003c!-- ... --\u003e\n\u003c/body\u003e\n```\n\n## Configuration\n\n### `themes: object` (required)\n\nDictionary with theme declarations\n\n```js\nthemes: {\n  // light theme\n  light: {\n    // primary palette\n    primary: {\n      // primary palette colors\n      foreground: \"#000\",\n      background: \"#fff\",\n      // ...\n    },\n    // accent palette\n    accent: {\n      // ...\n    },\n  },\n\n  dark: {\n    primary: {\n      foreground: \"#fff\",\n      background: \"#000\",\n      // ...\n    }\n    // ...\n  },\n},\n```\n\n### `utilityPrefix: string` (optional, default = `\"theme\"`)\n\nPrefix for generated utility classes\n\nTheme, from previous example will generate following tailwind classes for setting up theme:\n\n```css\n.theme-light {\n  --primary-foreground: #000;\n  --primary-background: #fff;\n  /* ... */\n}\n\n.theme-dark {\n  --primary-foreground: #fff;\n  --primary-background: #000;\n  /* ... */\n}\n```\n\n### `varNameMapper: (key: string, i?: number) =\u003e string` (optional, default = `(key) =\u003e key`)\n\nYou can specify custom mapper, in case if you need more control over generated variable names\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fewgenius%2Ftailwindcss-variable-themes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fewgenius%2Ftailwindcss-variable-themes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fewgenius%2Ftailwindcss-variable-themes/lists"}