{"id":50959414,"url":"https://github.com/poyrazavsever/reactive-switcher","last_synced_at":"2026-06-18T11:33:08.769Z","repository":{"id":326946507,"uuid":"1107219622","full_name":"poyrazavsever/reactive-switcher","owner":"poyrazavsever","description":"A simple and customizable theme switcher component for React applications, allowing users to toggle between light and dark modes seamlessly. Easily integrate it into your projects to enhance user experience with dynamic theming.","archived":false,"fork":false,"pushed_at":"2025-12-01T12:04:12.000Z","size":333,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-12-03T05:45:41.465Z","etag":null,"topics":["colors","mode","react-native","react-switcher","react-theme-provider","reactive","reactive-switcher","switcher","theme","theme-mode","theme-switch","theme-switcher","themes","web-themes"],"latest_commit_sha":null,"homepage":"https://reactive-switcher-j9qb.vercel.app/","language":"TypeScript","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/poyrazavsever.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-30T19:58:01.000Z","updated_at":"2025-12-01T13:33:31.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/poyrazavsever/reactive-switcher","commit_stats":null,"previous_names":["poyrazavsever/reactive-switcher"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/poyrazavsever/reactive-switcher","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poyrazavsever%2Freactive-switcher","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poyrazavsever%2Freactive-switcher/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poyrazavsever%2Freactive-switcher/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poyrazavsever%2Freactive-switcher/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/poyrazavsever","download_url":"https://codeload.github.com/poyrazavsever/reactive-switcher/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poyrazavsever%2Freactive-switcher/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34489171,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-18T02:00:06.871Z","response_time":128,"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":["colors","mode","react-native","react-switcher","react-theme-provider","reactive","reactive-switcher","switcher","theme","theme-mode","theme-switch","theme-switcher","themes","web-themes"],"created_at":"2026-06-18T11:33:07.805Z","updated_at":"2026-06-18T11:33:08.692Z","avatar_url":"https://github.com/poyrazavsever.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"./public/logo/Logo.png\" alt=\"Reactive Switcher Logo\" width=\"180\" /\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eReactive Switcher\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eType-safe, modular, and instant theme switching for React \u0026 Tailwind CSS v4\u003c/strong\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/reactive-switcher\"\u003e\n    \u003cimg src=\"https://badge.fury.io/js/reactive-switcher.svg\" alt=\"npm version\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/License-MIT-yellow.svg\" alt=\"License: MIT\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/poyrazavsever/reactive-switcher\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/TypeScript-100%25-blue.svg\" alt=\"TypeScript\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/package/reactive-switcher\"\u003e\n    \u003cimg src=\"https://img.shields.io/bundlephobia/minzip/reactive-switcher\" alt=\"Bundle Size\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#-features\"\u003eFeatures\u003c/a\u003e •\n  \u003ca href=\"#-installation\"\u003eInstallation\u003c/a\u003e •\n  \u003ca href=\"#-quick-start\"\u003eQuick Start\u003c/a\u003e •\n  \u003ca href=\"#-api-reference\"\u003eAPI\u003c/a\u003e •\n  \u003ca href=\"#-demo\"\u003eDemo\u003c/a\u003e •\n  \u003ca href=\"#türkçe\"\u003eTürkçe\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n## ✨ Features\n\n- 🚀 **Zero Runtime Overhead** - Uses CSS variables for instant theme switching\n- 📦 **TypeScript First** - Full type safety with autocomplete support\n- 🎨 **Tailwind CSS v4 Ready** - Seamless integration with the new engine\n- 💾 **Persistent Themes** - LocalStorage support out of the box\n- 🌙 **System Theme Detection** - Respects `prefers-color-scheme`\n- ⚡ **No Flash** - SSR compatible with hydration flash prevention\n- 🎯 **Scoped Theming** - Apply different themes to different parts of your app\n- 🧩 **Ready-to-use Components** - `ThemeSwitcher` and `ThemeToggle` included\n\n---\n\n## 📦 Installation\n\n```bash\nnpm install reactive-switcher\n# or\npnpm add reactive-switcher\n# or\nyarn add reactive-switcher\n```\n\n---\n\n## 🚀 Quick Start\n\n### 1. Define Your Themes\n\n```typescript\n// themes.ts\nimport { ThemesConfig } from \"reactive-switcher\";\n\nexport const themes: ThemesConfig = {\n  light: {\n    name: \"light\",\n    type: \"light\",\n    colors: {\n      background: \"#ffffff\",\n      foreground: \"#0f172a\",\n      primary: {\n        DEFAULT: \"#3b82f6\",\n        foreground: \"#ffffff\",\n        50: \"#eff6ff\",\n        500: \"#3b82f6\",\n        600: \"#2563eb\",\n      },\n      secondary: {\n        DEFAULT: \"#64748b\",\n        foreground: \"#ffffff\",\n      },\n      surface: {\n        50: \"#f8fafc\",\n        100: \"#f1f5f9\",\n        200: \"#e2e8f0\",\n      },\n    },\n  },\n  dark: {\n    name: \"dark\",\n    type: \"dark\",\n    colors: {\n      background: \"#020617\",\n      foreground: \"#f8fafc\",\n      primary: {\n        DEFAULT: \"#60a5fa\",\n        foreground: \"#0f172a\",\n      },\n      secondary: {\n        DEFAULT: \"#94a3b8\",\n        foreground: \"#0f172a\",\n      },\n      surface: {\n        50: \"#0f172a\",\n        100: \"#1e293b\",\n        200: \"#334155\",\n      },\n    },\n  },\n};\n```\n\n### 2. Wrap Your App with ThemeProvider\n\n```tsx\n// app/layout.tsx (Next.js)\nimport { ThemeProvider } from \"reactive-switcher\";\nimport { themes } from \"./themes\";\n\nexport default function RootLayout({ children }) {\n  return (\n    \u003chtml lang=\"en\" suppressHydrationWarning\u003e\n      \u003cbody\u003e\n        \u003cThemeProvider themes={themes} defaultTheme=\"light\"\u003e\n          {children}\n        \u003c/ThemeProvider\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n  );\n}\n```\n\n### 3. Use the Theme\n\n```tsx\n\"use client\";\nimport { useTheme, ThemeToggle } from \"reactive-switcher\";\n\nexport function Header() {\n  const { theme, setTheme, toggleTheme } = useTheme();\n\n  return (\n    \u003cheader className=\"bg-background text-foreground\"\u003e\n      \u003cp\u003eCurrent Theme: {theme}\u003c/p\u003e\n\n      {/* Ready-to-use toggle */}\n      \u003cThemeToggle /\u003e\n\n      {/* Or manual control */}\n      \u003cbutton onClick={() =\u003e setTheme(\"dark\")}\u003eDark\u003c/button\u003e\n      \u003cbutton onClick={toggleTheme}\u003eToggle\u003c/button\u003e\n    \u003c/header\u003e\n  );\n}\n```\n\n### 4. Configure Tailwind CSS v4\n\n```css\n/* globals.css */\n@import \"tailwindcss\";\n\n@theme {\n  --color-background: var(--color-background);\n  --color-foreground: var(--color-foreground);\n  --color-primary: var(--color-primary-DEFAULT);\n  --color-primary-foreground: var(--color-primary-foreground);\n  --color-secondary: var(--color-secondary-DEFAULT);\n  --color-surface-50: var(--color-surface-50);\n  --color-surface-100: var(--color-surface-100);\n  --color-surface-200: var(--color-surface-200);\n}\n\n@layer base {\n  body {\n    background-color: var(--color-background);\n    color: var(--color-foreground);\n    transition: background-color 0.3s, color 0.3s;\n  }\n}\n```\n\n---\n\n## 📖 API Reference\n\n### ThemeProvider Props\n\n| Prop            | Type                      | Default                      | Description                     |\n| --------------- | ------------------------- | ---------------------------- | ------------------------------- |\n| `themes`        | `ThemesConfig`            | **required**                 | Theme configurations object     |\n| `defaultTheme`  | `string`                  | `\"light\"`                    | Initial theme name              |\n| `enableStorage` | `boolean`                 | `true`                       | Persist theme to localStorage   |\n| `storageKey`    | `string`                  | `\"reactive-switcher-theme\"`  | localStorage key                |\n| `enableSystem`  | `boolean`                 | `true`                       | Detect system color scheme      |\n| `selector`      | `string`                  | `\":root\"`                    | CSS selector for scoped theming |\n| `styleId`       | `string`                  | `\"reactive-switcher-styles\"` | Style tag ID                    |\n| `attribute`     | `\"class\" \\| \"data-theme\"` | `\"class\"`                    | HTML attribute for theme        |\n\n### useTheme() Hook\n\n```typescript\nconst {\n  theme, // Current theme name (string)\n  resolvedTheme, // Actual theme (resolves \"system\")\n  setTheme, // (name: string) =\u003e void\n  toggleTheme, // () =\u003e void - Cycle through themes\n  themes, // Available theme names (string[])\n  systemTheme, // System preference (\"light\" | \"dark\")\n} = useTheme();\n```\n\n### Built-in Components\n\n```tsx\nimport { ThemeSwitcher, ThemeToggle } from \"reactive-switcher\";\n\n// Dropdown/Button switcher with multiple variants\n\u003cThemeSwitcher variant=\"buttons\" /\u003e  // Side-by-side buttons\n\u003cThemeSwitcher variant=\"dropdown\" /\u003e // Dropdown menu\n\u003cThemeSwitcher variant=\"toggle\" /\u003e   // Toggle button\n\n// Simple two-theme toggle\n\u003cThemeToggle /\u003e\n```\n\n---\n\n## 🎯 Advanced Usage\n\n### Scoped Theming\n\nApply different themes to different parts of your app:\n\n```tsx\nimport { ThemeProvider } from \"reactive-switcher\";\nimport { themes } from \"./themes\";\n\nfunction App() {\n  return (\n    \u003cThemeProvider themes={themes} defaultTheme=\"light\"\u003e\n      \u003cmain\u003eMain content with light theme\u003c/main\u003e\n\n      {/* Scoped dark theme section */}\n      \u003cThemeProvider\n        themes={themes}\n        defaultTheme=\"dark\"\n        selector=\"#preview-panel\"\n        enableStorage={false}\n      \u003e\n        \u003cdiv id=\"preview-panel\"\u003eThis section has its own theme!\u003c/div\u003e\n      \u003c/ThemeProvider\u003e\n    \u003c/ThemeProvider\u003e\n  );\n}\n```\n\n### Custom Color Palettes\n\nDefine nested color tokens:\n\n```typescript\nconst themes: ThemesConfig = {\n  ocean: {\n    name: \"ocean\",\n    type: \"dark\",\n    colors: {\n      background: \"#042f2e\",\n      foreground: \"#ccfbf1\",\n      primary: {\n        DEFAULT: \"#2dd4bf\",\n        foreground: \"#042f2e\",\n        50: \"#042f2e\",\n        100: \"#115e59\",\n        200: \"#0f766e\",\n        // ... more shades\n      },\n      accent: {\n        DEFAULT: \"#facc15\",\n        foreground: \"#422006\",\n      },\n    },\n  },\n};\n```\n\n---\n\n## 🌐 Demo\n\nCheck out the live demo: [reactive-switcher.vercel.app](https://reactive-switcher.vercel.app)\n\n---\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n---\n\n## 📄 License\n\nMIT © [Poyraz Avsever](https://github.com/poyrazavsever)\n\n---\n\n\u003cbr /\u003e\n\n# Türkçe\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eReact ve Tailwind CSS v4 için tip güvenli, modüler ve anlık tema değiştirici\u003c/strong\u003e\n\u003c/p\u003e\n\n---\n\n## ✨ Özellikler\n\n- 🚀 **Sıfır Çalışma Zamanı Yükü** - Anlık tema değişimi için CSS değişkenleri kullanır\n- 📦 **TypeScript Öncelikli** - Otomatik tamamlama desteği ile tam tip güvenliği\n- 🎨 **Tailwind CSS v4 Uyumlu** - Yeni motor ile kusursuz entegrasyon\n- 💾 **Kalıcı Temalar** - Kutudan çıktığı gibi localStorage desteği\n- 🌙 **Sistem Teması Algılama** - `prefers-color-scheme` tercihine uyar\n- ⚡ **Yanıp Sönme Yok** - SSR uyumlu, hidrasyon flash önleme\n- 🎯 **Kapsamlı Tema** - Uygulamanızın farklı bölümlerine farklı temalar uygulayın\n- 🧩 **Kullanıma Hazır Bileşenler** - `ThemeSwitcher` ve `ThemeToggle` dahil\n\n---\n\n## 📦 Kurulum\n\n```bash\nnpm install reactive-switcher\n# veya\npnpm add reactive-switcher\n# veya\nyarn add reactive-switcher\n```\n\n---\n\n## 🚀 Hızlı Başlangıç\n\n### 1. Temalarınızı Tanımlayın\n\n```typescript\n// themes.ts\nimport { ThemesConfig } from \"reactive-switcher\";\n\nexport const themes: ThemesConfig = {\n  light: {\n    name: \"light\",\n    type: \"light\",\n    colors: {\n      background: \"#ffffff\",\n      foreground: \"#0f172a\",\n      primary: {\n        DEFAULT: \"#3b82f6\",\n        foreground: \"#ffffff\",\n        50: \"#eff6ff\",\n        500: \"#3b82f6\",\n        600: \"#2563eb\",\n      },\n      secondary: {\n        DEFAULT: \"#64748b\",\n        foreground: \"#ffffff\",\n      },\n      surface: {\n        50: \"#f8fafc\",\n        100: \"#f1f5f9\",\n        200: \"#e2e8f0\",\n      },\n    },\n  },\n  dark: {\n    name: \"dark\",\n    type: \"dark\",\n    colors: {\n      background: \"#020617\",\n      foreground: \"#f8fafc\",\n      primary: {\n        DEFAULT: \"#60a5fa\",\n        foreground: \"#0f172a\",\n      },\n      secondary: {\n        DEFAULT: \"#94a3b8\",\n        foreground: \"#0f172a\",\n      },\n      surface: {\n        50: \"#0f172a\",\n        100: \"#1e293b\",\n        200: \"#334155\",\n      },\n    },\n  },\n};\n```\n\n### 2. Uygulamanızı ThemeProvider ile Sarmalayın\n\n```tsx\n// app/layout.tsx (Next.js)\nimport { ThemeProvider } from \"reactive-switcher\";\nimport { themes } from \"./themes\";\n\nexport default function RootLayout({ children }) {\n  return (\n    \u003chtml lang=\"tr\" suppressHydrationWarning\u003e\n      \u003cbody\u003e\n        \u003cThemeProvider themes={themes} defaultTheme=\"light\"\u003e\n          {children}\n        \u003c/ThemeProvider\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n  );\n}\n```\n\n### 3. Temayı Kullanın\n\n```tsx\n\"use client\";\nimport { useTheme, ThemeToggle } from \"reactive-switcher\";\n\nexport function Header() {\n  const { theme, setTheme, toggleTheme } = useTheme();\n\n  return (\n    \u003cheader className=\"bg-background text-foreground\"\u003e\n      \u003cp\u003eAktif Tema: {theme}\u003c/p\u003e\n\n      {/* Kullanıma hazır toggle */}\n      \u003cThemeToggle /\u003e\n\n      {/* Veya manuel kontrol */}\n      \u003cbutton onClick={() =\u003e setTheme(\"dark\")}\u003eKoyu\u003c/button\u003e\n      \u003cbutton onClick={toggleTheme}\u003eDeğiştir\u003c/button\u003e\n    \u003c/header\u003e\n  );\n}\n```\n\n### 4. Tailwind CSS v4 Yapılandırması\n\n```css\n/* globals.css */\n@import \"tailwindcss\";\n\n@theme {\n  --color-background: var(--color-background);\n  --color-foreground: var(--color-foreground);\n  --color-primary: var(--color-primary-DEFAULT);\n  --color-primary-foreground: var(--color-primary-foreground);\n  --color-secondary: var(--color-secondary-DEFAULT);\n  --color-surface-50: var(--color-surface-50);\n  --color-surface-100: var(--color-surface-100);\n  --color-surface-200: var(--color-surface-200);\n}\n\n@layer base {\n  body {\n    background-color: var(--color-background);\n    color: var(--color-foreground);\n    transition: background-color 0.3s, color 0.3s;\n  }\n}\n```\n\n---\n\n## 📖 API Referansı\n\n### ThemeProvider Props\n\n| Prop            | Tip            | Varsayılan                  | Açıklama                      |\n| --------------- | -------------- | --------------------------- | ----------------------------- |\n| `themes`        | `ThemesConfig` | **zorunlu**                 | Tema yapılandırma objesi      |\n| `defaultTheme`  | `string`       | `\"light\"`                   | Başlangıç teması              |\n| `enableStorage` | `boolean`      | `true`                      | localStorage'a kaydet         |\n| `storageKey`    | `string`       | `\"reactive-switcher-theme\"` | localStorage anahtarı         |\n| `enableSystem`  | `boolean`      | `true`                      | Sistem teması algılama        |\n| `selector`      | `string`       | `\":root\"`                   | Kapsamlı tema için CSS seçici |\n\n### useTheme() Hook\n\n```typescript\nconst {\n  theme, // Aktif tema adı (string)\n  resolvedTheme, // Gerçek tema (\"system\" çözümlenir)\n  setTheme, // (name: string) =\u003e void\n  toggleTheme, // () =\u003e void - Temalar arasında geçiş\n  themes, // Mevcut tema adları (string[])\n  systemTheme, // Sistem tercihi (\"light\" | \"dark\")\n} = useTheme();\n```\n\n---\n\n## 🌐 Demo\n\nCanlı demoyu inceleyin: [reactive-switcher.vercel.app](https://reactive-switcher.vercel.app)\n\n---\n\n## 🤝 Katkıda Bulunma\n\nKatkılarınızı bekliyoruz! Pull Request göndermekten çekinmeyin.\n\n1. Repoyu fork edin\n2. Feature branch oluşturun (`git checkout -b feature/harika-ozellik`)\n3. Değişikliklerinizi commit edin (`git commit -m 'Harika özellik ekle'`)\n4. Branch'i push edin (`git push origin feature/harika-ozellik`)\n5. Pull Request açın\n\n---\n\n## 📄 Lisans\n\nMIT © [Poyraz Avsever](https://github.com/poyrazavsever)\n\n---\n\n[![Star History Chart](https://api.star-history.com/svg?repos=poyrazavsever/reactive-switcher\u0026type=date\u0026legend=top-left)](https://www.star-history.com/#poyrazavsever/reactive-switcher\u0026type=date\u0026legend=top-left)\n\n\u003cp align=\"center\"\u003e\n  Made with ❤️ by \u003ca href=\"https://poyrazavsever.com\"\u003ePoyraz Avsever\u003c/a\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpoyrazavsever%2Freactive-switcher","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpoyrazavsever%2Freactive-switcher","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpoyrazavsever%2Freactive-switcher/lists"}