\n```\n\n### For Ant Design / MUI / Chakra — let the framework handle structure\n\nChameleon automatically detects and adapts Ant Design, MUI, and Chakra UI components. No special config needed. Just wrap your app:\n\n```jsx\n
\n {/* antd */}\n \n \n\n```\n\n---\n\n## Troubleshooting\n\n### Dark mode not activating on Tailwind\n\nMake sure you have `darkMode: 'class'` in `tailwind.config.js` — this is required.\n\n---\n\n### Colors not adapting at all\n\n**1. ChameleonProvider not at root level**\n\n```jsx\n// ❌ Wrong\nfunction Page() {\n return
\n}\n\n// ✅ Correct — wrap at the very top\nfunction App() {\n return
\n}\n```\n\n**2. Colors hardcoded with `!important`**\n\n```css\n/* ❌ Blocks Chameleon */\n.my-class { color: #000 !important; }\n\n/* ✅ Use CSS variables */\n.my-class { color: var(--chameleon-text-primary); }\n```\n\n**3. Inline styles**\n\n```jsx\n{/* ❌ Can't be overridden */}\n
Text
\n\n{/* ✅ Use CSS classes */}\n
Text
\n```\n\n---\n\n### Next.js App Router setup\n\nChameleonProvider uses React hooks — it must be in a Client Component:\n\n```tsx\n// app/providers.tsx\n'use client';\nimport { ChameleonProvider } from '@cabraule/chameleon-ui';\n\nexport function Providers({ children }: { children: React.ReactNode }) {\n return (\n
\n {children}\n \n );\n}\n```\n\n```tsx\n// app/layout.tsx\nimport { Providers } from './providers';\n\nexport default function RootLayout({ children }) {\n return (\n \n \n
{children}\n \n \n )\n}\n```\n\nFor Vite / CRA, add this in `index.html` before React loads:\n\n```html\n\n```\n\n---\n\n### Text unreadable after adaptation\n\nChameleon includes an automatic contrast fixer that checks every text element against its real background. If issues persist:\n\n- Make sure elements have explicit backgrounds (not transparent)\n- Update to the latest version: `npm update @cabraule/chameleon-ui`\n\n---\n\n## Framework support\n\n| Framework | Status |\n|---|---|\n| React 18+ | ✅ Supported |\n| Next.js 13+ App Router | ✅ Supported |\n| Next.js 12 Pages Router | ✅ Supported |\n| Vite + React | ✅ Supported |\n| Tailwind CSS v3 / v4 | ✅ Supported |\n| shadcn/ui | ✅ Supported |\n| Ant Design v5+ | ✅ Supported |\n| Material UI (MUI) v5+ | ✅ Supported |\n| Chakra UI v3 | ✅ Supported |\n| CSS / CSS Variables | ✅ Supported |\n| SCSS / SASS | ✅ Supported (best with CSS variables) |\n| Plain CSS | ✅ Supported |\n| Vue.js | 🔜 Coming in V2 |\n| React Native | 🔜 Coming in V2 |\n\n---\n\n## Browser support\n\n| Browser | Minimum version |\n|---|---|\n| Chrome | 76+ |\n| Edge | 79+ |\n| Firefox | 67+ |\n| Safari | 12.1+ |\n\n---\n\n## Roadmap\n\n### ✅ MVP (current)\n- [x] Automatic light / dark theme detection\n- [x] Time-based adaptation (day / night)\n- [x] System preference — always takes priority\n- [x] High contrast mode\n- [x] Color blindness mode\n- [x] Reduced motion support\n- [x] Language detection\n- [x] Tailwind CSS v3 / v4 support\n- [x] shadcn/ui support\n- [x] Ant Design support\n- [x] Material UI (MUI) support\n- [x] Chakra UI v3 support\n- [x] CSS / CSS Variables / SCSS support\n- [x] AI-powered theme generation (Claude Sonnet)\n- [x] Automatic WCAG contrast fixes\n- [x] Gradient adaptation (from-*, via-*, to-*)\n- [x] Inline style adaptation\n- [x] Portal / modal / dropdown detection\n- [x] Canvas / PDF / video exclusion\n- [x] Supabase persistent cache\n\n### 🔜 V1\n\n- [ ] Font size scaling\n- [ ] Color palette editor (Pro)\n- [ ] Theme preview panel\n\n### 🔜 V2\n\n- [ ] Vue.js support\n- [ ] React Native support\n- [ ] Analytics dashboard (Pro)\n\n---\n\n## Contributing\n\n```bash\ngit clone https://github.com/cabraule/chameleon-ui\ncd chameleon-ui\nnpm install\nnpm run dev\n```\n\nOpen an issue before submitting a pull request for major changes.\n\n---\n\n## License\n\nMIT © [Cabraule](https://github.com/cabraule)\n\n---\n\n
\n Built with ❤️ — Because every user deserves an interface made for them.\n
","readmeFilename":"README.md"}