{"id":30409762,"url":"https://github.com/ferrywlto/theme-color-playground","last_synced_at":"2025-08-21T22:34:45.593Z","repository":{"id":303138444,"uuid":"1014473777","full_name":"ferrywlto/theme-color-playground","owner":"ferrywlto","description":"A tool mostly created by Copilot for myself to ease color matching in website design. ","archived":false,"fork":false,"pushed_at":"2025-08-09T12:29:30.000Z","size":573,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-08-09T14:30:00.113Z","etag":null,"topics":["front-end-development","web"],"latest_commit_sha":null,"homepage":"https://ferrywl.to/theme-color-playground/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ferrywlto.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,"zenodo":null}},"created_at":"2025-07-05T19:50:15.000Z","updated_at":"2025-08-09T12:29:34.000Z","dependencies_parsed_at":"2025-08-09T14:19:01.828Z","dependency_job_id":"63c4fbae-6963-43cf-9832-f475558aabdc","html_url":"https://github.com/ferrywlto/theme-color-playground","commit_stats":null,"previous_names":["verdantsparks/ai-theme-color-playground","verdantsparks/theme-color-playground","ferrywlto/theme-color-playground"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ferrywlto/theme-color-playground","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ferrywlto%2Ftheme-color-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ferrywlto%2Ftheme-color-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ferrywlto%2Ftheme-color-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ferrywlto%2Ftheme-color-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ferrywlto","download_url":"https://codeload.github.com/ferrywlto/theme-color-playground/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ferrywlto%2Ftheme-color-playground/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271554373,"owners_count":24779827,"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","status":"online","status_checked_at":"2025-08-21T02:00:08.990Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["front-end-development","web"],"created_at":"2025-08-21T22:34:43.106Z","updated_at":"2025-08-21T22:34:45.584Z","avatar_url":"https://github.com/ferrywlto.png","language":"JavaScript","funding_links":["https://www.paypal.com/paypalme/ferrywlto"],"categories":[],"sub_categories":[],"readme":"# Theme Color Playground\n\n\u003e 🎨 **Interactive Color System Explorer** - A modern web application for designing, testing, and exporting light/dark theme color schemes with real-time preview and accessibility-first design. Originally a tool created for personal use. If you find it useful, you may consider [buy me a bubble-tea. 🧋](https://www.paypal.com/paypalme/ferrywlto) \n\n[![Live Demo](https://img.shields.io/badge/🌐%20Live%20Demo-ferrywl.to-blue?style=for-the-badge)](https://ferrywl.to/theme-color-playground/)\n[![License: AGPL v3](https://img.shields.io/badge/License-AGPL%20v3-blue.svg?style=for-the-badge)](https://www.gnu.org/licenses/agpl-3.0)\n[![Built with Astro](https://img.shields.io/badge/Built%20with-Astro-orange?style=for-the-badge\u0026logo=astro)](https://astro.build)\n\n## 🎯 What is Theme Color Playground?\n\nA powerful, **framework-free** web application that lets you:\n- 🌗 **Design dual-theme color systems** (light \u0026 dark mode)\n- 🎨 **Interactive color picking** with real-time preview\n- 🎨 **Interactive gradient blending and suggestion** with real-time preview\n- 📱 **Mobile-first responsive design** that works everywhere\n- 💾 **Export/Import configurations** as JSON files\n- ♿ **Accessibility-compliant** with WCAG guidelines\n- 🔒 **Privacy-first** with minimal data collection\n\nPerfect for designers, developers, and anyone building modern web applications with theme support.\n\n## ✨ Key Features\n\n### 🎨 **Interactive Design Tools**\n- Real-time color picker with live preview\n- Instant theme switching (light ↔ dark)\n- CSS custom properties generation\n- Visual feedback for all color changes\n- Gradient blending playground to see real time gradient color\n- Gradient color suggestion on first color choice\n\n### 🎨 **Brand Color Sample**\n- Explore a curated list of brand color palettes.\n- See how different brand colors work in both light and dark themes.\n- Get inspiration for your own color schemes.\n- Understand the mood and reasoning behind the color choices.\n- Total 379 brands for selection. (Some are duplicates, clean up from time to time. With more to add in future.)\n\n### 📱 **Modern Web Standards**\n- Fully responsive design (mobile-first)\n- Semantic HTML5 structure\n- CSS Grid \u0026 Flexbox layouts\n- Progressive enhancement\n\n### 🔧 **Developer-Friendly**\n- Export theme configurations as JSON\n- Import and share color schemes\n- CSS custom properties ready-to-use\n- Zero framework dependencies (except build tools)\n\n### 🔒 **Privacy \u0026 Performance**\n- No tracking or personal data collection\n- Simple Analytics (GDPR compliant)\n- Static site generation for fast loading\n- Minimal JavaScript footprint\n\n## 🛠️ Tech Stack\n\n| Technology | Purpose | Why We Chose It |\n|------------|---------|-----------------|\n| **[Astro](https://astro.build)** | Static Site Generator | Zero JavaScript by default, excellent performance |\n| **Vanilla JavaScript** | Interactivity | No framework overhead, better performance |\n| **CSS Custom Properties** | Theme System | Native browser support, dynamic theming |\n| **[Simple Analytics](https://simpleanalytics.com)** | Privacy-first Analytics | GDPR compliant, no cookies |\n\n## 🚀 Quick Start\n\n```bash\n# Clone the repository\ngit clone https://github.com/ferrywlto/theme-color-playground.git\ncd theme-color-playground\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n\n# Build for production\nnpm run build\n\n# Preview production build\nnpm run preview\n```\n## JSON Schema\n\n### Brand Color Sample\nThe JSON schema used for storing brand sample colors was defined as below:\n```json\n[\n  {\n    \"name\" : \"Brand Name\",\n    \"theme\": \"light\",\n    \"mood\": \"Brilliant and bold\",\n    \"reason\": \"It works great\",\n    \"palette\": [\"#28A745\", \"#E60000\", \"#FFC107\", \"#FFFFFF\", \"#000000\"],\n    \"colors\": {\n      \"background\": \"#FAFAFA\",\n      \"surface\": \"#E4E4E4\",\n      \"body\": \"#4D4D4D\",\n      \"subtle\": \"#656565\",\n      \"primary\": \"#E60000\",\n      \"secondary\": \"#0000DD\",\n      \"success\": \"#28A745\",\n      \"warning\": \"#FFC107\",\n      \"danger\": \"#E60000\",\n      \"info\": \"#0000DD\",\n      \"light\": \"#FFFFFF\",\n      \"dark\": \"#343A40\"\n    },\n  }\n]\n```\n### Import/Export\nThe JSON schema used for import and export was defined as below:\n```json\n{\n  \"light\": {\n    \"background\": \"#FAFAFA\",\n    \"surface\": \"#E4E4E4\",\n    \"body\": \"#4D4D4D\",\n    \"subtle\": \"#656565\",\n    \"primary\": \"#E60000\",\n    \"secondary\": \"#0000DD\",\n    \"success\": \"#28A745\",\n    \"warning\": \"#FFC107\",\n    \"danger\": \"#E60000\",\n    \"info\": \"#0000DD\",\n    \"light\": \"#FFFFFF\",\n    \"dark\": \"#343A40\"\n  },\n  \"dark\": {\n    \"background\": \"#242424\",\n    \"surface\": \"#4D4D4D\",\n    \"body\": \"#E4E4E4\",\n    \"subtle\": \"#6B7280\",\n    \"primary\": \"#00D9A8\",\n    \"secondary\": \"#FFC0CB\",\n    \"success\": \"#006564\",\n    \"danger\": \"#FFA0BC\",\n    \"warning\": \"#FFD700\",\n    \"info\": \"#4DA3FF\",\n    \"light\": \"#606060\",\n    \"dark\": \"#000000\"\n  }\n}\n```\n\n\n## 🌐 Live Demo\n\n**Try it now:** [ferrywl.to/theme-color-playground](https://ferrywl.to/theme-color-playground/)\n\n## 💼 Use Cases\n\n- **Web Developers**: Design consistent color systems for applications\n- **UI/UX Designers**: Prototype and test theme variations\n- **Design Systems**: Create and document color palettes\n- **Accessibility Testing**: Ensure proper contrast ratios\n- **Brand Guidelines**: Develop cohesive color schemes\n\n## 🔍 SEO \u0026 Discoverability\n\nThis project implements comprehensive SEO best practices:\n- 📊 Structured data (JSON-LD) for search engines\n- 🔗 Open Graph \u0026 Twitter Card meta tags\n- 🗺️ Automatic sitemap generation\n- 🤖 Proper robots.txt configuration\n- 📱 Mobile-optimized meta tags\n\n## 📄 License\n\nThis project is licensed under the **GNU Affero General Public License v3.0 (AGPL-3.0)**.\n\n### ✅ **Permitted Uses**\n- Personal projects and learning\n- Educational and research purposes\n- Non-commercial open source projects\n- Contributing improvements back to this project\n\n## 🤝 Contributing\n\nWe welcome contributions! Here's how you can help:\n\n1. **🐛 Report Issues**: Found a bug? [Open an issue](https://github.com/ferrywlto/theme-color-playground/issues)\n2. **💡 Suggest Features**: Have an idea? We'd love to hear it!\n3. **🔧 Submit PRs**: Ready to code? Fork, develop, and submit a pull request\n4. **📖 Improve Docs**: Help make our documentation better\n\n### Development Guidelines\n- Follow semantic commit conventions\n- Ensure accessibility compliance\n- Test on multiple devices/browsers\n- Maintain performance benchmarks\n\n## 🙏 Acknowledgments\n\n- **[Astro Team](https://astro.build)** - For the amazing static site generator\n- **[Simple Analytics](https://simpleanalytics.com)** - For privacy-first analytics\n- **Open Source Community** - For inspiration and best practices\n\n---\n\n**Made with ❤️ by [Ferry To](https://github.com/ferrywlto) | [Live Demo](https://ferrywl.to/theme-color-playground/) | [Report Issues](https://github.com/ferrywlto/theme-color-playground/issues)**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fferrywlto%2Ftheme-color-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fferrywlto%2Ftheme-color-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fferrywlto%2Ftheme-color-playground/lists"}