{"id":17617560,"url":"https://github.com/danestves/strapi-plugin-colorpicker","last_synced_at":"2025-10-11T01:41:23.944Z","repository":{"id":41574868,"uuid":"324068819","full_name":"danestves/strapi-plugin-colorpicker","owner":"danestves","description":"A plugin for Strapi Headless CMS that provides colorpicker field","archived":false,"fork":false,"pushed_at":"2021-09-03T04:56:26.000Z","size":5168,"stargazers_count":33,"open_issues_count":4,"forks_count":10,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-30T17:11:45.765Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/danestves.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":"CODE-OF-CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"patreon":"danestves"}},"created_at":"2020-12-24T04:55:16.000Z","updated_at":"2023-11-02T06:37:06.000Z","dependencies_parsed_at":"2022-08-20T09:22:17.466Z","dependency_job_id":null,"html_url":"https://github.com/danestves/strapi-plugin-colorpicker","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danestves%2Fstrapi-plugin-colorpicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danestves%2Fstrapi-plugin-colorpicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danestves%2Fstrapi-plugin-colorpicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danestves%2Fstrapi-plugin-colorpicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danestves","download_url":"https://codeload.github.com/danestves/strapi-plugin-colorpicker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251748951,"owners_count":21637418,"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-10-22T19:14:27.306Z","updated_at":"2025-10-11T01:41:18.912Z","avatar_url":"https://github.com/danestves.png","language":"JavaScript","funding_links":["https://patreon.com/danestves"],"categories":[],"sub_categories":[],"readme":"## Strapi - Color Picker Field\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.org/package/strapi-plugin-colorpicker\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/strapi-plugin-colorpicker/latest.svg\" alt=\"NPM Version\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.org/package/strapi-plugin-colorpicker\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/strapi-plugin-colorpicker.svg\" alt=\"Monthly download on NPM\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nA plugin for [Strapi Headless CMS](https://github.com/strapi/strapi) that provides colorpicker field:\n\n![GIF as a demo](https://github.com/danestves/strapi-plugin-colorpicker/blob/main/public/assets/demo.gif?raw=true)\n\n### 🖐 Requirements\n\nComplete installation requirements are exact same as for Strapi itself and can be found in the documentation under \u003ca href=\"https://strapi.io/documentation/v3.x/installation/cli.html#step-1-make-sure-requirements-are-met\"\u003eInstallation Requirements\u003c/a\u003e.\n\n**Supported Strapi versions**:\n\n- Strapi \u003e= v3.3.x\n\n**We recommend always using the latest version of Strapi to start your new projects**.\n\n### ⏳ Installation\n\n```bash\n# npm\nnpm install strapi-plugin-colorpicker\n\n# yarn\nyarn add strapi-plugin-colorpicker\n```\n\n### ✏️ Usage\n\nComponent by default is not going to appear in the UI you need to enable manually. To enable the component in any content type you've to add the attribute in a configuration model json file (`*.settings.json`):\n\n```diff\n{\n  \"attributes\": {\n    \"background_color\": {\n-      \"type\": \"string\",\n+      \"type\": \"colorpicker\",\n+      \"columnType\": \"string\"\n    }\n  }\n}\n```\n\n⚠️⚠️ **Note:** because of how the field API is working at the moment, the data returned from your endpoint \u003e `background_color` will be a string and not a JSON object. You'll just have to parse the data in your front (`JSON.parse(background_color)`).\n\n### 📁 Copy required files [REQUIRED ⚠️]\n\n‼️**This step is required:** Until now Strapi doesn't offer a way to validate custom fields types and for that reason we need to edit manually the files of `content-type-builder` to make a corresponding validation of our new field.\n\nInside `strapi-files` we have a list of folders with the Strapi version, enter to the version that correspond with your installation, and you will see this files\n\n\u003cimg src=\"https://github.com/danestves/strapi-plugin-colorpicker/blob/main/public/assets/folder.png?raw=true\" alt=\"Folders\" /\u003e\n\nCopy the folder named content-type-builder inside your `\u003cproject-root\u003e/extensions` folder\n\n### 🚀 Run your project\n\nAfter successful installation you've to build a fresh package that includes plugin UI. To archive that simply use:\n\n```bash\n# npm\nnpm run build \u0026\u0026 npm run develop\n\n# yarn\nyarn build \u0026\u0026 yarn develop\n```\n\n### 📦 API Response\n\nHow i mentioned before the data is storing as a string because we don't have a API to manage JSON objects at this time, so for example when you make your REST api query or your query in GraphQL it will response with a string like this:\n\n```json\n{\n  \"id\": 1,\n  \"background_color\": \"{\\\"hex\\\":\\\"#007effff\\\",\\\"rgb\\\":{\\\"r\\\":0,\\\"g\\\":126,\\\"b\\\":255,\\\"a\\\":1},\\\"css\\\":\\\"rgba(0,126,255,1)\\\"}\",\n  \"published_at\": \"2020-12-24T16:50:00.815Z\",\n  \"created_at\": \"2020-12-24T16:49:06.795Z\",\n  \"updated_at\": \"2020-12-24T16:50:00.839Z\"\n}\n```\n\nSo in your frontend you can use `JSON.parse(myobject.background_color)` and will transform the string to this:\n\n```json\n{\n  \"hex\": \"#007effff\",\n  \"rgb\": {\n    \"r\": 0,\n    \"g\": 126,\n    \"b\": 255,\n    \"a\": 1\n  },\n  \"css\": \"rgba(0,126,255,1)\"\n}\n```\n\n✨ Done! Now you have `hex`, `rgba` and `css` to use in any frontend like you want\n\n## Contributing\n\nFeel free to fork and make a Pull Request to this plugin project. All the input is warmly welcome!\n\n## Community support\n\nFor general help using Strapi, please refer to [the official Strapi documentation](https://strapi.io/documentation/). For additional help, you can use one of these channels to ask a question:\n\n- [Slack](http://slack.strapi.io) We're present on official Strapi slack workspace. Look for @danestves and DM.\n- [GitHub](https://github.com/danestves/strapi-plugin-preview-content/issues) (Bug reports, Contributions, Questions and Discussions)\n\n## License\n\n[MIT License](LICENSE.md) Copyright (c) 2020 [Daniel Esteves](https://danestves.com/) \u0026amp; [Strapi Solutions](https://strapi.io/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanestves%2Fstrapi-plugin-colorpicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanestves%2Fstrapi-plugin-colorpicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanestves%2Fstrapi-plugin-colorpicker/lists"}