{"_id":"@asafarim/themeswitch","_rev":"3-fe182204af63948b5efbfa2814fa16fa","name":"@asafarim/themeswitch","description":"A React package for theme switching between light and dark modes, utilizing a context provider and a switcher component.","dist-tags":{"latest":"28.6.2024"},"versions":{"0.0.1":{"name":"@asafarim/themeswitch","version":"0.0.1","author":{"name":"Ali"},"license":"MIT","_id":"@asafarim/themeswitch@0.0.1","dist":{"shasum":"c683b127c243c3322106e7b0df524371413b485a","tarball":"https://registry.npmjs.org/@asafarim/themeswitch/-/themeswitch-0.0.1.tgz","fileCount":12,"integrity":"sha512-dI4BDRsx03E7bYc3+pNwbqRK03BgtzQYIxYriGuRGrvupMghXZLZRy/DjqUQ0HuhLOulXtWvijPYsno9qLHpVQ==","signatures":[{"sig":"MEUCIQDfFvjV58TVCQNActYkHjTP9vQP1IxN4Av13j4fhSOyHgIgWIylb2RBJdolTvOPywdkPK0MlKoniQ1LWRCaFMiqi0Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7935},"main":"index.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"asafarim.be","email":"asafarim.it@gmail.com"},"_npmVersion":"10.8.1","description":"A React package for theme switching between light and dark modes, utilizing a context provider and a switcher component.","directories":{},"_nodeVersion":"20.13.1","dependencies":{"react":"^18.3.1","react-dom":"^18.3.1","styled-components":"^6.1.11"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.5.2","@types/node":"^20.14.8","@types/react":"^18.3.3","@types/react-dom":"^18.3.0"},"_npmOperationalInternal":{"tmp":"tmp/themeswitch_0.0.1_1719227275051_0.19289017584461643","host":"s3://npm-registry-packages"}},"0.0.2":{"name":"@asafarim/themeswitch","version":"0.0.2","author":{"name":"Ali"},"license":"MIT","_id":"@asafarim/themeswitch@0.0.2","dist":{"shasum":"bc9bf09bcf6c03ecdbdf7625d4bbe8ef998024c4","tarball":"https://registry.npmjs.org/@asafarim/themeswitch/-/themeswitch-0.0.2.tgz","fileCount":12,"integrity":"sha512-n6Wb3Qpcymg/CtHXba6QFOolXQ2pGInGp1vB68xyHFdlO54/aaSHCKztSkC59u/6B21t/SSZcI04Vac/l6DSvw==","signatures":[{"sig":"MEUCIQC2JcB0NZOecC1aJtEPz73XJb1c7p62RNc1yclxUGM0bAIgOc6bgZ8CD7pVSIHZqX8mq2ikmi2/lhgbQTIOB1ia1nw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7935},"main":"index.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"asafarim.be","email":"asafarim.it@gmail.com"},"_npmVersion":"10.8.1","description":"A React package for theme switching between light and dark modes, utilizing a context provider and a switcher component.","directories":{},"_nodeVersion":"20.13.1","dependencies":{"react":"^18.3.1","react-dom":"^18.3.1","styled-components":"^6.1.11"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.5.2","@types/node":"^20.14.8","@types/react":"^18.3.3","@types/react-dom":"^18.3.0"},"_npmOperationalInternal":{"tmp":"tmp/themeswitch_0.0.2_1719227685777_0.1443234110882703","host":"s3://npm-registry-packages"}},"24.6.2024":{"name":"@asafarim/themeswitch","version":"24.6.2024","author":{"name":"Ali"},"license":"MIT","_id":"@asafarim/themeswitch@24.6.2024","dist":{"shasum":"ba9744749c1e9357fe74ac19950531b8deb6ff0b","tarball":"https://registry.npmjs.org/@asafarim/themeswitch/-/themeswitch-24.6.2024.tgz","fileCount":12,"integrity":"sha512-KnzmEgOYcS3eznxic/rtsDrSHzLCGsGjgw5XFllcUgN22rKJDeoO4g5C1DiTYeL9XsbD0tx/Ki5SUwrqaDkBAA==","signatures":[{"sig":"MEYCIQDVuTPkdqfrtCmvyhfWPKQOxG+37GYGPC2aA0h4Ntl4IQIhAOGPxlsPw29/bQ4tdyMMx6pDvmxjBQvGNry4INycR6x+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7939},"main":"index.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"asafarim.be","email":"asafarim.it@gmail.com"},"_npmVersion":"10.8.1","description":"A React package for theme switching between light and dark modes, utilizing a context provider and a switcher component.","directories":{},"_nodeVersion":"20.13.1","dependencies":{"react":"^18.3.1","react-dom":"^18.3.1","styled-components":"^6.1.11"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.5.2","@types/node":"^20.14.8","@types/react":"^18.3.3","@types/react-dom":"^18.3.0"},"_npmOperationalInternal":{"tmp":"tmp/themeswitch_24.6.2024_1719227960539_0.9572371511378439","host":"s3://npm-registry-packages"}},"28.6.2024":{"name":"@asafarim/themeswitch","version":"28.6.2024","main":"index.ts","scripts":{"start":"tsc --watch","test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Ali"},"license":"MIT","description":"A React package for theme switching between light and dark modes, utilizing a context provider and a switcher component.","devDependencies":{"@types/node":"^20.14.8","@types/react":"^18.3.3","@types/react-dom":"^18.3.0","typescript":"^5.5.2"},"dependencies":{"react":"^18.3.1","react-dom":"^18.3.1","styled-components":"^6.1.11"},"_id":"@asafarim/themeswitch@28.6.2024","_nodeVersion":"20.13.1","_npmVersion":"10.8.1","dist":{"integrity":"sha512-JJTeg5aIfm2Je97c24vv3iyoAqs+36EvYGutfAo44Les0CRfOfozehwDe5NHJfr0+JBlU08X0WIwmpZFN0WnwA==","shasum":"f1c917734f36c9971b06b86f12b365089d73e8c6","tarball":"https://registry.npmjs.org/@asafarim/themeswitch/-/themeswitch-28.6.2024.tgz","fileCount":12,"unpackedSize":8929,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkCfg9oRV8jZYeaPiHBxTci+XkKYMFcN3Yu0XwdR/2gQIgDwR2hI/YerFJHLe9yfuCEuDqVijz8RKak3bHsfkkmxo="}]},"_npmUser":{"name":"asafarim.be","email":"asafarim.it@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/themeswitch_28.6.2024_1719584972141_0.5626741005985101"},"_hasShrinkwrap":false}},"time":{"created":"2024-06-24T11:07:54.926Z","modified":"2024-06-28T14:29:32.539Z","0.0.1":"2024-06-24T11:07:55.217Z","0.0.2":"2024-06-24T11:14:45.916Z","24.6.2024":"2024-06-24T11:19:20.679Z","28.6.2024":"2024-06-28T14:29:32.367Z"},"maintainers":[{"name":"asafarim.be","email":"asafarim.it@gmail.com"}],"author":{"name":"Ali"},"license":"MIT","readme":"# Package @asafarim/themeswitch\r\n\r\nA React package for theme switching between light and dark modes, utilizing a context provider and a switcher component.\r\n\r\n## Installation\r\n\r\nTo install the package, run the following command:\r\n\r\n```sh\r\nnpm install @asafarim/themeswitch\r\n```\r\n\r\nor with Yarn:\r\n\r\n```sh\r\nyarn add @asafarim/themeswitch\r\n```\r\n\r\n## Usage\r\n\r\n### ThemeProvider\r\n\r\nWrap your application with the `ThemeProvider` to provide theme context to your components.\r\n\r\n```tsx\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ThemeProvider } from '@asafarim/themeswitch';\r\nimport App from './App';\r\n\r\nReactDOM.render(\r\n  <ThemeProvider>\r\n    <App />\r\n  </ThemeProvider>,\r\n  document.getElementById('root')\r\n);\r\n```\r\n\r\n### useTheme Hook\r\n\r\nUse the `useTheme` hook to access the current theme and the `toggleTheme` function.\r\n\r\n```tsx\r\nimport React from 'react';\r\nimport { useTheme } from '@asafarim/themeswitch';\r\n\r\nconst ThemedComponent: React.FC = () => {\r\n  const { theme, toggleTheme } = useTheme();\r\n\r\n  return (\r\n    <div>\r\n      <p>Current theme: {theme}</p>\r\n      <button onClick={toggleTheme}>Toggle Theme</button>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default ThemedComponent;\r\n```\r\n\r\n### ThemeSwitcher Component\r\n\r\nUse the `ThemeSwitcher` component to provide a ready-made theme switcher.\r\n\r\n```tsx\r\nimport React from 'react';\r\nimport { ThemeSwitcher } from '@asafarim/themeswitch';\r\n\r\nconst App: React.FC = () => {\r\n  return (\r\n    <div>\r\n      <h1>My Themed App</h1>\r\n      <ThemeSwitcher />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default App;\r\n```\r\n\r\n### CSS Styles\r\n\r\nInclude the following CSS styles for the `ThemeSwitcher` component:\r\n\r\n```css\r\n/* ThemeSwitcher.css */\r\n.themeSwitcherToggle {\r\n  cursor: pointer;\r\n  font-size: 1.5rem;\r\n  font-weight: 600;\r\n  color: #fff;\r\n  background-color: #555;\r\n  border: none;\r\n  border-radius: 5px;\r\n  padding: 0.5rem 1rem;\r\n  transition: all 0.2s ease-in-out;\r\n  outline: none;\r\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);\r\n  width: 100px;\r\n}\r\n\r\n.toggle-icon {\r\n  width: 10px;\r\n  height: 10px;\r\n  background-color: #fff;\r\n  border-radius: 50%;\r\n  border: 1px solid #fff;\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n\r\n.ThemeSwitcherToggleIcon {\r\n  width: 10px;\r\n  height: 10px;\r\n  background-color: #fff;\r\n  border-radius: 50%;\r\n  border: 1px solid #fff;\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n\r\n.toggle-tooltip {\r\n  position: absolute;\r\n  top: 100%;\r\n  left: 50%;\r\n  transform: translate(-50%, 0);\r\n  background-color: #555;\r\n  color: #f01212;\r\n  padding: 0.5rem 1rem;\r\n  border-radius: 5px;\r\n  font-size: 1.2rem;\r\n  font-weight: 600;\r\n}\r\n\r\n.rightAligned {\r\n  margin-left: auto;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n```\r\n\r\n## Example\r\n\r\nHere is a complete example of how to use the package in your project:\r\n\r\n```tsx\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { ThemeProvider, ThemeSwitcher } from '@asafarim/themeswitch';\r\nimport './ThemeSwitcher.css';\r\n\r\nconst App: React.FC = () => {\r\n  return (\r\n    <ThemeProvider>\r\n      <div>\r\n        <h1>My Themed App</h1>\r\n        <ThemeSwitcher />\r\n      </div>\r\n    </ThemeProvider>\r\n  );\r\n};\r\n\r\nReactDOM.render(<App />, document.getElementById('root'));\r\n```\r\n\r\n## License\r\n\r\nThis project is licensed under the MIT License.\r\n\r\n## Author\r\n\r\nAli Safari\r\n","readmeFilename":"README.md"}