{"id":25763872,"url":"https://github.com/bernankez/theme-generator","last_synced_at":"2026-03-04T01:09:57.599Z","repository":{"id":246814495,"uuid":"785285031","full_name":"Bernankez/theme-generator","owner":"Bernankez","description":"Choose a color scheme for your website.","archived":false,"fork":false,"pushed_at":"2024-09-12T03:36:36.000Z","size":268,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-20T11:49:51.889Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://theme-generator.keke.cc","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Bernankez.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2024-04-11T15:19:28.000Z","updated_at":"2024-09-12T03:36:37.000Z","dependencies_parsed_at":"2024-09-12T13:07:13.774Z","dependency_job_id":null,"html_url":"https://github.com/Bernankez/theme-generator","commit_stats":null,"previous_names":["bernankez/theme-generator"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bernankez%2Ftheme-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bernankez%2Ftheme-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bernankez%2Ftheme-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bernankez%2Ftheme-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Bernankez","download_url":"https://codeload.github.com/Bernankez/theme-generator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240926502,"owners_count":19879763,"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":"2025-02-26T20:19:30.451Z","updated_at":"2026-03-04T01:09:52.577Z","avatar_url":"https://github.com/Bernankez.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🌈 theme-generator\n\nChoose a color scheme for your website.\n\nYou can visit [theme-generator](https://theme-generator.keke.cc) to get a real-time preview.\n\n## Features\n\n- Config different colors for light and dark mode.\n- Real-time preview of theme effects.\n- Auto generate theme via a primary color.\n- Support exporting as CSS variables, UnoCSS or TailwindCSS config.\n- Color tokens for different UI frameworks adaptation. (WIP)\n- Provide API usage.\n\n## API Usage\n\n\u003e [!WARNING]\n\u003e The API is still unstable and may have breaking change in the future.\n\n### Install\n\n```sh\nnpm i @bernankez/theme-generator\n```\n\nIn your project\n\n```ts\nimport { defaultColors, defineTheme } from \"@bernankez/theme-generator\";\n\nconst theme = defineTheme({\n  defaults: defaultColors\n});\n\nconsole.log(theme);\n// {\n//   colors: {\n//     background: {\n//       light: \"#ffffff\",\n//       dark: \"#0a0a0a\",\n//     },\n//     foreground: {\n//       light: \"#0a0a0a\",\n//       dark: \"#fafafa\",\n//     },\n//     primary: {\n//       light: \"#171717\",\n//       dark: \"#fafafa\",\n//     },\n//     primaryForeground: {\n//       light: \"#fafafa\",\n//       dark: \"#171717\",\n//     },\n//     secondary: {\n//       light: \"#f5f5f5\",\n//       dark: \"#262626\",\n//     },\n//     secondaryForeground: {\n//       light: \"#171717\",\n//       dark: \"#fafafa\",\n//     },\n//     accent: {\n//       light: \"#f5f5f5\",\n//       dark: \"#262626\",\n//     },\n//     accentForeground: {\n//       light: \"#171717\",\n//       dark: \"#fafafa\",\n//     },\n//     muted: {\n//       light: \"#f5f5f5\",\n//       dark: \"#262626\",\n//     },\n//     mutedForeground: {\n//       light: \"#737373\",\n//       dark: \"#fafafa\",\n//     },\n//     border: \"#e5e7eb\",\n//     info: \"#00b3f0\",\n//     infoForeground: \"#ffffff\",\n//     success: \"#00a96f\",\n//     successForeground: \"#ffffff\",\n//     warning: \"#ffc22d\",\n//     warningForeground: \"#000000\",\n//     error: \"#ff6f70\",\n//     errorForeground: \"#ffffff\",\n//   },\n//   radius: \"0.5rem\",\n// }\n```\n\n`defaultColors` is the `Neutral` theme of `shadcn`, you can also pass your own color variables, and the remaining variables will be merged with `defaultColors`. The values in `overrides` have a higher priority than those in `defaults`.\n\n### defineTheme\n\nThe function of defining themes. You can pass in your own color variables, or use the built-in `defaultColors` as defaults. You can also use `inferThemeFromColor` below to generate a theme as `defaults`.\n\n```ts\nexport declare function defineTheme(options: DefineThemeOptions): Theme;\n\nexport interface DefineThemeOptions {\n  defaults: AcceptableTheme;\n  overrides?: Partial\u003cAcceptableTheme\u003e;\n}\n\nexport type AcceptableTheme = {\n  colors: Partial\u003cRecord\u003cColorKeywords, Color | string\u003e\u003e;\n} \u0026 {\n  [key in ShapeKeywords]?: string\n};\n\nexport type Theme = {\n  colors: Record\u003cColorKeywords, Color\u003e;\n} \u0026 {\n  [key in ShapeKeywords]: string;\n};\n```\n\n### inferThemeFromColor\n\nAuto generate a theme from a primary color.\n\n```ts\nexport declare function inferThemeFromColor(themeColor: string): Theme;\n```\n\n### Preset\n\n`@bernankez/theme-generator` adapts to different UI frameworks through presets. It currently exports `presetNone` and `presetShadcn`. You can adapt your own UI framework through preset.\n\n#### presetNone\n\n```ts\nexport declare function presetNone(theme: Theme, options?: PresetNoneOptions): { theme: Theme; style: { light: Record\u003cstring, string\u003e; dark: Record\u003cstring, string\u003e }; unocss: Theme; tailwind: TailwindTheme };\n\nexport interface PresetNoneOptions {\n  cssPrefix?: string;\n}\n```\n\n#### presetShadcn\n\n```ts\nexport declare function presetShadcn(theme: Theme, options?: PresetShadcnOptions): { theme: ShadcnTheme; style: { light: Record\u003cstring, string\u003e; dark: Record\u003cstring, string\u003e }; unocss: Theme; tailwind: TailwindTheme };\n\nexport interface PresetShadcnOptions {\n  cssPrefix?: string;\n}\n```\n\n## Thanks\n\nThis project is inspired by\n\n- [prism-theme-vars](https://github.com/antfu/prism-theme-vars)\n- [Realtime Colors](https://www.realtimecolors.com)\n\n## License\n\n[MIT](LICENSE) License © [科科Cole](https://github.com/Bernankez)\n\n## Roadmap\n\nhttps://github.com/Bernankez/theme-generator/issues/1\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbernankez%2Ftheme-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbernankez%2Ftheme-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbernankez%2Ftheme-generator/lists"}