{"id":24244510,"url":"https://github.com/manju1807/colorsanity","last_synced_at":"2026-03-07T19:31:44.017Z","repository":{"id":271396692,"uuid":"908887851","full_name":"manju1807/ColorSanity","owner":"manju1807","description":"Your ultimate tool for creating 🎨, customizing 🔧, and exploring stunning color palettes, gradients 🌈, and CSS code snippets 💻. Perfect for designers, developers, and creatives, ColorSanity offers real-time previews 👀, theme customization 🎨, PWA support 📱, and multi-language integration 🌐. Built with Vue 3 ⚛️, Tailwind CSS, and Shadcn-Vue.","archived":false,"fork":false,"pushed_at":"2025-02-07T12:31:56.000Z","size":2839,"stargazers_count":1,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-04T15:48:01.365Z","etag":null,"topics":["advanced-pattern-problems","color-palette-generator","color-scheme","gradient-generator","microsaas","pinia","pinia-plugin-persist","pinia-vuejs","pwa","pwa-apps","seo","shadcn-vue","v1","vuejs-router","vuejs3"],"latest_commit_sha":null,"homepage":"https://colorsanity.netlify.app/","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/manju1807.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":".github/support.yml","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["manju1807"],"custom":["https://buymeacoffee.com/rmanju1807"]}},"created_at":"2024-12-27T08:01:05.000Z","updated_at":"2025-02-07T12:32:00.000Z","dependencies_parsed_at":"2025-01-07T13:39:52.274Z","dependency_job_id":"6c6fc609-d6ee-4895-bcfe-6e99149e04a4","html_url":"https://github.com/manju1807/ColorSanity","commit_stats":null,"previous_names":["manju1807/colorsanity"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/manju1807/ColorSanity","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manju1807%2FColorSanity","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manju1807%2FColorSanity/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manju1807%2FColorSanity/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manju1807%2FColorSanity/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/manju1807","download_url":"https://codeload.github.com/manju1807/ColorSanity/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manju1807%2FColorSanity/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30227807,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T19:01:10.287Z","status":"ssl_error","status_checked_at":"2026-03-07T18:59:58.103Z","response_time":53,"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":["advanced-pattern-problems","color-palette-generator","color-scheme","gradient-generator","microsaas","pinia","pinia-plugin-persist","pinia-vuejs","pwa","pwa-apps","seo","shadcn-vue","v1","vuejs-router","vuejs3"],"created_at":"2025-01-14T22:53:11.867Z","updated_at":"2026-03-07T19:31:43.997Z","avatar_url":"https://github.com/manju1807.png","language":"Vue","funding_links":["https://github.com/sponsors/manju1807","https://buymeacoffee.com/rmanju1807"],"categories":[],"sub_categories":[],"readme":"# 🎨 ColorSanity - Your Ultimate Color Companion\n\nColorSanity is a powerful tool designed to help designers, developers, and creatives generate, customize, and explore stunning color palettes, gradients, and CSS code snippets. With real-time previews, a beautiful and intuitive UI, and a host of advanced features, ColorSanity streamlines your workflow and brings your projects to life with vibrant colors.\n\n---\n\n## 🚀 Key Features\n\n- 🎨 **Color Palette Generator**: Create custom color palettes perfect for branding and design projects.\n- 🌈 **Gradient Generator**: Generate stunning gradients for your designs.\n- 🖌️ **Tints \u0026 Shades**: Explore color variations to find the perfect hue.\n- 💻 **CSS Code Export**: Copy ready-to-use CSS code with a single click.\n- 📚 **Curated Collections**: Explore handpicked color palettes and gradients.\n- 🎨 **Theme Customization**: Fine-tune your theme colors with ease.\n- 📱 **Responsive Design**: Works seamlessly across all devices.\n- 🔧 **PWA Support**: Installable as a Progressive Web App for offline use.\n- 🌐 **i18n Language Support**: Multi-language support for global users.\n- 🧪 **Vitest Testing**: Comprehensive testing with Vitest for robust code.\n- 🛠️ **Shadcn-Vue Components**: Beautiful and reusable UI components.\n- 🗂️ **Vue Router**: Seamless navigation and routing.\n- 🧹 **BiomeJS**: Fast and efficient code formatting and linting.\n- 🐶 **Husky**: Git hooks for pre-commit linting and formatting.\n- 🔍 **Vue DevTools**: Debugging and inspection with Vue DevTools.\n- 📊 **Rollup \u0026 Vite Visualizers**: Analyze bundle size and performance.\n- 🖼️ **SVG Loader**: Optimized SVG handling for better performance.\n- 🔧 **Vite Inspect Plugin**: Debug and inspect Vite plugins.\n- 🗜️ **Vite Compression**: Optimized assets with compression.\n- 💾 **LocalStorage Theme Persistence**: Save and load user theme preferences.\n- 📦 **Pinia Persistence Plugin**: Persistent state management for themes.\n- 🎨 **Highly Customizable UI**: Tailored to fit your design needs.\n- 🚀 **Netlify Deployment**: Easy deployment with Netlify.\n\n---\n\n## 🛠️ Built With\n\n- ⚡ **Vite**: Next-generation frontend tooling.\n- ⚛️ **Vue 3**: Progressive JavaScript framework.\n- 📘 **TypeScript**: Typed superset of JavaScript.\n- 🎨 **Tailwind CSS**: Utility-first CSS framework.\n- 🎭 **Shadcn-Vue**: Beautiful and reusable UI components.\n- 🖼️ **Lucide Vue**: Beautiful \u0026 consistent icon pack.\n- 📊 **Unovis**: Composable charting library.\n- 🌙 **VueUse**: Collection of essential Vue composition utilities.\n- 🚨 **Vee-Validate**: Form validation for Vue.\n- 📦 **Pinia**: Intuitive state management for Vue.\n- 🌐 **Vue I18n**: Internationalization and language support.\n- 🧪 **Vitest**: Fast and modern testing framework.\n- 🐶 **Husky**: Git hooks for pre-commit linting.\n- 🧹 **BiomeJS**: Fast and efficient code formatting and linting.\n- 🔍 **Vue DevTools**: Debugging and inspection tools.\n- 🗜️ **Vite Compression**: Optimized assets with compression.\n- 🖼️ **SVG Loader**: Optimized SVG handling.\n- 📊 **Rollup \u0026 Vite Visualizers**: Bundle size and performance analysis.\n\n---\n\n## 📈 Development Process\n\nThe development of ColorSanity focused on creating a user-friendly interface with robust functionality:\n\n- 🎨 Implemented core color customization features.\n- 🔍 Integrated real-time color previews.\n- 🎨 Developed responsive UI with theme support.\n- ♿ Implemented comprehensive accessibility features.\n- ⚡ Optimized performance across all devices.\n- 🧪 Added comprehensive testing with Vitest.\n- 🌐 Integrated i18n for multi-language support.\n- 🛠️ Configured PWA for offline use.\n- 🐶 Set up Husky for pre-commit linting and formatting.\n- 🧹 Used BiomeJS for fast and efficient code formatting.\n- 📦 Added Pinia persistence for theme storage.\n- 🖼️ Optimized SVG handling with SVG Loader.\n- 📊 Analyzed bundle size with Rollup and Vite visualizers.\n\n---\n\n## 🏃‍♂️ Running the Project\n\nTo run ColorSanity locally, follow these steps:\n\n1. 📥 **Clone the repository** to your local machine:\n\n   ```bash\n   git clone https://github.com/yourusername/color-sanity.git\n   cd color-sanity\n   ```\n\n2. 📦 **Install dependencies**:\n\n   ```bash\n   npm install\n   # or\n   yarn\n   ```\n\n3. 🚀 **Run the development server**:\n\n   ```bash\n   npm run dev\n   # or\n   yarn dev\n   ```\n\n4. 🌐 Open [http://localhost:3000](http://localhost:3000) in your browser.\n\n---\n\n## 🛠️ Advanced Configuration\n\n- **PWA Setup**: The project is configured as a Progressive Web App (PWA) for offline use and installability.\n- **i18n Language Support**: Multi-language support is integrated using Vue I18n.\n- **Vitest Testing**: Comprehensive testing is set up with Vitest for robust code quality.\n- **Husky \u0026 Commitlint**: Pre-commit hooks ensure code quality and consistent commit messages.\n- **BiomeJS**: Fast and efficient code formatting and linting.\n- **Vite Inspect Plugin**: Debug and inspect Vite plugins during development.\n- **Rollup \u0026 Vite Visualizers**: Analyze bundle size and performance.\n- **Vite Compression**: Optimized assets with compression for better performance.\n\n---\n\n## 📸 Screenshots\n\n![Home Page](https://github.com/user-attachments/assets/c987c4d8-9f4f-4249-a0f9-e22a090505cc)\n![Gradient Customization Tool](https://github.com/user-attachments/assets/cd060b79-c7dd-422d-9d14-5164945c26e8)\n![Tints \u0026 Shades](https://github.com/user-attachments/assets/995fc20b-dbef-4814-aa32-e9fae4c656bf)\n![Theme Customization 1](https://github.com/user-attachments/assets/56beab03-9051-4edb-91e8-462dcc967675)\n![Theme Customization 2](https://github.com/user-attachments/assets/2d017dd9-b013-46cc-a31b-2d9ac4cd749a)\n![Theme Customization 3](https://github.com/user-attachments/assets/95bcf8db-26cb-4685-8454-63bed7a491c3)\n\n---\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n---\n\n## 💖 Created with ❤️ by Manjunath R\n\nFeel free to contribute to the project or provide feedback. Your support is greatly appreciated!\n\n---\n\n**ColorSanity** is your go-to tool for all things color. Whether you're a designer, developer, or creative, ColorSanity empowers you to create stunning designs with ease. 🌈✨\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanju1807%2Fcolorsanity","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanju1807%2Fcolorsanity","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanju1807%2Fcolorsanity/lists"}