{"id":18905405,"url":"https://github.com/imkkingshuk/themesx","last_synced_at":"2026-03-05T06:02:04.301Z","repository":{"id":263552421,"uuid":"888708621","full_name":"ImKKingshuk/ThemesX","owner":"ImKKingshuk","description":"ThemesX: Your All-in-One Dark Mode Solution for React Apps! Effortlessly integrate light, dark, and system themes with full support for Next.js, React, Vite, Gatsby, Remix, Astro, Qwik, Solid, and more. ThemesX simplifies theme switching with responsive support for system theme preferences. 🌗🎨","archived":false,"fork":false,"pushed_at":"2025-04-30T19:06:07.000Z","size":212,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-15T11:57:53.739Z","etag":null,"topics":["astro-dark-mode","astro-themes","gatsby-dark-mode","next-dark-mode","next-themes","nextjs","nextjs-dark-mode","nextjs-theme","react-dark-mode","react-theme-provider","react-themes","remix-dark-mode","remix-themes","solidjs-dark-mode","solidjs-theme","theme-provider","themesx","vite-dark-mode"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ImKKingshuk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2024-11-14T21:41:08.000Z","updated_at":"2025-09-13T15:03:34.000Z","dependencies_parsed_at":"2024-11-19T07:18:27.524Z","dependency_job_id":"d3f60297-3e84-47f7-9884-945221e2b1a4","html_url":"https://github.com/ImKKingshuk/ThemesX","commit_stats":null,"previous_names":["imkkingshuk/themesx"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ImKKingshuk/ThemesX","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ImKKingshuk%2FThemesX","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ImKKingshuk%2FThemesX/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ImKKingshuk%2FThemesX/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ImKKingshuk%2FThemesX/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ImKKingshuk","download_url":"https://codeload.github.com/ImKKingshuk/ThemesX/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ImKKingshuk%2FThemesX/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30111779,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T03:40:26.266Z","status":"ssl_error","status_checked_at":"2026-03-05T03:39:15.902Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["astro-dark-mode","astro-themes","gatsby-dark-mode","next-dark-mode","next-themes","nextjs","nextjs-dark-mode","nextjs-theme","react-dark-mode","react-theme-provider","react-themes","remix-dark-mode","remix-themes","solidjs-dark-mode","solidjs-theme","theme-provider","themesx","vite-dark-mode"],"created_at":"2024-11-08T09:11:53.933Z","updated_at":"2026-03-05T06:02:04.277Z","avatar_url":"https://github.com/ImKKingshuk.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eThemesX\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cstrong\u003eThe Ultimate Themes Library for React-Based Frameworks\u003c/strong\u003e\u003cbr\u003e\nThemesX is the most powerful, flexible, and developer-friendly theming solution for React applications. With custom color support (Hex, OKLCH), theme variants, and zero-config defaults, ThemesX makes beautiful dark modes effortless. 🌗✨\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n## ✨ Features\n\n### 🎨 **Advanced Color System**\n\n- **Custom Colors**: Define your own light and dark mode colors using Hex, OKLCH, RGB, or HSL\n- **Multiple Variants**: Support for AMOLED dark, warm light, cool dark, and unlimited custom variants\n- **Modern Color Spaces**: First-class OKLCH support for perceptually uniform colors\n- **CSS Variables**: Automatic CSS custom property generation with configurable prefixes\n\n### 🚀 **Developer Experience**\n\n- **Zero Config**: Beautiful defaults out of the box\n- **Type Safe**: Fully typed with TypeScript for excellent IDE support\n- **Framework Agnostic**: Works with Next.js, Vite, Gatsby, Remix, Astro, and more\n- **SSR Ready**: No flash of unstyled content (FOUC) on page load\n- **Tree Shakeable**: Import only what you need\n\n### 🎯 **Smart Features**\n\n- **System Theme Detection**: Automatically syncs with OS preferences\n- **Persistent Themes**: LocalStorage support with custom storage keys\n- **Theme Variants**: Support for multiple theme variants per mode\n- **Color Scheme Meta**: Automatic `color-scheme` meta tag updates\n- **Smooth Transitions**: Configurable transition durations\n- **Multiple Attributes**: Support for `class`, `data-theme`, or `data-mode` attributes\n\n## Installation\n\nInstall `ThemesX` using your preferred package manager:\n\n### Bun\n\n```bash\nbun add themesx\n```\n\n### npm\n\n```bash\nnpm install themesx\n```\n\n### pnpm\n\n```bash\npnpm add themesx\n```\n\n### yarn\n\n```bash\nyarn add themesx\n```\n\n## 🚀 Quick Start\n\n### Basic Setup (Zero Config)\n\n```jsx\nimport { ThemeProvider } from \"themesx\";\n\nfunction App() {\n  return (\n    \u003cThemeProvider\u003e\n      \u003cYourApp /\u003e\n    \u003c/ThemeProvider\u003e\n  );\n}\n```\n\n### Using Themes in Components\n\n```jsx\nimport { useTheme } from \"themesx\";\n\nfunction ThemeToggle() {\n  const { theme, setTheme, resolvedTheme } = useTheme();\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eCurrent: {resolvedTheme}\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e setTheme(\"light\")}\u003eLight\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e setTheme(\"dark\")}\u003eDark\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e setTheme(\"system\")}\u003eSystem\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Access CSS Variables\n\n```css\n/* Use generated CSS variables in your styles */\nbody {\n  background: var(--themesx-background);\n  color: var(--themesx-foreground);\n}\n\n.card {\n  background: var(--themesx-card);\n  border: 1px solid var(--themesx-border);\n}\n```\n\n---\n\n## 🎨 Custom Colors\n\n### Custom Hex Colors\n\n```jsx\nimport { ThemeProvider, createTheme } from \"themesx\";\n\nconst config = createTheme({\n  light: {\n    background: \"#ffffff\",\n    foreground: \"#000000\",\n    primary: \"#0070f3\",\n    secondary: \"#7928ca\",\n  },\n  dark: {\n    background: \"#000000\", // Pure black\n    foreground: \"#ffffff\",\n    primary: \"#0070f3\",\n    secondary: \"#7928ca\",\n  },\n  applyToBody: true,\n});\n\nfunction App() {\n  return (\n    \u003cThemeProvider config={config}\u003e\n      \u003cYourApp /\u003e\n    \u003c/ThemeProvider\u003e\n  );\n}\n```\n\n### AMOLED Dark Mode\n\n```jsx\nimport { ThemeProvider, themePresets } from \"themesx\";\n\nconst config = {\n  dark: themePresets.amoled, // Pure black AMOLED-friendly\n  applyToBody: true,\n};\n\nfunction App() {\n  return (\n    \u003cThemeProvider config={config}\u003e\n      \u003cYourApp /\u003e\n    \u003c/ThemeProvider\u003e\n  );\n}\n```\n\n### OKLCH Colors (Modern Perceptual Color Space)\n\n```jsx\nimport { ThemeProvider } from \"themesx\";\n\nconst config = {\n  light: {\n    background: \"oklch(1 0 0)\", // Pure white\n    foreground: \"oklch(0 0 0)\", // Pure black\n    primary: \"oklch(0.5 0.2 250)\", // Blue\n    accent: \"oklch(0.7 0.15 150)\", // Green\n  },\n  dark: {\n    background: \"oklch(0.15 0 0)\", // Near black\n    foreground: \"oklch(0.95 0 0)\", // Near white\n    primary: \"oklch(0.6 0.25 250)\", // Brighter blue\n    accent: \"oklch(0.75 0.2 150)\", // Brighter green\n  },\n  applyToBody: true,\n};\n```\n\n### Multiple Theme Variants\n\n```jsx\nimport { ThemeProvider } from \"themesx\";\n\nconst config = {\n  light: [\n    {\n      name: \"light\",\n      colors: {\n        background: \"#ffffff\",\n        foreground: \"#000000\",\n      },\n    },\n    {\n      name: \"warm\",\n      colors: {\n        background: \"#fef9f3\", // Warm beige\n        foreground: \"#1a1816\",\n      },\n    },\n  ],\n  dark: [\n    {\n      name: \"dark\",\n      colors: {\n        background: \"#000000\",\n        foreground: \"#ffffff\",\n      },\n    },\n    {\n      name: \"amoled\",\n      colors: {\n        background: \"#000000\", // Pure black\n        foreground: \"#ffffff\",\n        primary: \"#00d9ff\", // Cyan\n      },\n    },\n    {\n      name: \"midnight\",\n      colors: {\n        background: \"#0a0e17\", // Navy\n        foreground: \"#e4e7eb\",\n      },\n    },\n  ],\n};\n\nfunction App() {\n  return (\n    \u003cThemeProvider config={config}\u003e\n      \u003cYourApp /\u003e\n    \u003c/ThemeProvider\u003e\n  );\n}\n\n// Use variants\nfunction VariantSelector() {\n  const { variant, setVariant } = useTheme();\n\n  return (\n    \u003cselect value={variant} onChange={(e) =\u003e setVariant?.(e.target.value)}\u003e\n      \u003coption value=\"light\"\u003eDefault Light\u003c/option\u003e\n      \u003coption value=\"warm\"\u003eWarm Light\u003c/option\u003e\n      \u003coption value=\"dark\"\u003eDefault Dark\u003c/option\u003e\n      \u003coption value=\"amoled\"\u003eAMOLED Dark\u003c/option\u003e\n      \u003coption value=\"midnight\"\u003eMidnight Dark\u003c/option\u003e\n    \u003c/select\u003e\n  );\n}\n```\n\n---\n\n## 📚 API Reference\n\n### `ThemeProvider`\n\n| Prop                | Type                                     | Default        | Description                   |\n| ------------------- | ---------------------------------------- | -------------- | ----------------------------- |\n| `children`          | `ReactNode`                              | —              | Your app components           |\n| `defaultTheme`      | `'light' \\| 'dark' \\| 'system'`          | `'system'`     | Initial theme                 |\n| `enableSystemTheme` | `boolean`                                | `true`         | Enable system theme detection |\n| `config`            | `ThemeConfig`                            | `{}`           | Theme configuration           |\n| `attribute`         | `'class' \\| 'data-theme' \\| 'data-mode'` | `'data-theme'` | Attribute for theme           |\n| `disableStorage`    | `boolean`                                | `false`        | Disable localStorage          |\n| `enableSSR`         | `boolean`                                | `true`         | Enable SSR support (no FOUC)  |\n| `nonce`             | `string`                                 | —              | CSP nonce for inline styles   |\n\n### `useTheme()`\n\nReturns an object with:\n\n| Property        | Type                               | Description                    |\n| --------------- | ---------------------------------- | ------------------------------ |\n| `theme`         | `'light' \\| 'dark' \\| 'system'`    | Current theme mode             |\n| `setTheme`      | `(theme) =\u003e void`                  | Set theme mode                 |\n| `variant`       | `string \\| undefined`              | Current variant name           |\n| `setVariant`    | `((variant) =\u003e void) \\| undefined` | Set theme variant              |\n| `resolvedTheme` | `'light' \\| 'dark'`                | Actual theme (system resolved) |\n| `systemTheme`   | `'light' \\| 'dark'`                | OS theme preference            |\n| `themes`        | `string[]`                         | Available theme names          |\n| `refreshTheme`  | `() =\u003e void`                       | Force theme refresh            |\n\n### `ThemeConfig`\n\n```typescript\ninterface ThemeConfig {\n  light?: ThemeColors | ThemeVariant[];\n  dark?: ThemeColors | ThemeVariant[];\n  variants?: Record\u003cstring, ThemeColors\u003e;\n  cssVarPrefix?: string; // Default: 'themesx'\n  storageKey?: string; // Default: 'themesx-theme'\n  disableTransitions?: boolean;\n  transitionDuration?: number; // Default: 300ms\n  applyToBody?: boolean;\n  forceColorScheme?: boolean;\n  styleTarget?: HTMLElement;\n}\n```\n\n### `ThemeColors`\n\n```typescript\ninterface ThemeColors {\n  background?: ColorValue;\n  foreground?: ColorValue;\n  primary?: ColorValue;\n  secondary?: ColorValue;\n  accent?: ColorValue;\n  muted?: ColorValue;\n  border?: ColorValue;\n  ring?: ColorValue;\n  card?: ColorValue;\n  cardForeground?: ColorValue;\n  // ... and more, plus custom properties\n  [key: string]: ColorValue | undefined;\n}\n```\n\n### Built-in Presets\n\n```javascript\nimport { themePresets } from \"themesx\";\n\nthemePresets.light; // Default light\nthemePresets.dark; // Default dark\nthemePresets.amoled; // AMOLED dark\nthemePresets.warmLight; // Warm beige tones\nthemePresets.coolDark; // Cool navy tones\n```\n\n### Utility Functions\n\n```javascript\nimport { createTheme, mergeThemes } from \"themesx\";\n\n// Create a theme config\nconst myTheme = createTheme({\n  light: { background: \"#fff\" },\n  dark: { background: \"#000\" },\n});\n\n// Merge multiple configs\nconst combined = mergeThemes(baseTheme, customTheme);\n```\n\n---\n\n## 🎯 Framework Integration\n\n### Next.js (App Router)\n\n```tsx\n// app/layout.tsx\nimport { ThemeProvider } from \"themesx\";\n\nexport default function RootLayout({ children }) {\n  return (\n    \u003chtml lang=\"en\" suppressHydrationWarning\u003e\n      \u003cbody\u003e\n        \u003cThemeProvider config={{ applyToBody: true }}\u003e{children}\u003c/ThemeProvider\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n  );\n}\n```\n\n### Next.js (Pages Router)\n\n```tsx\n// pages/_app.tsx\nimport { ThemeProvider } from \"themesx\";\n\nexport default function App({ Component, pageProps }) {\n  return (\n    \u003cThemeProvider\u003e\n      \u003cComponent {...pageProps} /\u003e\n    \u003c/ThemeProvider\u003e\n  );\n}\n```\n\n### Vite + React\n\n```tsx\n// src/main.tsx\nimport { ThemeProvider } from \"themesx\";\nimport ReactDOM from \"react-dom/client\";\nimport App from \"./App\";\n\nReactDOM.createRoot(document.getElementById(\"root\")!).render(\n  \u003cThemeProvider config={{ applyToBody: true }}\u003e\n    \u003cApp /\u003e\n  \u003c/ThemeProvider\u003e\n);\n```\n\n### Remix\n\n```tsx\n// app/root.tsx\nimport { ThemeProvider } from \"themesx\";\nimport { Outlet } from \"@remix-run/react\";\n\nexport default function App() {\n  return (\n    \u003chtml lang=\"en\"\u003e\n      \u003cbody\u003e\n        \u003cThemeProvider\u003e\n          \u003cOutlet /\u003e\n        \u003c/ThemeProvider\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n  );\n}\n```\n\n### Gatsby\n\n```jsx\n// gatsby-browser.js \u0026 gatsby-ssr.js\nimport { ThemeProvider } from \"themesx\";\n\nexport const wrapRootElement = ({ element }) =\u003e (\n  \u003cThemeProvider\u003e{element}\u003c/ThemeProvider\u003e\n);\n```\n\n### Astro\n\n```jsx\n// src/components/App.jsx\nimport { ThemeProvider } from \"themesx\";\n\nexport default function App() {\n  return (\n    \u003cThemeProvider\u003e\n      \u003cYourApp /\u003e\n    \u003c/ThemeProvider\u003e\n  );\n}\n```\n\n---\n\n## 📖 More Examples\n\nCheck out [EXAMPLES.md](./EXAMPLES.md) for:\n\n- Advanced color configurations (OKLCH, RGB, HSL)\n- Multiple theme variants\n- Real-world component examples\n- CSS integration patterns\n- Framework-specific advanced setups\n\n---\n\n## 🆚 Comparison with next-themes\n\n| Feature                 | ThemesX   | next-themes     |\n| ----------------------- | --------- | --------------- |\n| Custom Colors (Hex)     | ✅        | ❌              |\n| Custom Colors (OKLCH)   | ✅        | ❌              |\n| Theme Variants          | ✅        | ❌              |\n| Built-in Presets        | ✅        | ❌              |\n| CSS Variable Generation | ✅ Auto   | Manual          |\n| TypeScript              | ✅ Full   | Partial         |\n| Maintenance             | ✅ Active | ⚠️ Discontinued |\n| SSR Support             | ✅        | ✅              |\n| System Theme            | ✅        | ✅              |\n\n---\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n---\n\n## 📄 License\n\nThis project is licensed under the GPL-3.0-or-later License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimkkingshuk%2Fthemesx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimkkingshuk%2Fthemesx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimkkingshuk%2Fthemesx/lists"}