{"_id":"react-vario-theme","_rev":"41-6f2efe37e330791f0326799892a11a2c","name":"react-vario-theme","dist-tags":{"latest":"3.7.0","beta":"3.7.0-beta.2"},"versions":{"0.1.0":{"name":"react-vario-theme","version":"0.1.0","main":"dist/index.js","module":"dist/index.js","bin":{"compile":"dist/compile.js"},"types":"dist","scripts":{"tsc":"tsc"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/node":"^20.6.0","typescript":"^5.2.2","@types/react":"^18.2.6","react":"18.2.0"},"_id":"react-vario-theme@0.1.0","gitHead":"a67162a2ecf386a9001b694b449658e2d7297a0b","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-Fg595c6QjO1U9bHGIwhuVz5FS0ZeDZFijK4DXZ9rnPWMjoIFJxEBiDev4SLXApGxoppu1gF5UQuNZPZ6jxcJjw==","shasum":"b7c1c3bddb7c69873dcca879c05685fe9bfb5515","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-0.1.0.tgz","fileCount":21,"unpackedSize":21616,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXvBCyE3/w3+dXb1PpJS7W+QlH6Vb55dfznP/n8edYrAIgaQxo04yNVPMYp+kqxeFyQYOcDAN0bMAYwfP5ZRKCkf8="}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_0.1.0_1695232133452_0.158209271612481"},"_hasShrinkwrap":false},"1.0.0":{"name":"react-vario-theme","version":"1.0.0","main":"dist/index.js","module":"dist/index.js","bin":{"compile":"dist/compile.js"},"types":"dist","scripts":{"tsc":"tsc"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/node":"^20.6.0","typescript":"^5.2.2","@types/react":"^18.2.6","react":"18.2.0"},"_id":"react-vario-theme@1.0.0","gitHead":"83337347aa20fc79f6f4a4052f1229b5d020efce","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-CAdbu0h896hFsmV3UJHc4u8+MepCamU0WXQ6OfKsAJ5qdRsbwU5n+F3ZjGwApZghY2Mtb6NkXxlfk+yiydRX4w==","shasum":"a97f098cd0b23859e5d1e7366301f71cb7d186b4","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-1.0.0.tgz","fileCount":22,"unpackedSize":22184,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAFodfGKmHv3rMVSma2M9dhzX+kEnHshU2Q5hFM5rxngIhAOrID4e9/kgeQ4FKgDJE+Uw2Ptwwv4oKvG3tyqz2sjI8"}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_1.0.0_1695242436758_0.804561399642566"},"_hasShrinkwrap":false},"1.0.1":{"name":"react-vario-theme","version":"1.0.1","main":"dist/index.js","module":"dist/index.js","bin":{"compile":"dist/compile.js"},"types":"dist","scripts":{"tsc":"tsc"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/node":"^20.6.0","typescript":"^5.2.2","@types/react":"^18.2.6","react":"18.2.0"},"_id":"react-vario-theme@1.0.1","gitHead":"0473bb94f11dabf0812e63c3e071ee399e6e5170","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-YeM9zME7wFsDHTmsEsOCKHxPlG69ExTtFLq1VVZ2TF4Wykhgdc+Ud7DeTiLKBSLJ4xZelruf93BPeaJPpVd0rA==","shasum":"053d69e1ed8ef233ecc75fedb3b37f724bd644f5","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-1.0.1.tgz","fileCount":21,"unpackedSize":21662,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC357FNdhndw7Yzygc+oXnjO8knUcl+bjitp7peKXkMfwIhAKz5A0Rh2J3lfQf2MpWqnyiUELE3FS6riYzqnVpcTT19"}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_1.0.1_1695274427361_0.16068505069962757"},"_hasShrinkwrap":false},"1.0.2":{"name":"react-vario-theme","version":"1.0.2","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","main":"dist/index.js","module":"dist/index.js","bin":{"compile":"dist/compile.js"},"types":"dist","scripts":{"tsc":"tsc"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/node":"^20.6.0","typescript":"^5.2.2","@types/react":"^18.2.6","react":"18.2.0"},"_id":"react-vario-theme@1.0.2","gitHead":"e9620120a8ef212f0a9dbdf88c6d3b11d0e0a31e","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-F7tHuG05vZXNy7JaB4PzY/OT3e5EgbIwmP+LO/khmf1o7S2zvLORY+C9kJptF4A4muBl4jxNF33gItQx8zdf8w==","shasum":"99843922c5c2e60d0896dcb02a16951bc5bccb90","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-1.0.2.tgz","fileCount":22,"unpackedSize":22430,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAiFQxGDLSPD6UJcGqW3mw4/VNJjwYWuVwqCZu/xl9FAIhAJGOnuYFPn4zABAW2LbxsjHsHjwFea/EhqqDPLFsEzZC"}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_1.0.2_1695275136870_0.03296107007890536"},"_hasShrinkwrap":false},"1.0.3":{"name":"react-vario-theme","version":"1.0.3","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","main":"dist/index.js","module":"dist/index.js","bin":{"compile":"dist/compile.js"},"types":"dist","scripts":{"tsc":"tsc"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/node":"^20.6.0","typescript":"^5.2.2","@types/react":"^18.2.6","react":"18.2.0"},"_id":"react-vario-theme@1.0.3","gitHead":"d54357741810ef26660c537e0f77622dbb7a6ead","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-Po69A2pP3W9hoq2/P2sdrwGzaJcGiipHrcVEqVM437jSCW7STDNzpUGf7qWJU4qOQmzs42nDBfZhouT8vlJgqg==","shasum":"6c2eb576b7083e33e833afdec345a5e764c1adf9","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-1.0.3.tgz","fileCount":22,"unpackedSize":22440,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAIGu5pDfdKQv64qFaF7CK8Ixk7xxs7+G9rvsjG/Ok44AiAV5AlIlMdc4Q++7IqmRi0Qgq/wREJrhsLrtnEJ5596Kg=="}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_1.0.3_1695275267187_0.9822362950081696"},"_hasShrinkwrap":false},"1.0.4":{"name":"react-vario-theme","version":"1.0.4","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","main":"dist/index.js","module":"dist/index.js","bin":{"compile":"dist/compile.js"},"types":"dist","scripts":{"tsc":"tsc"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/node":"^20.6.0","typescript":"^5.2.2","@types/react":"^18.2.6","react":"18.2.0"},"_id":"react-vario-theme@1.0.4","gitHead":"d553d655dcfb7cf4ddad89a2e14a906067ecb13f","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-EE6wA6xi5F2IVEjmm6rn4wxemiCoVE235F3v+OBfshZK7na1SkpTPFvsbxC24mGRDbxWmSj4BRRUC6MP6xNr1A==","shasum":"2a01c04967594219ddc2550c0486c2ebbf6a8096","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-1.0.4.tgz","fileCount":22,"unpackedSize":22315,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGg6zI53jK8r/yKmLvV9cRfVpgxBKShIcrJzAYdDFZdTAiEA6H6Atv7pwabhlmqD4PyiPmpiBfho6bhfWKiEefCCSDY="}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_1.0.4_1695275362841_0.2946691500886389"},"_hasShrinkwrap":false},"1.0.5":{"name":"react-vario-theme","version":"1.0.5","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/index.js","module":"dist/index.js","bin":{"compile":"dist/compile.js"},"types":"dist","scripts":{"tsc":"tsc"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/node":"^20.6.0","typescript":"^5.2.2","@types/react":"^18.2.6","react":"18.2.0"},"_id":"react-vario-theme@1.0.5","gitHead":"5125e83e2de1d02ae4ffe0a3ea73952fcfadfe34","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-oPvZ1fDuJ/xj+W3BW0QgcQHZabe4dD477l4Mr3ldnofwR8gi/W4CeF03No5ELSfjn9N9D2ZPQmtPLBBzI/2PXQ==","shasum":"936691cdc8a5b5e69cd5b08ffa747321a8f02d33","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-1.0.5.tgz","fileCount":22,"unpackedSize":22496,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqk313QA95e4IaBrwPYICsBKhV8EcetkOnhXgF6oV8hAIgS3e03UMbE2jzo7xdZlLXBtcio2XOigpCtWE2UJWIuQE="}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_1.0.5_1695275616566_0.6353707299170053"},"_hasShrinkwrap":false},"2.0.0":{"name":"react-vario-theme","version":"2.0.0","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/index.js","module":"dist/index.js","bin":{"compile":"dist/compile.js"},"types":"dist","scripts":{"tsc":"tsc"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","ts-node":"^10.9.1","typescript":"^5.2.2"},"_id":"react-vario-theme@2.0.0","gitHead":"6813375095508ecaaba063dbbd73e2c6b754fe14","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-3DbupNHgJx/Sdv+R0xS7GyoUrzwpIr0xKYfUa2AJLVBZRUZF37787KbvcLUlbh9CKKX5auQ0UffVpKkfVwvp3g==","shasum":"1e5c8fa645cbfdeccb3de6d04350900f60f44979","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-2.0.0.tgz","fileCount":28,"unpackedSize":38960,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaRbO72cd794Oy1mzvtVsi2dbGXklWQjgTls/Z7L8KwwIgVCuY8jm4/56FjOXaz8+Uep07dcYGEJ7GtlZGTAm8SLM="}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_2.0.0_1695464290322_0.633320824618538"},"_hasShrinkwrap":false},"2.0.1":{"name":"react-vario-theme","version":"2.0.1","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/index.js","module":"dist/index.js","bin":{"compile":"dist/compile.js"},"types":"dist","scripts":{"tsc":"tsc"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","ts-node":"^10.9.1","typescript":"^5.2.2"},"_id":"react-vario-theme@2.0.1","gitHead":"a54322f01b73a3e28f8ad245510c4a49411f496d","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-j4cqqYWTKsRfLplzY3Yj7Qf8KalfxtXsEM4i87KogJLln8jd2DQZy8nxmtUVN6D4sIDWWwWaTq18R8b3NZ1AZg==","shasum":"5d44327bd8ea78742ced51d3d8521fe9bfd6c4c2","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-2.0.1.tgz","fileCount":28,"unpackedSize":38968,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTEiqh1awQSu7hItvadEAXWdFNHrUXReDqbd9rsGf0UAIgejip4Ua6EizxXpilH4q2gRRppl08xZEeXT8bMLR/Kv8="}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_2.0.1_1695464888179_0.5764172347928687"},"_hasShrinkwrap":false},"3.0.0-beta.0":{"name":"react-vario-theme","version":"3.0.0-beta.0","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/index.js","module":"dist/index.js","bin":{"compile":"dist/compile.js"},"types":"dist","scripts":{"tsc":"tsc"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","ts-node":"^10.9.1","typescript":"^5.2.2"},"_id":"react-vario-theme@3.0.0-beta.0","readme":"# react-vario-theme\r\n\r\n![npm](https://img.shields.io/npm/v/react-vario-theme)\r\n\r\n**react-vario-theme** is a tool for managing themes in React applications. Easily convert a TypeScript theme object into CSS variables and seamlessly switch between multiple themes using the **ThemeVarioProvider** context.\r\n\r\n## Features\r\n\r\n- 💡 Easily define themes in a TypeScript object\r\n- 🔄 Instant theme switching\r\n- 🎨 Access theme colors in react using ThemeProvider\r\n- 💫 Supports multiple themes\r\n- 🤖 Built-in TypeScript support for strong typing\r\n","readmeFilename":"README.md","gitHead":"e85487cd4046bd8c03f3f0ce8df7f999e5a28c75","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-5YDyaLsIbykgcCgZpILBEp5ciJvEQqVhWqTaYHsdKraVWIMVOoOqWUcU4tNzTjLZ4ZnqtuugS3pgKzgP/K6IQw==","shasum":"cbbf595f5607223610251a5b67c83fee682b0d07","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.0.0-beta.0.tgz","fileCount":28,"unpackedSize":41664,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA7iN0vqbHrUsUHz84fwbU3smfl0o6KO1oCSjZeteEJGAiARnfIZgf8SEkS8mAoeJp8wP0rxKiPp0/RGKSGo1DtWew=="}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.0.0-beta.0_1695541924808_0.8827472112620467"},"_hasShrinkwrap":false},"3.0.0-beta.1":{"name":"react-vario-theme","version":"3.0.0-beta.1","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/index.js","module":"dist/index.js","bin":{"compile":"dist/compile.js"},"types":"dist","scripts":{"tsc":"tsc"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","ts-node":"^10.9.1","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.0.0-beta.1","readme":"# react-vario-theme\r\n\r\n![npm](https://img.shields.io/npm/v/react-vario-theme)\r\n\r\n**react-vario-theme** is a tool for managing themes in React applications. Easily convert a TypeScript theme object into CSS variables and seamlessly switch between multiple themes using the **ThemeVarioProvider** context.\r\n\r\n## Features\r\n\r\n- 💡 Easily define themes in a TypeScript object\r\n- 🌟 Singular Source of Truth\r\n- 🔄 Instant theme switching\r\n- 🎨 Access theme colors in react using ThemeProvider\r\n- 💫 Supports multiple themes\r\n- 🌈 Seamless Tailwind Integration by automatically generating all theme variables for Tailwind\r\n- 🤖 Built-in TypeScript support for strong typing\r\n\r\n## Usage\r\n\r\n### 1. Define your theme\r\n\r\nCreate a TypeScript object with your theme specifications. Colors will always be needed and can contain as many color schemes as you want. **Important:** To make sure that your theme will work as intended use it in its own file, for example theme.ts\r\n\r\n```typescript\r\nimport { ThemeType } from \"react-vario-theme\";\r\n\r\nexport const varoTheme = {\r\n  colors: {\r\n    light: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n    dark: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n  },\r\n  padding: {\r\n    sm: \"5px\",\r\n    md: \"10px\",\r\n    lg: \"20px\",\r\n  },\r\n} as const satisfies ThemeType;\r\n\r\n```\r\n\r\n### 2. Generate css variables\r\nnpx react-vario-theme compile \"path to your theme object\" \"path and name of the css/sass file you want to create\"\r\nWhen the css variables are generated they can be used in css or in react using the theme context provider. \r\n```\r\nnpx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss\r\n```\r\n### 3. Optional: Tailwind support\r\nYou can get all your theme css variables in tailwind using \"tailwindTheme\"\r\n```typescript\r\nimport { tailwindColors, tailwindTheme } from \"react-vario-theme\";\r\nimport { type Config } from \"tailwindcss\";\r\nimport { varoTheme } from \"./src/styles/theme\";\r\n\r\nexport default {\r\n  content: [\"./src/**/*.{js,ts,jsx,tsx}\"],\r\n  theme: tailwindTheme(varoTheme),\r\n  plugins: [],\r\n} satisfies Config;\r\n\r\n```\r\n\r\n### 3. Use `VarioThemeProvider`\r\n\r\nWrap your application with the `VarioThemeProvider`.\r\n\r\n```jsx\r\nimport { varoTheme } from \"~/styles/theme\";\r\nimport { VarioThemeProvider } from 'react-vario-theme';\r\n\r\nconst App = () => {\r\n  return (\r\n    <VarioThemeProvider theme={varoTheme}>\r\n      <Component {...pageProps} />\r\n    </VarioThemeProvider>\r\n  );\r\n};\r\n```\r\n\r\n### 4. Access Theme Variables\r\n\r\nYou can now access theme variables anywhere within your components.\r\n\r\n```jsx\r\nimport { varoTheme } from \"~/styles/theme\";\r\nconst MyComponent = () => {\r\n  const { theme, colorScheme, changeColorScheme } =\r\n    useVarioTheme<typeof varoTheme>();\r\n  \r\n  return (\r\n    <button\r\n      style={{ backgroundColor: theme.colors.primary }}\r\n    >\r\n      Click Me\r\n    </button>\r\n  );\r\n};\r\n```\r\n\r\n## API\r\n\r\n### `VarioThemeProvider`\r\n\r\nProps:\r\n\r\n- `theme`: The theme object containing key-value pairs of CSS variables.\r\n\r\n### `useCustomTheme<T>()`\r\n\r\nReturns:\r\n\r\n- `theme, colorScheme, changeColorScheme`: An object containing the colors and variables of the theme, strongly typed with TypeScript when using `typeof`. All the variables will be equal to the css variable generated by react-vario-theme compile\r\n","readmeFilename":"README.md","gitHead":"02b0a25e4a325cb27bdd690d611a2e0b57ee59d6","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-PwVHrw9xCWRt1AXdZ2UBzET0e7oFHlrzH0hHLZTUfdJpNmSUidawparslj9rUAqiEXkoJJ0N7pMLDxCrY/hYTw==","shasum":"fc8ac92216a5af1384756a406443b9c5e7fb4cfd","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.0.0-beta.1.tgz","fileCount":26,"unpackedSize":33936,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDFBdFpzPpDBR5VGTyzVD6OH70Gb1YE3AGOdHRspU6HWAiAArr97koErQK0eyJfC4Vkdd/aFb8b0HAs2VsB52keC8g=="}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.0.0-beta.1_1695575716239_0.8157893128096778"},"_hasShrinkwrap":false},"3.0.0":{"name":"react-vario-theme","version":"3.0.0","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/index.js","module":"dist/index.js","bin":{"compile":"dist/compile.js"},"types":"dist","scripts":{"tsc":"tsc"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","ts-node":"^10.9.1","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.0.0","gitHead":"15c36bd7d8eadb48e58419f0223005e8ce04ea17","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-vmhHz1idZuuXYBZYoIF57t13gGmpk+UjFB366eir3298rewgJ2QxqES53xubO2xNFqKrMok6suYzmW+b+qEgdQ==","shasum":"b877895c6ae4cc7629926adb4d7755a8ee6743e0","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.0.0.tgz","fileCount":30,"unpackedSize":36973,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvjPHoER/qgDZpZFDRxkZH+yA8FTZrrFqp6cjH7vhfjwIhALprt9kjGcnmI0CJlZLiVw8rmXY8GJIa+UtVt/6ty8Q2"}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.0.0_1695581304193_0.5023693549629435"},"_hasShrinkwrap":false},"3.0.1":{"name":"react-vario-theme","version":"3.0.1","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/index.js","module":"dist/index.js","bin":{"compile":"dist/compile.js"},"types":"dist","scripts":{"tsc":"tsc"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","ts-node":"^10.9.1","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.0.1","gitHead":"e182e5450841e4caa8d29c8b11753e54b0a6c45d","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-m5tC1KPCgzktw5JdV/06146jMImOop+LM/KbUND5tyY36ujunTv3c0+6KWt+FOeY2JWTzlFtKnwJj/DHuJqZSQ==","shasum":"dbaaca4cdcf95b70f1028689dafce76bff906cca","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.0.1.tgz","fileCount":30,"unpackedSize":36976,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZ+uH0FIeppv/RWqF93LsiCtdPPXtUOMOsx85sKFfIcQIhAL0BoeQoRyAj3syENPO9qGNKXYrmUbNfwVLipKhWEbjT"}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.0.1_1695586899469_0.5638947292237639"},"_hasShrinkwrap":false},"3.0.2":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.0.2","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/index.js","module":"dist/index.js","bin":{"compile":"dist/compile.js"},"types":"dist","scripts":{"tsc":"tsc"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","ts-node":"^10.9.1","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.0.2","gitHead":"0b6a3e26f6b9eaee448cf64e1a6496dd2eccd05b","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-yrlbJuevK8fyTuoQgrH5Jof4ZSBZNf/Y3d5/p1JovjdBxtwI1jvSYvwA87Q8jTtO+LgHoOze1iwlb0KxQxe5XQ==","shasum":"340283dbce457e23a81618190e4ede6990ed6d71","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.0.2.tgz","fileCount":30,"unpackedSize":37133,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/Vih8FdOAJmx1lrH/uJ5EU1wBOmMc/2AY4qFC2LARjAIhAKKXTr0m1pAOn2zGYFIUHKijAzEPD5ivt5LcUXMDfhbd"}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.0.2_1695707371698_0.4073249007269413"},"_hasShrinkwrap":false},"3.1.0-beta.1":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.1.0-beta.1","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/index.js","module":"dist/index.js","bin":{"compile":"dist/compile.js"},"types":"dist","scripts":{"tsc":"tsc"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","ts-node":"^10.9.1","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.1.0-beta.1","readme":"# react-vario-theme\r\n\r\n![npm](https://img.shields.io/npm/v/react-vario-theme)\r\n\r\n**react-vario-theme** is a tool for managing themes in React applications. Easily convert a TypeScript theme object into CSS variables and seamlessly switch between multiple themes using the **ThemeVarioProvider** context.\r\n\r\n## Features\r\n\r\n- 💡 Easily define themes in a TypeScript object\r\n- 🌟 Singular Source of Truth\r\n- 🔄 Instant theme switching\r\n- 🎨 Access theme colors in react using ThemeProvider\r\n- 💫 Supports multiple themes\r\n- 🌈 Seamless Tailwind Integration by automatically generating all theme variables for Tailwind\r\n- 🤖 Built-in TypeScript support for strong typing\r\n\r\n## Usage\r\n\r\n### 1. Define your theme\r\n\r\nCreate a TypeScript object with your theme specifications. Colors will always be needed and can contain as many color schemes as you want. **Important:** To make sure that your theme will work as intended use it in its own file, for example theme.ts\r\n\r\n```typescript\r\nimport { ThemeType } from \"react-vario-theme\";\r\n\r\nexport const varoTheme = {\r\n  colors: {\r\n    light: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n    dark: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n  },\r\n  padding: {\r\n    sm: \"5px\",\r\n    md: \"10px\",\r\n    lg: \"20px\",\r\n  },\r\n} as const satisfies ThemeType;\r\n```\r\n\r\n### 2. Generate css variables\r\n\r\nnpx react-vario-theme compile \"path to your theme object\" \"path and name of the css/sass file you want to create\"\r\nWhen the css variables are generated they can be used in css or in react using the theme context provider.\r\n\r\n```\r\nCompile: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss\r\nWatch: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss --watch\r\n```\r\n\r\n### 3. Optional: Tailwind support\r\n\r\nYou can get all your theme css variables in tailwind using \"tailwindTheme\"\r\n\r\n```typescript\r\nimport { tailwindColors, tailwindTheme } from \"react-vario-theme\";\r\nimport { type Config } from \"tailwindcss\";\r\nimport { varoTheme } from \"./src/styles/theme\";\r\n\r\nexport default {\r\n  content: [\"./src/**/*.{js,ts,jsx,tsx}\"],\r\n  theme: tailwindTheme(varoTheme),\r\n  plugins: [],\r\n} satisfies Config;\r\n```\r\n\r\n### 3. Use `VarioThemeProvider`\r\n\r\nWrap your application with the `VarioThemeProvider`.\r\n\r\n```jsx\r\nimport { varoTheme } from \"~/styles/theme\";\r\nimport { VarioThemeProvider } from \"react-vario-theme\";\r\n\r\nconst App = () => {\r\n  return (\r\n    <VarioThemeProvider theme={varoTheme}>\r\n      <Component {...pageProps} />\r\n    </VarioThemeProvider>\r\n  );\r\n};\r\n```\r\n\r\n### 4. Access Theme Variables\r\n\r\nYou can now access theme variables anywhere within your components.\r\n\r\n```jsx\r\nimport { useVarioTheme } from \"react-vario-theme\";\r\nimport { varoTheme } from \"~/styles/theme\";\r\nconst MyComponent = () => {\r\n  const { theme, colorScheme, changeColorScheme } =\r\n    useVarioTheme<typeof varoTheme>();\r\n\r\n  return (\r\n    <button\r\n      style={{ backgroundColor: theme.colors.primary }}\r\n    >\r\n      Click Me\r\n    </button>\r\n  );\r\n};\r\n```\r\n\r\n## API\r\n\r\n### `VarioThemeProvider`\r\n\r\nProps:\r\n\r\n- `theme`: The theme object containing key-value pairs of CSS variables.\r\n\r\n### `useVarioTheme<T>()`\r\n\r\nReturns:\r\n\r\n- `theme, colorScheme, changeColorScheme`: An object containing the colors and variables of the theme, strongly typed with TypeScript when using `typeof`. All the variables will be equal to the css variable generated by react-vario-theme compile\r\n","readmeFilename":"README.md","gitHead":"357ffbfcb15f0d6cb1de8821b9d3538e0bba3841","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-wis7FUqqHKrbkTrk1w4g7PpkJhRU3qir5vq8ZfwtTpfkU0SSvY0XyvR+pDbb1DnzCipu+Q1M/tWIXgEaecOzkw==","shasum":"4e8289401f1c31cf15951abdc36d5e2084328e1c","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.1.0-beta.1.tgz","fileCount":30,"unpackedSize":35339,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDU1SqD9S0XimeMNQWSL3kyekJY6RtOKryqxOYwLETf7QIhALimwLfp3SsisaKtNTRXAskk2Pk6Ri+5Qgw2aHFMxyvL"}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.1.0-beta.1_1695921807874_0.8827089611633216"},"_hasShrinkwrap":false},"3.1.0-beta.2":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.1.0-beta.2","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/index.js","module":"dist/index.js","bin":{"compile":"dist/compile.js"},"types":"dist","scripts":{"tsc-cli":"tsc -p cli/tsconfig.json","tsc-components":"tsc -p components/tsconfig.json"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","ts-node":"^10.9.1","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.1.0-beta.2","readme":"# react-vario-theme\r\n\r\n![npm](https://img.shields.io/npm/v/react-vario-theme)\r\n\r\n**react-vario-theme** is a tool for managing themes in React applications. Easily convert a TypeScript theme object into CSS variables and seamlessly switch between multiple themes using the **ThemeVarioProvider** context.\r\n\r\n## Features\r\n\r\n- 💡 Easily define themes in a TypeScript object\r\n- 🌟 Singular Source of Truth\r\n- 🔄 Instant theme switching\r\n- 🎨 Access theme colors in react using ThemeProvider\r\n- 💫 Supports multiple themes\r\n- 🌈 Seamless Tailwind Integration by automatically generating all theme variables for Tailwind\r\n- 🤖 Built-in TypeScript support for strong typing\r\n\r\n## Usage\r\n\r\n### 1. Define your theme\r\n\r\nCreate a TypeScript object with your theme specifications. Colors will always be needed and can contain as many color schemes as you want. **Important:** To make sure that your theme will work as intended use it in its own file, for example theme.ts\r\n\r\n```typescript\r\nimport { ThemeType } from \"react-vario-theme\";\r\n\r\nexport const varoTheme = {\r\n  colors: {\r\n    light: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n    dark: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n  },\r\n  padding: {\r\n    sm: \"5px\",\r\n    md: \"10px\",\r\n    lg: \"20px\",\r\n  },\r\n} as const satisfies ThemeType;\r\n```\r\n\r\n### 2. Generate css variables\r\n\r\nnpx react-vario-theme compile \"path to your theme object\" \"path and name of the css/sass file you want to create\"\r\nWhen the css variables are generated they can be used in css or in react using the theme context provider.\r\n\r\n```\r\nCompile: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss\r\nWatch: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss --watch\r\n```\r\n\r\n### 3. Optional: Tailwind support\r\n\r\nYou can get all your theme css variables in tailwind using \"tailwindTheme\"\r\n\r\n```typescript\r\nimport { tailwindColors, tailwindTheme } from \"react-vario-theme\";\r\nimport { type Config } from \"tailwindcss\";\r\nimport { varoTheme } from \"./src/styles/theme\";\r\n\r\nexport default {\r\n  content: [\"./src/**/*.{js,ts,jsx,tsx}\"],\r\n  theme: tailwindTheme(varoTheme),\r\n  plugins: [],\r\n} satisfies Config;\r\n```\r\n\r\n### 3. Use `VarioThemeProvider`\r\n\r\nWrap your application with the `VarioThemeProvider`.\r\n\r\n```jsx\r\nimport { varoTheme } from \"~/styles/theme\";\r\nimport { VarioThemeProvider } from \"react-vario-theme\";\r\n\r\nconst App = () => {\r\n  return (\r\n    <VarioThemeProvider theme={varoTheme}>\r\n      <Component {...pageProps} />\r\n    </VarioThemeProvider>\r\n  );\r\n};\r\n```\r\n\r\n### 4. Access Theme Variables\r\n\r\nYou can now access theme variables anywhere within your components.\r\n\r\n```jsx\r\nimport { useVarioTheme } from \"react-vario-theme\";\r\nimport { varoTheme } from \"~/styles/theme\";\r\nconst MyComponent = () => {\r\n  const { theme, colorScheme, changeColorScheme } =\r\n    useVarioTheme<typeof varoTheme>();\r\n\r\n  return (\r\n    <button\r\n      style={{ backgroundColor: theme.colors.primary }}\r\n    >\r\n      Click Me\r\n    </button>\r\n  );\r\n};\r\n```\r\n\r\n## API\r\n\r\n### `VarioThemeProvider`\r\n\r\nProps:\r\n\r\n- `theme`: The theme object containing key-value pairs of CSS variables.\r\n\r\n### `useVarioTheme<T>()`\r\n\r\nReturns:\r\n\r\n- `theme, colorScheme, changeColorScheme`: An object containing the colors and variables of the theme, strongly typed with TypeScript when using `typeof`. All the variables will be equal to the css variable generated by react-vario-theme compile\r\n","readmeFilename":"README.md","gitHead":"762a4d577722f083964f102155e0f3aa35dd1e0e","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-5ajZ+8JN1J+mjTPW1nPBd/YyJmN9K3Zrayb6L7tsRjZ1HuVK3qu/XcxhwiDLwvMbaPXb9/OIzxMnT4DtmlSFVQ==","shasum":"0f68efc5bbf6ab2dfe7d000e8bdb324a76e6e909","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.1.0-beta.2.tgz","fileCount":18,"unpackedSize":24605,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHE5jPyv5za/EDkkWQ5/HeZfjzvvxT7E2Aa8pDRidtjpAiBq5QejEKLmU0gOYft/87eeEJMTvTjmXgfKftHfqoR3Mg=="}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.1.0-beta.2_1695924490029_0.189343005125852"},"_hasShrinkwrap":false},"3.1.0-beta.3":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.1.0-beta.3","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/index.js","module":"dist/index.js","bin":{"compile":"dist/compile.js"},"types":"dist","scripts":{"tsc-cli":"tsc -p cli/tsconfig.json","tsc-components":"tsc -p components/tsconfig.json"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","ts-node":"^10.9.1","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.1.0-beta.3","readme":"# react-vario-theme\r\n\r\n![npm](https://img.shields.io/npm/v/react-vario-theme)\r\n\r\n**react-vario-theme** is a tool for managing themes in React applications. Easily convert a TypeScript theme object into CSS variables and seamlessly switch between multiple themes using the **ThemeVarioProvider** context.\r\n\r\n## Features\r\n\r\n- 💡 Easily define themes in a TypeScript object\r\n- 🌟 Singular Source of Truth\r\n- 🔄 Instant theme switching\r\n- 🎨 Access theme colors in react using ThemeProvider\r\n- 💫 Supports multiple themes\r\n- 🌈 Seamless Tailwind Integration by automatically generating all theme variables for Tailwind\r\n- 🤖 Built-in TypeScript support for strong typing\r\n\r\n## Usage\r\n\r\n### 1. Define your theme\r\n\r\nCreate a TypeScript object with your theme specifications. Colors will always be needed and can contain as many color schemes as you want. **Important:** To make sure that your theme will work as intended use it in its own file, for example theme.ts\r\n\r\n```typescript\r\nimport { ThemeType } from \"react-vario-theme\";\r\n\r\nexport const varoTheme = {\r\n  colors: {\r\n    light: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n    dark: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n  },\r\n  padding: {\r\n    sm: \"5px\",\r\n    md: \"10px\",\r\n    lg: \"20px\",\r\n  },\r\n} as const satisfies ThemeType;\r\n```\r\n\r\n### 2. Generate css variables\r\n\r\nnpx react-vario-theme compile \"path to your theme object\" \"path and name of the css/sass file you want to create\"\r\nWhen the css variables are generated they can be used in css or in react using the theme context provider.\r\n\r\n```\r\nCompile: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss\r\nWatch: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss --watch\r\n```\r\n\r\n### 3. Optional: Tailwind support\r\n\r\nYou can get all your theme css variables in tailwind using \"tailwindTheme\"\r\n\r\n```typescript\r\nimport { tailwindColors, tailwindTheme } from \"react-vario-theme\";\r\nimport { type Config } from \"tailwindcss\";\r\nimport { varoTheme } from \"./src/styles/theme\";\r\n\r\nexport default {\r\n  content: [\"./src/**/*.{js,ts,jsx,tsx}\"],\r\n  theme: tailwindTheme(varoTheme),\r\n  plugins: [],\r\n} satisfies Config;\r\n```\r\n\r\n### 3. Use `VarioThemeProvider`\r\n\r\nWrap your application with the `VarioThemeProvider`.\r\n\r\n```jsx\r\nimport { varoTheme } from \"~/styles/theme\";\r\nimport { VarioThemeProvider } from \"react-vario-theme\";\r\n\r\nconst App = () => {\r\n  return (\r\n    <VarioThemeProvider theme={varoTheme}>\r\n      <Component {...pageProps} />\r\n    </VarioThemeProvider>\r\n  );\r\n};\r\n```\r\n\r\n### 4. Access Theme Variables\r\n\r\nYou can now access theme variables anywhere within your components.\r\n\r\n```jsx\r\nimport { useVarioTheme } from \"react-vario-theme\";\r\nimport { varoTheme } from \"~/styles/theme\";\r\nconst MyComponent = () => {\r\n  const { theme, colorScheme, changeColorScheme } =\r\n    useVarioTheme<typeof varoTheme>();\r\n\r\n  return (\r\n    <button\r\n      style={{ backgroundColor: theme.colors.primary }}\r\n    >\r\n      Click Me\r\n    </button>\r\n  );\r\n};\r\n```\r\n\r\n## API\r\n\r\n### `VarioThemeProvider`\r\n\r\nProps:\r\n\r\n- `theme`: The theme object containing key-value pairs of CSS variables.\r\n\r\n### `useVarioTheme<T>()`\r\n\r\nReturns:\r\n\r\n- `theme, colorScheme, changeColorScheme`: An object containing the colors and variables of the theme, strongly typed with TypeScript when using `typeof`. All the variables will be equal to the css variable generated by react-vario-theme compile\r\n","readmeFilename":"README.md","gitHead":"762a4d577722f083964f102155e0f3aa35dd1e0e","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-agmq5OYep8iQQ3fu7K2NSh9NrieWrbX85U6pFjTTyrKSvZko2bFy4hSZIAbhCmJHp2nxTu5eb5YoJyfEvojDqw==","shasum":"3cd24a1d76525bdc4355865c3504222adc74b6f3","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.1.0-beta.3.tgz","fileCount":30,"unpackedSize":33334,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEH9JgX9X+0QDKsmyYEIBKzXnlYDtFs/Nt0WI6SpjZADAiEAz+GNbzZVT4HrhHTmm01mWq+RsaFtHSIahH2h2TFRp/c="}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.1.0-beta.3_1695924936962_0.3071711314033756"},"_hasShrinkwrap":false},"3.1.0-beta.4":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.1.0-beta.4","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/index.js","module":"dist/index.js","bin":{"compile":"dist/compile.js"},"types":"dist","scripts":{"tsc-cli":"tsc -p cli/tsconfig.json","tsc-components":"tsc -p components/tsconfig.json"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","ts-node":"^10.9.1","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.1.0-beta.4","readme":"# react-vario-theme\r\n\r\n![npm](https://img.shields.io/npm/v/react-vario-theme)\r\n\r\n**react-vario-theme** is a tool for managing themes in React applications. Easily convert a TypeScript theme object into CSS variables and seamlessly switch between multiple themes using the **ThemeVarioProvider** context.\r\n\r\n## Features\r\n\r\n- 💡 Easily define themes in a TypeScript object\r\n- 🌟 Singular Source of Truth\r\n- 🔄 Instant theme switching\r\n- 🎨 Access theme colors in react using ThemeProvider\r\n- 💫 Supports multiple themes\r\n- 🌈 Seamless Tailwind Integration by automatically generating all theme variables for Tailwind\r\n- 🤖 Built-in TypeScript support for strong typing\r\n\r\n## Usage\r\n\r\n### 1. Define your theme\r\n\r\nCreate a TypeScript object with your theme specifications. Colors will always be needed and can contain as many color schemes as you want. **Important:** To make sure that your theme will work as intended use it in its own file, for example theme.ts\r\n\r\n```typescript\r\nimport { ThemeType } from \"react-vario-theme\";\r\n\r\nexport const varoTheme = {\r\n  colors: {\r\n    light: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n    dark: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n  },\r\n  padding: {\r\n    sm: \"5px\",\r\n    md: \"10px\",\r\n    lg: \"20px\",\r\n  },\r\n} as const satisfies ThemeType;\r\n```\r\n\r\n### 2. Generate css variables\r\n\r\nnpx react-vario-theme compile \"path to your theme object\" \"path and name of the css/sass file you want to create\"\r\nWhen the css variables are generated they can be used in css or in react using the theme context provider.\r\n\r\n```\r\nCompile: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss\r\nWatch: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss --watch\r\n```\r\n\r\n### 3. Optional: Tailwind support\r\n\r\nYou can get all your theme css variables in tailwind using \"tailwindTheme\"\r\n\r\n```typescript\r\nimport { tailwindColors, tailwindTheme } from \"react-vario-theme\";\r\nimport { type Config } from \"tailwindcss\";\r\nimport { varoTheme } from \"./src/styles/theme\";\r\n\r\nexport default {\r\n  content: [\"./src/**/*.{js,ts,jsx,tsx}\"],\r\n  theme: tailwindTheme(varoTheme),\r\n  plugins: [],\r\n} satisfies Config;\r\n```\r\n\r\n### 3. Use `VarioThemeProvider`\r\n\r\nWrap your application with the `VarioThemeProvider`.\r\n\r\n```jsx\r\nimport { varoTheme } from \"~/styles/theme\";\r\nimport { VarioThemeProvider } from \"react-vario-theme\";\r\n\r\nconst App = () => {\r\n  return (\r\n    <VarioThemeProvider theme={varoTheme}>\r\n      <Component {...pageProps} />\r\n    </VarioThemeProvider>\r\n  );\r\n};\r\n```\r\n\r\n### 4. Access Theme Variables\r\n\r\nYou can now access theme variables anywhere within your components.\r\n\r\n```jsx\r\nimport { useVarioTheme } from \"react-vario-theme\";\r\nimport { varoTheme } from \"~/styles/theme\";\r\nconst MyComponent = () => {\r\n  const { theme, colorScheme, changeColorScheme } =\r\n    useVarioTheme<typeof varoTheme>();\r\n\r\n  return (\r\n    <button\r\n      style={{ backgroundColor: theme.colors.primary }}\r\n    >\r\n      Click Me\r\n    </button>\r\n  );\r\n};\r\n```\r\n\r\n## API\r\n\r\n### `VarioThemeProvider`\r\n\r\nProps:\r\n\r\n- `theme`: The theme object containing key-value pairs of CSS variables.\r\n\r\n### `useVarioTheme<T>()`\r\n\r\nReturns:\r\n\r\n- `theme, colorScheme, changeColorScheme`: An object containing the colors and variables of the theme, strongly typed with TypeScript when using `typeof`. All the variables will be equal to the css variable generated by react-vario-theme compile\r\n","readmeFilename":"README.md","gitHead":"762a4d577722f083964f102155e0f3aa35dd1e0e","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-IwGVzubgKWD2dx7hIl7hJDnOCLDt8Y/acqpnyyOQpyXRlCSgW3tok0VL56dTfoWDuBS1RwYF+siZ279EePIoOQ==","shasum":"ce69a5ed41433040535245da24cbd1a90c23e605","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.1.0-beta.4.tgz","fileCount":26,"unpackedSize":28280,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHsebT7p16WljbDco0h1SkL3myMGsxvDOR62tRYSLJ7AIgHRv5QsYTI5gGGVh3Uct5c8hIla1Cm9oWbNSUlTnmJwo="}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.1.0-beta.4_1695928154607_0.6357096565350264"},"_hasShrinkwrap":false},"3.1.0-beta.5":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.1.0-beta.5","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/index.js","module":"dist/index.js","bin":{"compile":"dist/compile.js"},"types":"dist","scripts":{"tsc-cli":"tsc -p cli/tsconfig.json","tsc-components":"tsc -p components/tsconfig.json"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","ts-node":"^10.9.1","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.1.0-beta.5","readme":"# react-vario-theme\r\n\r\n![npm](https://img.shields.io/npm/v/react-vario-theme)\r\n\r\n**react-vario-theme** is a tool for managing themes in React applications. Easily convert a TypeScript theme object into CSS variables and seamlessly switch between multiple themes using the **ThemeVarioProvider** context.\r\n\r\n## Features\r\n\r\n- 💡 Easily define themes in a TypeScript object\r\n- 🌟 Singular Source of Truth\r\n- 🔄 Instant theme switching\r\n- 🎨 Access theme colors in react using ThemeProvider\r\n- 💫 Supports multiple themes\r\n- 🌈 Seamless Tailwind Integration by automatically generating all theme variables for Tailwind\r\n- 🤖 Built-in TypeScript support for strong typing\r\n\r\n## Usage\r\n\r\n### 1. Define your theme\r\n\r\nCreate a TypeScript object with your theme specifications. Colors will always be needed and can contain as many color schemes as you want. **Important:** To make sure that your theme will work as intended use it in its own file, for example theme.ts\r\n\r\n```typescript\r\nimport { ThemeType } from \"react-vario-theme\";\r\n\r\nexport const varoTheme = {\r\n  colors: {\r\n    light: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n    dark: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n  },\r\n  padding: {\r\n    sm: \"5px\",\r\n    md: \"10px\",\r\n    lg: \"20px\",\r\n  },\r\n} as const satisfies ThemeType;\r\n```\r\n\r\n### 2. Generate css variables\r\n\r\nnpx react-vario-theme compile \"path to your theme object\" \"path and name of the css/sass file you want to create\"\r\nWhen the css variables are generated they can be used in css or in react using the theme context provider.\r\n\r\n```\r\nCompile: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss\r\nWatch: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss --watch\r\n```\r\n\r\n### 3. Optional: Tailwind support\r\n\r\nYou can get all your theme css variables in tailwind using \"tailwindTheme\"\r\n\r\n```typescript\r\nimport { tailwindColors, tailwindTheme } from \"react-vario-theme\";\r\nimport { type Config } from \"tailwindcss\";\r\nimport { varoTheme } from \"./src/styles/theme\";\r\n\r\nexport default {\r\n  content: [\"./src/**/*.{js,ts,jsx,tsx}\"],\r\n  theme: tailwindTheme(varoTheme),\r\n  plugins: [],\r\n} satisfies Config;\r\n```\r\n\r\n### 3. Use `VarioThemeProvider`\r\n\r\nWrap your application with the `VarioThemeProvider`.\r\n\r\n```jsx\r\nimport { varoTheme } from \"~/styles/theme\";\r\nimport { VarioThemeProvider } from \"react-vario-theme\";\r\n\r\nconst App = () => {\r\n  return (\r\n    <VarioThemeProvider theme={varoTheme}>\r\n      <Component {...pageProps} />\r\n    </VarioThemeProvider>\r\n  );\r\n};\r\n```\r\n\r\n### 4. Access Theme Variables\r\n\r\nYou can now access theme variables anywhere within your components.\r\n\r\n```jsx\r\nimport { useVarioTheme } from \"react-vario-theme\";\r\nimport { varoTheme } from \"~/styles/theme\";\r\nconst MyComponent = () => {\r\n  const { theme, colorScheme, changeColorScheme } =\r\n    useVarioTheme<typeof varoTheme>();\r\n\r\n  return (\r\n    <button\r\n      style={{ backgroundColor: theme.colors.primary }}\r\n    >\r\n      Click Me\r\n    </button>\r\n  );\r\n};\r\n```\r\n\r\n## API\r\n\r\n### `VarioThemeProvider`\r\n\r\nProps:\r\n\r\n- `theme`: The theme object containing key-value pairs of CSS variables.\r\n\r\n### `useVarioTheme<T>()`\r\n\r\nReturns:\r\n\r\n- `theme, colorScheme, changeColorScheme`: An object containing the colors and variables of the theme, strongly typed with TypeScript when using `typeof`. All the variables will be equal to the css variable generated by react-vario-theme compile\r\n","readmeFilename":"README.md","gitHead":"77e7ab41a42fc27f0f448b7466cf558c4fc2bff2","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-Iu3WCf0pzHgSBgCNBK/i5XW8kkgey0MpF3Ai2b3/f3i1gj0MGsacKl0SSqy2OVn6mp/p6dBAGW3msk1mtXavUQ==","shasum":"8766ffc7724f12500012cf540e2b4fb8ad41ba3e","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.1.0-beta.5.tgz","fileCount":26,"unpackedSize":28280,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLGjhT2u3h1Y/POGxrEZTFQflGU2KjIpvh76sRJaytGQIhAJkJovCcnQUuTLgRDfVGl3LtN9+5vmJE+4dlVJtH24FH"}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.1.0-beta.5_1695928254571_0.8864788884702934"},"_hasShrinkwrap":false},"3.1.0-beta.6":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.1.0-beta.6","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/index.js","module":"dist/index.js","bin":{"compile":"dist/compile.js"},"types":"dist","scripts":{"tsc-cli":"tsc -p cli/tsconfig.json","tsc-components":"tsc -p components/tsconfig.json"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","ts-node":"^10.9.1","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.1.0-beta.6","readme":"# react-vario-theme\r\n\r\n![npm](https://img.shields.io/npm/v/react-vario-theme)\r\n\r\n**react-vario-theme** is a tool for managing themes in React applications. Easily convert a TypeScript theme object into CSS variables and seamlessly switch between multiple themes using the **ThemeVarioProvider** context.\r\n\r\n## Features\r\n\r\n- 💡 Easily define themes in a TypeScript object\r\n- 🌟 Singular Source of Truth\r\n- 🔄 Instant theme switching\r\n- 🎨 Access theme colors in react using ThemeProvider\r\n- 💫 Supports multiple themes\r\n- 🌈 Seamless Tailwind Integration by automatically generating all theme variables for Tailwind\r\n- 🤖 Built-in TypeScript support for strong typing\r\n\r\n## Usage\r\n\r\n### 1. Define your theme\r\n\r\nCreate a TypeScript object with your theme specifications. Colors will always be needed and can contain as many color schemes as you want. **Important:** To make sure that your theme will work as intended use it in its own file, for example theme.ts\r\n\r\n```typescript\r\nimport { ThemeType } from \"react-vario-theme\";\r\n\r\nexport const varoTheme = {\r\n  colors: {\r\n    light: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n    dark: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n  },\r\n  padding: {\r\n    sm: \"5px\",\r\n    md: \"10px\",\r\n    lg: \"20px\",\r\n  },\r\n} as const satisfies ThemeType;\r\n```\r\n\r\n### 2. Generate css variables\r\n\r\nnpx react-vario-theme compile \"path to your theme object\" \"path and name of the css/sass file you want to create\"\r\nWhen the css variables are generated they can be used in css or in react using the theme context provider.\r\n\r\n```\r\nCompile: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss\r\nWatch: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss --watch\r\n```\r\n\r\n### 3. Optional: Tailwind support\r\n\r\nYou can get all your theme css variables in tailwind using \"tailwindTheme\"\r\n\r\n```typescript\r\nimport { tailwindColors, tailwindTheme } from \"react-vario-theme\";\r\nimport { type Config } from \"tailwindcss\";\r\nimport { varoTheme } from \"./src/styles/theme\";\r\n\r\nexport default {\r\n  content: [\"./src/**/*.{js,ts,jsx,tsx}\"],\r\n  theme: tailwindTheme(varoTheme),\r\n  plugins: [],\r\n} satisfies Config;\r\n```\r\n\r\n### 3. Use `VarioThemeProvider`\r\n\r\nWrap your application with the `VarioThemeProvider`.\r\n\r\n```jsx\r\nimport { varoTheme } from \"~/styles/theme\";\r\nimport { VarioThemeProvider } from \"react-vario-theme\";\r\n\r\nconst App = () => {\r\n  return (\r\n    <VarioThemeProvider theme={varoTheme}>\r\n      <Component {...pageProps} />\r\n    </VarioThemeProvider>\r\n  );\r\n};\r\n```\r\n\r\n### 4. Access Theme Variables\r\n\r\nYou can now access theme variables anywhere within your components.\r\n\r\n```jsx\r\nimport { useVarioTheme } from \"react-vario-theme\";\r\nimport { varoTheme } from \"~/styles/theme\";\r\nconst MyComponent = () => {\r\n  const { theme, colorScheme, changeColorScheme } =\r\n    useVarioTheme<typeof varoTheme>();\r\n\r\n  return (\r\n    <button\r\n      style={{ backgroundColor: theme.colors.primary }}\r\n    >\r\n      Click Me\r\n    </button>\r\n  );\r\n};\r\n```\r\n\r\n## API\r\n\r\n### `VarioThemeProvider`\r\n\r\nProps:\r\n\r\n- `theme`: The theme object containing key-value pairs of CSS variables.\r\n\r\n### `useVarioTheme<T>()`\r\n\r\nReturns:\r\n\r\n- `theme, colorScheme, changeColorScheme`: An object containing the colors and variables of the theme, strongly typed with TypeScript when using `typeof`. All the variables will be equal to the css variable generated by react-vario-theme compile\r\n","readmeFilename":"README.md","gitHead":"ac679c272e6a1441c23543730b79c05ff369a2b3","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-Z7Z6jQtlrwS5t6zUFEGVvvLNkPxtYPnOkfSYDkitR+8yo8W3uLummYKhLfW8TzFx55ouDNkop+8jLhcV0cDjUg==","shasum":"19ba6b909c313a9fa560475c1be02381b0dc4ee0","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.1.0-beta.6.tgz","fileCount":26,"unpackedSize":28280,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICK4SZuxQtszoXlWVtH15PVkiwCUHZDSXDvzWHgnZGyWAiEAtG5gTH5yRnivifAxaK9IwsDE9qLCqhxGB0QzI6nT6jM="}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.1.0-beta.6_1695929012137_0.1012606006876442"},"_hasShrinkwrap":false},"3.1.0-beta.7":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.1.0-beta.7","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/index.js","module":"dist/index.js","bin":{"compile":"dist/compile.js"},"types":"dist","scripts":{"tsc-cli":"tsc -p cli/tsconfig.json","tsc-components":"tsc -p components/tsconfig.json"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","ts-node":"^10.9.1","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.1.0-beta.7","readme":"# react-vario-theme\r\n\r\n![npm](https://img.shields.io/npm/v/react-vario-theme)\r\n\r\n**react-vario-theme** is a tool for managing themes in React applications. Easily convert a TypeScript theme object into CSS variables and seamlessly switch between multiple themes using the **ThemeVarioProvider** context.\r\n\r\n## Features\r\n\r\n- 💡 Easily define themes in a TypeScript object\r\n- 🌟 Singular Source of Truth\r\n- 🔄 Instant theme switching\r\n- 🎨 Access theme colors in react using ThemeProvider\r\n- 💫 Supports multiple themes\r\n- 🌈 Seamless Tailwind Integration by automatically generating all theme variables for Tailwind\r\n- 🤖 Built-in TypeScript support for strong typing\r\n\r\n## Usage\r\n\r\n### 1. Define your theme\r\n\r\nCreate a TypeScript object with your theme specifications. Colors will always be needed and can contain as many color schemes as you want. **Important:** To make sure that your theme will work as intended use it in its own file, for example theme.ts\r\n\r\n```typescript\r\nimport { ThemeType } from \"react-vario-theme\";\r\n\r\nexport const varoTheme = {\r\n  colors: {\r\n    light: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n    dark: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n  },\r\n  padding: {\r\n    sm: \"5px\",\r\n    md: \"10px\",\r\n    lg: \"20px\",\r\n  },\r\n} as const satisfies ThemeType;\r\n```\r\n\r\n### 2. Generate css variables\r\n\r\nnpx react-vario-theme compile \"path to your theme object\" \"path and name of the css/sass file you want to create\"\r\nWhen the css variables are generated they can be used in css or in react using the theme context provider.\r\n\r\n```\r\nCompile: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss\r\nWatch: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss --watch\r\n```\r\n\r\n### 3. Optional: Tailwind support\r\n\r\nYou can get all your theme css variables in tailwind using \"tailwindTheme\"\r\n\r\n```typescript\r\nimport { tailwindColors, tailwindTheme } from \"react-vario-theme\";\r\nimport { type Config } from \"tailwindcss\";\r\nimport { varoTheme } from \"./src/styles/theme\";\r\n\r\nexport default {\r\n  content: [\"./src/**/*.{js,ts,jsx,tsx}\"],\r\n  theme: tailwindTheme(varoTheme),\r\n  plugins: [],\r\n} satisfies Config;\r\n```\r\n\r\n### 3. Use `VarioThemeProvider`\r\n\r\nWrap your application with the `VarioThemeProvider`.\r\n\r\n```jsx\r\nimport { varoTheme } from \"~/styles/theme\";\r\nimport { VarioThemeProvider } from \"react-vario-theme\";\r\n\r\nconst App = () => {\r\n  return (\r\n    <VarioThemeProvider theme={varoTheme}>\r\n      <Component {...pageProps} />\r\n    </VarioThemeProvider>\r\n  );\r\n};\r\n```\r\n\r\n### 4. Access Theme Variables\r\n\r\nYou can now access theme variables anywhere within your components.\r\n\r\n```jsx\r\nimport { useVarioTheme } from \"react-vario-theme\";\r\nimport { varoTheme } from \"~/styles/theme\";\r\nconst MyComponent = () => {\r\n  const { theme, colorScheme, changeColorScheme } =\r\n    useVarioTheme<typeof varoTheme>();\r\n\r\n  return (\r\n    <button\r\n      style={{ backgroundColor: theme.colors.primary }}\r\n    >\r\n      Click Me\r\n    </button>\r\n  );\r\n};\r\n```\r\n\r\n## API\r\n\r\n### `VarioThemeProvider`\r\n\r\nProps:\r\n\r\n- `theme`: The theme object containing key-value pairs of CSS variables.\r\n\r\n### `useVarioTheme<T>()`\r\n\r\nReturns:\r\n\r\n- `theme, colorScheme, changeColorScheme`: An object containing the colors and variables of the theme, strongly typed with TypeScript when using `typeof`. All the variables will be equal to the css variable generated by react-vario-theme compile\r\n","readmeFilename":"README.md","gitHead":"ac679c272e6a1441c23543730b79c05ff369a2b3","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-M/MXpkyn4eJKrITrXyCsA/DahEROocF9g9DQoBycNBBHpGDICPdS1hpyp23vV3arRgpPnWyfOhZmEVc7FYgcOg==","shasum":"58e1178501c8ba34fb8702fc2c72f442f4039738","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.1.0-beta.7.tgz","fileCount":28,"unpackedSize":32032,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSxWum9ADb040uUQJnEVKi1krCgIcK/RtS1j92uBi6MQIgb9SDO4ke7sHPOtzDa50LGsfXJV3sDH+5LWGDEDleIp8="}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.1.0-beta.7_1695929258860_0.4846483720420438"},"_hasShrinkwrap":false},"3.1.0-beta.8":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.1.0-beta.8","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/index.js","module":"dist/index.js","bin":{"compile":"dist/compile.js"},"types":"dist","scripts":{"tsc-cli":"tsc -p cli/tsconfig.json","tsc-components":"tsc -p components/tsconfig.json"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","ts-node":"^10.9.1","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.1.0-beta.8","readme":"# react-vario-theme\r\n\r\n![npm](https://img.shields.io/npm/v/react-vario-theme)\r\n\r\n**react-vario-theme** is a tool for managing themes in React applications. Easily convert a TypeScript theme object into CSS variables and seamlessly switch between multiple themes using the **ThemeVarioProvider** context.\r\n\r\n## Features\r\n\r\n- 💡 Easily define themes in a TypeScript object\r\n- 🌟 Singular Source of Truth\r\n- 🔄 Instant theme switching\r\n- 🎨 Access theme colors in react using ThemeProvider\r\n- 💫 Supports multiple themes\r\n- 🌈 Seamless Tailwind Integration by automatically generating all theme variables for Tailwind\r\n- 🤖 Built-in TypeScript support for strong typing\r\n\r\n## Usage\r\n\r\n### 1. Define your theme\r\n\r\nCreate a TypeScript object with your theme specifications. Colors will always be needed and can contain as many color schemes as you want. **Important:** To make sure that your theme will work as intended use it in its own file, for example theme.ts\r\n\r\n```typescript\r\nimport { ThemeType } from \"react-vario-theme\";\r\n\r\nexport const varoTheme = {\r\n  colors: {\r\n    light: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n    dark: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n  },\r\n  padding: {\r\n    sm: \"5px\",\r\n    md: \"10px\",\r\n    lg: \"20px\",\r\n  },\r\n} as const satisfies ThemeType;\r\n```\r\n\r\n### 2. Generate css variables\r\n\r\nnpx react-vario-theme compile \"path to your theme object\" \"path and name of the css/sass file you want to create\"\r\nWhen the css variables are generated they can be used in css or in react using the theme context provider.\r\n\r\n```\r\nCompile: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss\r\nWatch: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss --watch\r\n```\r\n\r\n### 3. Optional: Tailwind support\r\n\r\nYou can get all your theme css variables in tailwind using \"tailwindTheme\"\r\n\r\n```typescript\r\nimport { tailwindColors, tailwindTheme } from \"react-vario-theme\";\r\nimport { type Config } from \"tailwindcss\";\r\nimport { varoTheme } from \"./src/styles/theme\";\r\n\r\nexport default {\r\n  content: [\"./src/**/*.{js,ts,jsx,tsx}\"],\r\n  theme: tailwindTheme(varoTheme),\r\n  plugins: [],\r\n} satisfies Config;\r\n```\r\n\r\n### 3. Use `VarioThemeProvider`\r\n\r\nWrap your application with the `VarioThemeProvider`.\r\n\r\n```jsx\r\nimport { varoTheme } from \"~/styles/theme\";\r\nimport { VarioThemeProvider } from \"react-vario-theme\";\r\n\r\nconst App = () => {\r\n  return (\r\n    <VarioThemeProvider theme={varoTheme}>\r\n      <Component {...pageProps} />\r\n    </VarioThemeProvider>\r\n  );\r\n};\r\n```\r\n\r\n### 4. Access Theme Variables\r\n\r\nYou can now access theme variables anywhere within your components.\r\n\r\n```jsx\r\nimport { useVarioTheme } from \"react-vario-theme\";\r\nimport { varoTheme } from \"~/styles/theme\";\r\nconst MyComponent = () => {\r\n  const { theme, colorScheme, changeColorScheme } =\r\n    useVarioTheme<typeof varoTheme>();\r\n\r\n  return (\r\n    <button\r\n      style={{ backgroundColor: theme.colors.primary }}\r\n    >\r\n      Click Me\r\n    </button>\r\n  );\r\n};\r\n```\r\n\r\n## API\r\n\r\n### `VarioThemeProvider`\r\n\r\nProps:\r\n\r\n- `theme`: The theme object containing key-value pairs of CSS variables.\r\n\r\n### `useVarioTheme<T>()`\r\n\r\nReturns:\r\n\r\n- `theme, colorScheme, changeColorScheme`: An object containing the colors and variables of the theme, strongly typed with TypeScript when using `typeof`. All the variables will be equal to the css variable generated by react-vario-theme compile\r\n","readmeFilename":"README.md","gitHead":"b36114908b9f5d95cd6cf1462d185c1bae205c73","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-US72lbBkK7WcpvA6OAp8mSz2Ta6p+5SePPOuIJ178bfm9d2NAKShyeafXHvCjmOoO/lW5acri/jDieXuE2//xA==","shasum":"8b182ed464b17451c94803e41194884dd52dbec3","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.1.0-beta.8.tgz","fileCount":22,"unpackedSize":27361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBQFFlntYU13PBCvCLwdeJl9/otByZ2Iaxn3rLMjG+tGAiEAgolT22/Lt0ELw8khhf8hTBxx/SDpEDNuu5oNauPcDyM="}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.1.0-beta.8_1695966118450_0.9285584374313485"},"_hasShrinkwrap":false},"3.1.0-beta.9":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.1.0-beta.9","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/index.js","module":"dist/index.js","bin":{"compile":"dist/compile.js"},"types":"dist","scripts":{"tsc-cli":"tsc -p cli/tsconfig.json","tsc-components":"tsc -p components/tsconfig.json"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","ts-node":"^10.9.1","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.1.0-beta.9","readme":"# react-vario-theme\r\n\r\n![npm](https://img.shields.io/npm/v/react-vario-theme)\r\n\r\n**react-vario-theme** is a tool for managing themes in React applications. Easily convert a TypeScript theme object into CSS variables and seamlessly switch between multiple themes using the **ThemeVarioProvider** context.\r\n\r\n## Features\r\n\r\n- 💡 Easily define themes in a TypeScript object\r\n- 🌟 Singular Source of Truth\r\n- 🔄 Instant theme switching\r\n- 🎨 Access theme colors in react using ThemeProvider\r\n- 💫 Supports multiple themes\r\n- 🌈 Seamless Tailwind Integration by automatically generating all theme variables for Tailwind\r\n- 🤖 Built-in TypeScript support for strong typing\r\n\r\n## Usage\r\n\r\n### 1. Define your theme\r\n\r\nCreate a TypeScript object with your theme specifications. Colors will always be needed and can contain as many color schemes as you want. **Important:** To make sure that your theme will work as intended use it in its own file, for example theme.ts\r\n\r\n```typescript\r\nimport { ThemeType } from \"react-vario-theme\";\r\n\r\nexport const varoTheme = {\r\n  colors: {\r\n    light: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n    dark: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n  },\r\n  padding: {\r\n    sm: \"5px\",\r\n    md: \"10px\",\r\n    lg: \"20px\",\r\n  },\r\n} as const satisfies ThemeType;\r\n```\r\n\r\n### 2. Generate css variables\r\n\r\nnpx react-vario-theme compile \"path to your theme object\" \"path and name of the css/sass file you want to create\"\r\nWhen the css variables are generated they can be used in css or in react using the theme context provider.\r\n\r\n```\r\nCompile: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss\r\nWatch: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss --watch\r\n```\r\n\r\n### 3. Optional: Tailwind support\r\n\r\nYou can get all your theme css variables in tailwind using \"tailwindTheme\"\r\n\r\n```typescript\r\nimport { tailwindColors, tailwindTheme } from \"react-vario-theme\";\r\nimport { type Config } from \"tailwindcss\";\r\nimport { varoTheme } from \"./src/styles/theme\";\r\n\r\nexport default {\r\n  content: [\"./src/**/*.{js,ts,jsx,tsx}\"],\r\n  theme: tailwindTheme(varoTheme),\r\n  plugins: [],\r\n} satisfies Config;\r\n```\r\n\r\n### 3. Use `VarioThemeProvider`\r\n\r\nWrap your application with the `VarioThemeProvider`.\r\n\r\n```jsx\r\nimport { varoTheme } from \"~/styles/theme\";\r\nimport { VarioThemeProvider } from \"react-vario-theme\";\r\n\r\nconst App = () => {\r\n  return (\r\n    <VarioThemeProvider theme={varoTheme}>\r\n      <Component {...pageProps} />\r\n    </VarioThemeProvider>\r\n  );\r\n};\r\n```\r\n\r\n### 4. Access Theme Variables\r\n\r\nYou can now access theme variables anywhere within your components.\r\n\r\n```jsx\r\nimport { useVarioTheme } from \"react-vario-theme\";\r\nimport { varoTheme } from \"~/styles/theme\";\r\nconst MyComponent = () => {\r\n  const { theme, colorScheme, changeColorScheme } =\r\n    useVarioTheme<typeof varoTheme>();\r\n\r\n  return (\r\n    <button\r\n      style={{ backgroundColor: theme.colors.primary }}\r\n    >\r\n      Click Me\r\n    </button>\r\n  );\r\n};\r\n```\r\n\r\n## API\r\n\r\n### `VarioThemeProvider`\r\n\r\nProps:\r\n\r\n- `theme`: The theme object containing key-value pairs of CSS variables.\r\n\r\n### `useVarioTheme<T>()`\r\n\r\nReturns:\r\n\r\n- `theme, colorScheme, changeColorScheme`: An object containing the colors and variables of the theme, strongly typed with TypeScript when using `typeof`. All the variables will be equal to the css variable generated by react-vario-theme compile\r\n","readmeFilename":"README.md","gitHead":"a8acbfe1058244fb61f99b9a25d038e918eaa6ee","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-mPGeYkFICpzyAvUAa+H9WPYY6DJ7oX8vFHPsftfiUnwoFnsAmExsrIOXrWynvWX26s9dVZs3PCdbHcLJuUdA0A==","shasum":"ee23b8efedbac4bd2ea6e60ad20df6ad85b798df","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.1.0-beta.9.tgz","fileCount":38,"unpackedSize":38625,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCH0TWeQEGLys8V88ZS8P8CjuNEBc5LTCxxDkAuSfdxn4CIQD9Dhv8xsSkUAO8sbMNVGRXJEB6Q9clwVEqAnBnGX8p5g=="}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.1.0-beta.9_1695966534289_0.5298085355260884"},"_hasShrinkwrap":false},"3.1.0-beta.10":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.1.0-beta.10","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/index.js","module":"dist/index.js","bin":{"compile":"dist/compile.js"},"types":"dist","scripts":{"tsc-cli":"tsc -p cli/tsconfig.json","tsc-components":"tsc -p components/tsconfig.json"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","ts-node":"^10.9.1","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.1.0-beta.10","readme":"# react-vario-theme\r\n\r\n![npm](https://img.shields.io/npm/v/react-vario-theme)\r\n\r\n**react-vario-theme** is a tool for managing themes in React applications. Easily convert a TypeScript theme object into CSS variables and seamlessly switch between multiple themes using the **ThemeVarioProvider** context.\r\n\r\n## Features\r\n\r\n- 💡 Easily define themes in a TypeScript object\r\n- 🌟 Singular Source of Truth\r\n- 🔄 Instant theme switching\r\n- 🎨 Access theme colors in react using ThemeProvider\r\n- 💫 Supports multiple themes\r\n- 🌈 Seamless Tailwind Integration by automatically generating all theme variables for Tailwind\r\n- 🤖 Built-in TypeScript support for strong typing\r\n\r\n## Usage\r\n\r\n### 1. Define your theme\r\n\r\nCreate a TypeScript object with your theme specifications. Colors will always be needed and can contain as many color schemes as you want. **Important:** To make sure that your theme will work as intended use it in its own file, for example theme.ts\r\n\r\n```typescript\r\nimport { ThemeType } from \"react-vario-theme\";\r\n\r\nexport const varoTheme = {\r\n  colors: {\r\n    light: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n    dark: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n  },\r\n  padding: {\r\n    sm: \"5px\",\r\n    md: \"10px\",\r\n    lg: \"20px\",\r\n  },\r\n} as const satisfies ThemeType;\r\n```\r\n\r\n### 2. Generate css variables\r\n\r\nnpx react-vario-theme compile \"path to your theme object\" \"path and name of the css/sass file you want to create\"\r\nWhen the css variables are generated they can be used in css or in react using the theme context provider.\r\n\r\n```\r\nCompile: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss\r\nWatch: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss --watch\r\n```\r\n\r\n### 3. Optional: Tailwind support\r\n\r\nYou can get all your theme css variables in tailwind using \"tailwindTheme\"\r\n\r\n```typescript\r\nimport { tailwindColors, tailwindTheme } from \"react-vario-theme\";\r\nimport { type Config } from \"tailwindcss\";\r\nimport { varoTheme } from \"./src/styles/theme\";\r\n\r\nexport default {\r\n  content: [\"./src/**/*.{js,ts,jsx,tsx}\"],\r\n  theme: tailwindTheme(varoTheme),\r\n  plugins: [],\r\n} satisfies Config;\r\n```\r\n\r\n### 3. Use `VarioThemeProvider`\r\n\r\nWrap your application with the `VarioThemeProvider`.\r\n\r\n```jsx\r\nimport { varoTheme } from \"~/styles/theme\";\r\nimport { VarioThemeProvider } from \"react-vario-theme\";\r\n\r\nconst App = () => {\r\n  return (\r\n    <VarioThemeProvider theme={varoTheme}>\r\n      <Component {...pageProps} />\r\n    </VarioThemeProvider>\r\n  );\r\n};\r\n```\r\n\r\n### 4. Access Theme Variables\r\n\r\nYou can now access theme variables anywhere within your components.\r\n\r\n```jsx\r\nimport { useVarioTheme } from \"react-vario-theme\";\r\nimport { varoTheme } from \"~/styles/theme\";\r\nconst MyComponent = () => {\r\n  const { theme, colorScheme, changeColorScheme } =\r\n    useVarioTheme<typeof varoTheme>();\r\n\r\n  return (\r\n    <button\r\n      style={{ backgroundColor: theme.colors.primary }}\r\n    >\r\n      Click Me\r\n    </button>\r\n  );\r\n};\r\n```\r\n\r\n## API\r\n\r\n### `VarioThemeProvider`\r\n\r\nProps:\r\n\r\n- `theme`: The theme object containing key-value pairs of CSS variables.\r\n\r\n### `useVarioTheme<T>()`\r\n\r\nReturns:\r\n\r\n- `theme, colorScheme, changeColorScheme`: An object containing the colors and variables of the theme, strongly typed with TypeScript when using `typeof`. All the variables will be equal to the css variable generated by react-vario-theme compile\r\n","readmeFilename":"README.md","gitHead":"144a90ec1755bdc5b4d9edfe7e3efa9f28a4c214","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-wXkR77rumSCBFxmXWEeO3XYEg5H1RAsSH7fyTVKmfVwHb3ZKzuG8d+/Y5+IuHZu/qi4MonIVaPImc70U6HjmZQ==","shasum":"ac38d5872a47da031b57eaab5be44f8681b2eb80","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.1.0-beta.10.tgz","fileCount":26,"unpackedSize":30976,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDidPUwT3JK6+xc+bKFReEj7JMGKEaxtRCSn7iVLatT5wIhAIqI3UvixHv8Y1V3N3s90ygdOpkzfZ0/ACT6gdpS6DGg"}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.1.0-beta.10_1695966804490_0.7459710205260079"},"_hasShrinkwrap":false},"3.1.0-beta.11":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.1.0-beta.11","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","bin":{"compile":"dist/cli/compile.js"},"types":"dist/index.d.ts","scripts":{"rollup":"rollup -c","build:cli":"tsc src/compile.ts --outDir dist/cli","tsc-cli":"tsc -p cli/tsconfig.json","tsc-components":"tsc -p components/tsconfig.json"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.4","@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","rollup":"^3.29.4","rollup-plugin-dts":"^6.0.2","ts-node":"^10.9.1","tslib":"^2.6.2","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.1.0-beta.11","readme":"# react-vario-theme\r\n\r\n![npm](https://img.shields.io/npm/v/react-vario-theme)\r\n\r\n**react-vario-theme** is a tool for managing themes in React applications. Easily convert a TypeScript theme object into CSS variables and seamlessly switch between multiple themes using the **ThemeVarioProvider** context.\r\n\r\n## Features\r\n\r\n- 💡 Easily define themes in a TypeScript object\r\n- 🌟 Singular Source of Truth\r\n- 🔄 Instant theme switching\r\n- 🎨 Access theme colors in react using ThemeProvider\r\n- 💫 Supports multiple themes\r\n- 🌈 Seamless Tailwind Integration by automatically generating all theme variables for Tailwind\r\n- 🤖 Built-in TypeScript support for strong typing\r\n\r\n## Usage\r\n\r\n### 1. Define your theme\r\n\r\nCreate a TypeScript object with your theme specifications. Colors will always be needed and can contain as many color schemes as you want. **Important:** To make sure that your theme will work as intended use it in its own file, for example theme.ts\r\n\r\n```typescript\r\nimport { ThemeType } from \"react-vario-theme\";\r\n\r\nexport const varoTheme = {\r\n  colors: {\r\n    light: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n    dark: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n  },\r\n  padding: {\r\n    sm: \"5px\",\r\n    md: \"10px\",\r\n    lg: \"20px\",\r\n  },\r\n} as const satisfies ThemeType;\r\n```\r\n\r\n### 2. Generate css variables\r\n\r\nnpx react-vario-theme compile \"path to your theme object\" \"path and name of the css/sass file you want to create\"\r\nWhen the css variables are generated they can be used in css or in react using the theme context provider.\r\n\r\n```\r\nCompile: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss\r\nWatch: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss --watch\r\n```\r\n\r\n### 3. Optional: Tailwind support\r\n\r\nYou can get all your theme css variables in tailwind using \"tailwindTheme\"\r\n\r\n```typescript\r\nimport { tailwindColors, tailwindTheme } from \"react-vario-theme\";\r\nimport { type Config } from \"tailwindcss\";\r\nimport { varoTheme } from \"./src/styles/theme\";\r\n\r\nexport default {\r\n  content: [\"./src/**/*.{js,ts,jsx,tsx}\"],\r\n  theme: tailwindTheme(varoTheme),\r\n  plugins: [],\r\n} satisfies Config;\r\n```\r\n\r\n### 3. Use `VarioThemeProvider`\r\n\r\nWrap your application with the `VarioThemeProvider`.\r\n\r\n```jsx\r\nimport { varoTheme } from \"~/styles/theme\";\r\nimport { VarioThemeProvider } from \"react-vario-theme\";\r\n\r\nconst App = () => {\r\n  return (\r\n    <VarioThemeProvider theme={varoTheme}>\r\n      <Component {...pageProps} />\r\n    </VarioThemeProvider>\r\n  );\r\n};\r\n```\r\n\r\n### 4. Access Theme Variables\r\n\r\nYou can now access theme variables anywhere within your components.\r\n\r\n```jsx\r\nimport { useVarioTheme } from \"react-vario-theme\";\r\nimport { varoTheme } from \"~/styles/theme\";\r\nconst MyComponent = () => {\r\n  const { theme, colorScheme, changeColorScheme } =\r\n    useVarioTheme<typeof varoTheme>();\r\n\r\n  return (\r\n    <button\r\n      style={{ backgroundColor: theme.colors.primary }}\r\n    >\r\n      Click Me\r\n    </button>\r\n  );\r\n};\r\n```\r\n\r\n## API\r\n\r\n### `VarioThemeProvider`\r\n\r\nProps:\r\n\r\n- `theme`: The theme object containing key-value pairs of CSS variables.\r\n\r\n### `useVarioTheme<T>()`\r\n\r\nReturns:\r\n\r\n- `theme, colorScheme, changeColorScheme`: An object containing the colors and variables of the theme, strongly typed with TypeScript when using `typeof`. All the variables will be equal to the css variable generated by react-vario-theme compile\r\n","readmeFilename":"README.md","gitHead":"a384af775cc21dc9e601ed119fcda7fa64d6f047","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-3sSgEkGpovaHrQ+F7KHlQNmrrwoGsI8h0oQgdIUwjX32Cs2zYi7kXfk9XE+dGDbOymcboPHBzRtJhwr5E69duA==","shasum":"f1cd98139c61c498fbf729cd295aeea251deaf7c","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.1.0-beta.11.tgz","fileCount":32,"unpackedSize":627352,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEGM3T4+QiIw7Wwrgemuwx7U+8W6UgZudNEexIwApkIQAiEAua+7KBhHS16reY4qttIyIQWPkn9RUcXCRhnUBlwq9Ig="}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.1.0-beta.11_1696072426280_0.8528622253057443"},"_hasShrinkwrap":false},"3.1.0-beta.12":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.1.0-beta.12","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","bin":{"compile":"dist/cli/compile.js"},"types":"dist/index.d.ts","scripts":{"rollup":"rollup -c","build:cli":"tsc src/compile.ts --outDir dist/cli","tsc-cli":"tsc -p cli/tsconfig.json","tsc-components":"tsc -p components/tsconfig.json"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.4","@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","rollup":"^3.29.4","rollup-plugin-dts":"^6.0.2","ts-node":"^10.9.1","tslib":"^2.6.2","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.1.0-beta.12","readme":"# react-vario-theme\r\n\r\n![npm](https://img.shields.io/npm/v/react-vario-theme)\r\n\r\n**react-vario-theme** is a tool for managing themes in React applications. Easily convert a TypeScript theme object into CSS variables and seamlessly switch between multiple themes using the **ThemeVarioProvider** context.\r\n\r\n## Features\r\n\r\n- 💡 Easily define themes in a TypeScript object\r\n- 🌟 Singular Source of Truth\r\n- 🔄 Instant theme switching\r\n- 🎨 Access theme colors in react using ThemeProvider\r\n- 💫 Supports multiple themes\r\n- 🌈 Seamless Tailwind Integration by automatically generating all theme variables for Tailwind\r\n- 🤖 Built-in TypeScript support for strong typing\r\n\r\n## Usage\r\n\r\n### 1. Define your theme\r\n\r\nCreate a TypeScript object with your theme specifications. Colors will always be needed and can contain as many color schemes as you want. **Important:** To make sure that your theme will work as intended use it in its own file, for example theme.ts\r\n\r\n```typescript\r\nimport { ThemeType } from \"react-vario-theme\";\r\n\r\nexport const varoTheme = {\r\n  colors: {\r\n    light: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n    dark: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n  },\r\n  padding: {\r\n    sm: \"5px\",\r\n    md: \"10px\",\r\n    lg: \"20px\",\r\n  },\r\n} as const satisfies ThemeType;\r\n```\r\n\r\n### 2. Generate css variables\r\n\r\nnpx react-vario-theme compile \"path to your theme object\" \"path and name of the css/sass file you want to create\"\r\nWhen the css variables are generated they can be used in css or in react using the theme context provider.\r\n\r\n```\r\nCompile: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss\r\nWatch: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss --watch\r\n```\r\n\r\n### 3. Optional: Tailwind support\r\n\r\nYou can get all your theme css variables in tailwind using \"tailwindTheme\"\r\n\r\n```typescript\r\nimport { tailwindColors, tailwindTheme } from \"react-vario-theme\";\r\nimport { type Config } from \"tailwindcss\";\r\nimport { varoTheme } from \"./src/styles/theme\";\r\n\r\nexport default {\r\n  content: [\"./src/**/*.{js,ts,jsx,tsx}\"],\r\n  theme: tailwindTheme(varoTheme),\r\n  plugins: [],\r\n} satisfies Config;\r\n```\r\n\r\n### 3. Use `VarioThemeProvider`\r\n\r\nWrap your application with the `VarioThemeProvider`.\r\n\r\n```jsx\r\nimport { varoTheme } from \"~/styles/theme\";\r\nimport { VarioThemeProvider } from \"react-vario-theme\";\r\n\r\nconst App = () => {\r\n  return (\r\n    <VarioThemeProvider theme={varoTheme}>\r\n      <Component {...pageProps} />\r\n    </VarioThemeProvider>\r\n  );\r\n};\r\n```\r\n\r\n### 4. Access Theme Variables\r\n\r\nYou can now access theme variables anywhere within your components.\r\n\r\n```jsx\r\nimport { useVarioTheme } from \"react-vario-theme\";\r\nimport { varoTheme } from \"~/styles/theme\";\r\nconst MyComponent = () => {\r\n  const { theme, colorScheme, changeColorScheme } =\r\n    useVarioTheme<typeof varoTheme>();\r\n\r\n  return (\r\n    <button\r\n      style={{ backgroundColor: theme.colors.primary }}\r\n    >\r\n      Click Me\r\n    </button>\r\n  );\r\n};\r\n```\r\n\r\n## API\r\n\r\n### `VarioThemeProvider`\r\n\r\nProps:\r\n\r\n- `theme`: The theme object containing key-value pairs of CSS variables.\r\n\r\n### `useVarioTheme<T>()`\r\n\r\nReturns:\r\n\r\n- `theme, colorScheme, changeColorScheme`: An object containing the colors and variables of the theme, strongly typed with TypeScript when using `typeof`. All the variables will be equal to the css variable generated by react-vario-theme compile\r\n","readmeFilename":"README.md","gitHead":"355d1e4c32af3ad5fe7b7db02805956241f24e59","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-qjypvYRI9+xuuN8NZGrdQzdS/rLmNqcl1ePgQmSBj07usJWt9kTJD9puwhFliS48IwGT3+tsDJ4EWhOS2ejwuw==","shasum":"a7cef4c76f7173e9147e5b97fcb8ac49dbc0bfa1","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.1.0-beta.12.tgz","fileCount":32,"unpackedSize":627352,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDPJtLgkLLSSj/CXAGp58YZgLsHQbly3YCnQpfsIN+75AiEAnhDhtrJejqP7akbdCfQLbhW7GroWMzr+Bv1slv0Mu/Q="}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.1.0-beta.12_1696081881924_0.8495076724710311"},"_hasShrinkwrap":false},"3.1.0-beta.13":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.1.0-beta.13","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","bin":{"compile":"dist/cli/compile.js"},"types":"dist/index.d.ts","scripts":{"rollup":"rollup -c","build:cli":"tsc src/compile.ts --outDir dist/cli","tsc-cli":"tsc -p cli/tsconfig.json","tsc-components":"tsc -p components/tsconfig.json"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.4","@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","rollup":"^3.29.4","rollup-plugin-dts":"^6.0.2","ts-node":"^10.9.1","tslib":"^2.6.2","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.1.0-beta.13","readme":"# react-vario-theme\r\n\r\n![npm](https://img.shields.io/npm/v/react-vario-theme)\r\n\r\n**react-vario-theme** is a tool for managing themes in React applications. Easily convert a TypeScript theme object into CSS variables and seamlessly switch between multiple themes using the **ThemeVarioProvider** context.\r\n\r\n## Features\r\n\r\n- 💡 Easily define themes in a TypeScript object\r\n- 🌟 Singular Source of Truth\r\n- 🔄 Instant theme switching\r\n- 🎨 Access theme colors in react using ThemeProvider\r\n- 💫 Supports multiple themes\r\n- 🌈 Seamless Tailwind Integration by automatically generating all theme variables for Tailwind\r\n- 🤖 Built-in TypeScript support for strong typing\r\n\r\n## Usage\r\n\r\n### 1. Define your theme\r\n\r\nCreate a TypeScript object with your theme specifications. Colors will always be needed and can contain as many color schemes as you want. **Important:** To make sure that your theme will work as intended use it in its own file, for example theme.ts\r\n\r\n```typescript\r\nimport { ThemeType } from \"react-vario-theme\";\r\n\r\nexport const varoTheme = {\r\n  colors: {\r\n    light: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n    dark: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n  },\r\n  padding: {\r\n    sm: \"5px\",\r\n    md: \"10px\",\r\n    lg: \"20px\",\r\n  },\r\n} as const satisfies ThemeType;\r\n```\r\n\r\n### 2. Generate css variables\r\n\r\nnpx react-vario-theme compile \"path to your theme object\" \"path and name of the css/sass file you want to create\"\r\nWhen the css variables are generated they can be used in css or in react using the theme context provider.\r\n\r\n```\r\nCompile: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss\r\nWatch: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss --watch\r\n```\r\n\r\n### 3. Optional: Tailwind support\r\n\r\nYou can get all your theme css variables in tailwind using \"tailwindTheme\"\r\n\r\n```typescript\r\nimport { tailwindColors, tailwindTheme } from \"react-vario-theme\";\r\nimport { type Config } from \"tailwindcss\";\r\nimport { varoTheme } from \"./src/styles/theme\";\r\n\r\nexport default {\r\n  content: [\"./src/**/*.{js,ts,jsx,tsx}\"],\r\n  theme: tailwindTheme(varoTheme),\r\n  plugins: [],\r\n} satisfies Config;\r\n```\r\n\r\n### 3. Use `VarioThemeProvider`\r\n\r\nWrap your application with the `VarioThemeProvider`.\r\n\r\n```jsx\r\nimport { varoTheme } from \"~/styles/theme\";\r\nimport { VarioThemeProvider } from \"react-vario-theme\";\r\n\r\nconst App = () => {\r\n  return (\r\n    <VarioThemeProvider theme={varoTheme}>\r\n      <Component {...pageProps} />\r\n    </VarioThemeProvider>\r\n  );\r\n};\r\n```\r\n\r\n### 4. Access Theme Variables\r\n\r\nYou can now access theme variables anywhere within your components.\r\n\r\n```jsx\r\nimport { useVarioTheme } from \"react-vario-theme\";\r\nimport { varoTheme } from \"~/styles/theme\";\r\nconst MyComponent = () => {\r\n  const { theme, colorScheme, changeColorScheme } =\r\n    useVarioTheme<typeof varoTheme>();\r\n\r\n  return (\r\n    <button\r\n      style={{ backgroundColor: theme.colors.primary }}\r\n    >\r\n      Click Me\r\n    </button>\r\n  );\r\n};\r\n```\r\n\r\n## API\r\n\r\n### `VarioThemeProvider`\r\n\r\nProps:\r\n\r\n- `theme`: The theme object containing key-value pairs of CSS variables.\r\n\r\n### `useVarioTheme<T>()`\r\n\r\nReturns:\r\n\r\n- `theme, colorScheme, changeColorScheme`: An object containing the colors and variables of the theme, strongly typed with TypeScript when using `typeof`. All the variables will be equal to the css variable generated by react-vario-theme compile\r\n","readmeFilename":"README.md","gitHead":"4ab936b9905f1bdc320798310ae9daf67bebb391","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-C2Bp66YAiy6Y/TCwE9hBlqkQr7OY0dRqRYCzvJNFEPwqA3sK5NfTxEeZlRNeUCCZjc0DUI5D+p7RPRG6UnTzZQ==","shasum":"fa17147168c3daae44a664eb0f9da6cad0ac1e40","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.1.0-beta.13.tgz","fileCount":32,"unpackedSize":90085,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHCx0jfwXqFEPnTHU1I2ec7i8EPCl9kM54xikSVMcmKqAiAbtEOeW+S0gTBjDU84PxZcia5Ff3c4AXvjHM3I8Gdb2Q=="}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.1.0-beta.13_1696084018592_0.9533472271728916"},"_hasShrinkwrap":false},"3.1.0-beta.14":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.1.0-beta.14","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","bin":{"compile":"dist/cli/compile.js"},"types":"dist/index.d.ts","scripts":{"rollup":"rollup -c","build:cli":"tsc src/compile.ts --outDir dist/cli","tsc-cli":"tsc -p cli/tsconfig.json","tsc-components":"tsc -p components/tsconfig.json"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.4","@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","rollup":"^3.29.4","rollup-plugin-dts":"^6.0.2","ts-node":"^10.9.1","tslib":"^2.6.2","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.1.0-beta.14","readme":"# react-vario-theme\r\n\r\n![npm](https://img.shields.io/npm/v/react-vario-theme)\r\n\r\n**react-vario-theme** is a tool for managing themes in React applications. Easily convert a TypeScript theme object into CSS variables and seamlessly switch between multiple themes using the **ThemeVarioProvider** context.\r\n\r\n## Features\r\n\r\n- 💡 Easily define themes in a TypeScript object\r\n- 🌟 Singular Source of Truth\r\n- 🔄 Instant theme switching\r\n- 🎨 Access theme colors in react using ThemeProvider\r\n- 💫 Supports multiple themes\r\n- 🌈 Seamless Tailwind Integration by automatically generating all theme variables for Tailwind\r\n- 🤖 Built-in TypeScript support for strong typing\r\n\r\n## Usage\r\n\r\n### 1. Define your theme\r\n\r\nCreate a TypeScript object with your theme specifications. Colors will always be needed and can contain as many color schemes as you want. **Important:** To make sure that your theme will work as intended use it in its own file, for example theme.ts\r\n\r\n```typescript\r\nimport { ThemeType } from \"react-vario-theme\";\r\n\r\nexport const varoTheme = {\r\n  colors: {\r\n    light: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n    dark: {\r\n      primary: \"#007bff\",\r\n      text: {\r\n        default: \"#6c757d\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n  },\r\n  padding: {\r\n    sm: \"5px\",\r\n    md: \"10px\",\r\n    lg: \"20px\",\r\n  },\r\n} as const satisfies ThemeType;\r\n```\r\n\r\n### 2. Generate css variables\r\n\r\nnpx react-vario-theme compile \"path to your theme object\" \"path and name of the css/sass file you want to create\"\r\nWhen the css variables are generated they can be used in css or in react using the theme context provider.\r\n\r\n```\r\nCompile: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss\r\nWatch: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss --watch\r\n```\r\n\r\n### 3. Optional: Tailwind support\r\n\r\nYou can get all your theme css variables in tailwind using \"tailwindTheme\"\r\n\r\n```typescript\r\nimport { tailwindColors, tailwindTheme } from \"react-vario-theme\";\r\nimport { type Config } from \"tailwindcss\";\r\nimport { varoTheme } from \"./src/styles/theme\";\r\n\r\nexport default {\r\n  content: [\"./src/**/*.{js,ts,jsx,tsx}\"],\r\n  theme: tailwindTheme(varoTheme),\r\n  plugins: [],\r\n} satisfies Config;\r\n```\r\n\r\n### 3. Use `VarioThemeProvider`\r\n\r\nWrap your application with the `VarioThemeProvider`.\r\n\r\n```jsx\r\nimport { varoTheme } from \"~/styles/theme\";\r\nimport { VarioThemeProvider } from \"react-vario-theme\";\r\n\r\nconst App = () => {\r\n  return (\r\n    <VarioThemeProvider theme={varoTheme}>\r\n      <Component {...pageProps} />\r\n    </VarioThemeProvider>\r\n  );\r\n};\r\n```\r\n\r\n### 4. Access Theme Variables\r\n\r\nYou can now access theme variables anywhere within your components.\r\n\r\n```jsx\r\nimport { useVarioTheme } from \"react-vario-theme\";\r\nimport { varoTheme } from \"~/styles/theme\";\r\nconst MyComponent = () => {\r\n  const { theme, colorScheme, changeColorScheme } =\r\n    useVarioTheme<typeof varoTheme>();\r\n\r\n  return (\r\n    <button\r\n      style={{ backgroundColor: theme.colors.primary }}\r\n    >\r\n      Click Me\r\n    </button>\r\n  );\r\n};\r\n```\r\n\r\n## API\r\n\r\n### `VarioThemeProvider`\r\n\r\nProps:\r\n\r\n- `theme`: The theme object containing key-value pairs of CSS variables.\r\n\r\n### `useVarioTheme<T>()`\r\n\r\nReturns:\r\n\r\n- `theme, colorScheme, changeColorScheme`: An object containing the colors and variables of the theme, strongly typed with TypeScript when using `typeof`. All the variables will be equal to the css variable generated by react-vario-theme compile\r\n","readmeFilename":"README.md","gitHead":"9c321fa5935d26d54a5092bfe17f40d302d60068","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-n0HtkI//ty1IFLu+lekkfmjp6bq3eLKZjAlnMyuhugKKeEdsXoFZze3j9/1pNKNAk4z7+PlYpLV/+3tyG8fywA==","shasum":"8a6c43f8b9c15672e5b63a4e6f860b7d66406b5b","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.1.0-beta.14.tgz","fileCount":32,"unpackedSize":286510,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOADw7MtDXnCdMT/IFG/MMj3JN2QJ54GGpakdpKSvDFQIhAIDJVk5weWEartaT3+UZUQGiRuBOw42PdlBI/J6fZfUj"}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.1.0-beta.14_1696084791868_0.7837008623932333"},"_hasShrinkwrap":false},"3.2.0":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.2.0","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","bin":{"compile":"dist/cli/compile.js"},"types":"dist/index.d.ts","scripts":{"rollup":"rollup -c","build:cli":"tsc src/compile.ts --outDir dist/cli","tsc-cli":"tsc -p cli/tsconfig.json","tsc-components":"tsc -p components/tsconfig.json"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.4","@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","rollup":"^3.29.4","rollup-plugin-dts":"^6.0.2","ts-node":"^10.9.1","tslib":"^2.6.2","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.2.0","gitHead":"0e2e175ee7cd80c03f78be144e2827eb381869cf","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-1HerE20+yPcvQWSneU+1mZUDE+6eL+4/inJ6ztVFyUmDF9AN25t5OcW8cchbY0psqxIFG23Bbb6sjKKzUuIqKA==","shasum":"a2b752012818c96a777400ed483b1dad5f58b8bc","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.2.0.tgz","fileCount":32,"unpackedSize":286502,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDkvQ0L48i5mTZkBHb5XjlQ+0aUnwyW/KM2kyz+PxLpJAiBOZbbGF4Ygc9J42MoZxzsBXqVBRK/y/7FidQO8MgmibQ=="}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.2.0_1696099740438_0.6421298587173614"},"_hasShrinkwrap":false},"3.3.0":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.3.0","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","bin":{"compile":"dist/cli/compile.js"},"types":"dist/index.d.ts","scripts":{"rollup":"rollup -c","build:cli":"tsc src/compile.ts --outDir dist/cli","tsc-cli":"tsc -p cli/tsconfig.json","tsc-components":"tsc -p components/tsconfig.json"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.4","@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","rollup":"^3.29.4","rollup-plugin-dts":"^6.0.2","ts-node":"^10.9.1","tslib":"^2.6.2","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.3.0","gitHead":"c8aac6a0b43b44aa80f6c5ec9c39373a9fedb2d1","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-08TVk2UBsceF0aIM7F1fm9GLQOLzeM4paue9CpFCyFgk2ipABkDWjPphnomtpXg4FyVnylPJZn09Vdpi2+N4Hw==","shasum":"17985b0956564dce09d3ce44421c5197dbdd9704","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.3.0.tgz","fileCount":32,"unpackedSize":286502,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbKVIkkr/gQ6XHItw9ruslCaKKL7hQKYALyig+zbemdgIhAIX1W7PjsFYmnnj6jrsRtkmfnKZkRqEjEzP6aT15FyVv"}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.3.0_1696180777532_0.5564616307474761"},"_hasShrinkwrap":false},"3.3.1":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.3.1","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","bin":{"compile":"dist/cli/compile.js"},"types":"dist/index.d.ts","scripts":{"rollup":"rollup -c","build:cli":"tsc src/compile.ts --outDir dist/cli","tsc-cli":"tsc -p cli/tsconfig.json","tsc-components":"tsc -p components/tsconfig.json"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.4","@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","rollup":"^3.29.4","rollup-plugin-dts":"^6.0.2","ts-node":"^10.9.1","tslib":"^2.6.2","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.3.1","gitHead":"32e5cc4dbc1b6c8f0c15de8815ed20dc25e796fd","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-mWUu/cvKYV5tg9uQK6W9lpqzDbrB4CVhBaPK1iA1l0cotXb7pZvypBhm34mQIjp2fsm+VjinzYQqgVBwOwKP0A==","shasum":"0d0e50e48a5709f1ae0f854fae6e9b242065341b","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.3.1.tgz","fileCount":32,"unpackedSize":291034,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICVKfcpCu5Ft16QE0P9XMuCHVeUPVibLJtkr+TZpp2zKAiAKRSKym+VRu1hUjnvyS3TYHq7o1HfdTZNQtgXRxHmKBg=="}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.3.1_1696226934857_0.4773900421843189"},"_hasShrinkwrap":false},"3.3.2":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.3.2","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","bin":{"compile":"dist/cli/compile.js"},"types":"dist/index.d.ts","scripts":{"rollup":"rollup -c"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.4","@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","rollup":"^3.29.4","rollup-plugin-dts":"^6.0.2","ts-node":"^10.9.1","tslib":"^2.6.2","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.3.2","gitHead":"2f346c7b3c5153726053b44ad01dafb4015e41c9","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-cgtdkh2nKiti2C89tnjy+5Tx3oPLurWz52J8keHlwaiVf3O3LVgfCrJFqRYpKFOnv2QTPxtEWT2VhMmqgC4bzQ==","shasum":"e5156ed865371f9a4632aaf1b076fcaf379b9223","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.3.2.tgz","fileCount":32,"unpackedSize":292157,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkT9B4RP3OFn9kzpgjt01aLHDykj40jd3bKCiqUKSjIAIgaitTVFX1QISZr3ha2p+JOlYPVRwdB6sO6fh6rWH0iBU="}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.3.2_1696365005862_0.10263139419607281"},"_hasShrinkwrap":false},"3.3.3":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.3.3","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","bin":{"compile":"dist/cli/compile.js"},"types":"dist/index.d.ts","scripts":{"rollup":"rollup -c"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.4","@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","rollup":"^3.29.4","rollup-plugin-dts":"^6.0.2","ts-node":"^10.9.1","tslib":"^2.6.2","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.3.3","gitHead":"38fca85b41dd74574e72566b004538c0f893802e","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-/zis80RZW8zMUc8tmgq7SNWuTKEojOivzu/srWI1UTgKTYukO6hZkD0fudB0cN9ZyFDABTNVPGyr/z7SKJoBow==","shasum":"7b4c77e3e993e9c97e614e0181d7a686f9c70fde","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.3.3.tgz","fileCount":32,"unpackedSize":292540,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQColvL0hXzUl0xHKfKZrhIW8skHGSEpA4tRVHwugqcjvgIgYmMN3BqLu0sB/IEefQOrxfet+Kvjo//eBIudd0JtnzI="}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.3.3_1696438918972_0.5493037413610444"},"_hasShrinkwrap":false},"3.4.0":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.4.0","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","bin":{"compile":"dist/cli/compile.js"},"types":"dist/index.d.ts","scripts":{"rollup":"rollup -c"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.4","@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","rollup":"^3.29.4","rollup-plugin-dts":"^6.0.2","ts-node":"^10.9.1","tslib":"^2.6.2","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.4.0","gitHead":"b7222a39ec3178bad1ad5ab9658f7860cd629207","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-GOknAv/ch2BRhcg6StvWUw1K5yWT7uIZPG1tMJToD0QruPFtG6PkP1DQT5OO7FFmGZktG+9gTI0mTqrPD7DJiw==","shasum":"a41ad94030f929a2618f32a7a8bf1689557b2da7","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.4.0.tgz","fileCount":32,"unpackedSize":300739,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAV+YNFCxn7gU8eigLtnID3PwGxkBPJv60gVv0tgdbeJAiEAnLigNi8G9VhxaCeMBiTl1rHIdZI+8/WEhPkQBuklJkQ="}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.4.0_1696677992490_0.4255420163530108"},"_hasShrinkwrap":false},"3.5.0":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.5.0","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","bin":{"compile":"dist/cli/compile.js"},"types":"dist/index.d.ts","scripts":{"rollup":"rollup -c"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.4","@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","rollup":"^3.29.4","rollup-plugin-dts":"^6.0.2","ts-node":"^10.9.1","tslib":"^2.6.2","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.5.0","gitHead":"643cd5f994eafc98c4ce5f13dd2ce892c7e85d56","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-rM4Yx1A/9QVhuCbX/nWIuKaV9T7AfNpWYllZXxNkEBGQIxQamOtunbk0ZlPuEEer0r8SvXb2M6f8u7RJr7LZOQ==","shasum":"b35ec4abe70e813232d8ee8a25052797075a5b22","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.5.0.tgz","fileCount":32,"unpackedSize":312289,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiCAaGlIzDwqE/KY6jvbwidOMMxlqAVhtgiVcArIF5ZgIhANeDoic4xAlKgvYQQr45oL9HjQ194V2QkeecDe0RvLAG"}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.5.0_1697875298482_0.3706740894453606"},"_hasShrinkwrap":false},"3.5.1":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.5.1","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","bin":{"compile":"dist/cli/compile.js"},"types":"dist/index.d.ts","scripts":{"rollup":"rollup -c"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.4","@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","rollup":"^3.29.4","rollup-plugin-dts":"^6.0.2","ts-node":"^10.9.1","tslib":"^2.6.2","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.5.1","gitHead":"bee29e88f22ddbe266e4532de65bd63aee7d14f6","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-Dd8o03tKfXqrMYOrk02syllusfscW5cmrb8pHnQx/+GLMwQShU9w+xcVp48mtlCDfk9HitU12P/ICrsStngIdg==","shasum":"010863549e500e07c67cbb7e204e25aff2b0bace","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.5.1.tgz","fileCount":32,"unpackedSize":313224,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJRQWc6ooJkqzHKmpa3pfAXf+eLM8kdz7urIaJG7r9FQIgOgSNK1NEvNXh7q1I50guvm2W0u2qw5zzZxsE0PfeUaE="}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.5.1_1697880832874_0.5706459825516759"},"_hasShrinkwrap":false},"3.6.0-beta.1":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.6.0-beta.1","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","bin":{"compile":"dist/cli/compile.js"},"types":"dist/index.d.ts","scripts":{"rollup":"rollup -c"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.4","@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","rollup":"^3.29.4","rollup-plugin-dts":"^6.0.2","ts-node":"^10.9.1","tslib":"^2.6.2","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.6.0-beta.1","readme":"# react-vario-theme\r\n\r\n![npm](https://img.shields.io/npm/v/react-vario-theme)\r\n\r\n**react-vario-theme** is a tool for managing themes in React applications. Easily convert a TypeScript theme object into CSS variables and seamlessly switch between multiple themes using the **ThemeVarioProvider** context.\r\n\r\n## Features\r\n\r\n- 💡 Easily define themes in a TypeScript object\r\n- 🌟 Singular Source of Truth\r\n- 🔄 Instant theme switching\r\n- 🎨 Access theme colors in react using ThemeProvider\r\n- 💫 Supports multiple themes\r\n- 🌈 Seamless Tailwind Integration by automatically generating all theme variables for Tailwind\r\n- 🤖 Built-in TypeScript support for strong typing\r\n\r\n## Usage\r\n\r\n### 1. Define your theme\r\n\r\nCreate a TypeScript object with your theme specifications. Colors will always be needed and can contain as many color schemes as you want. **Important:** To make sure that your theme will work as intended use it in its own file, for example theme.ts\r\n\r\n```typescript\r\nimport { ThemeType } from \"react-vario-theme\";\r\n\r\nexport const varoTheme = {\r\n  colors: {\r\n    light: {\r\n      primary: \"#007bff\",\r\n      accent: {\r\n        1: colorVariants({\r\n          color: colors.accent[1],\r\n          variants: { hover: -10, active: -10 },\r\n          additionalColors: { text: colors.text.light },\r\n        }),\r\n      },\r\n      text: {\r\n        default: \"#000000\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n    dark: {\r\n      text: {\r\n        default: \"#ffffff\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n  },\r\n  padding: {\r\n    sm: \"5px\",\r\n    md: \"10px\",\r\n    lg: \"20px\",\r\n  },\r\n} as const satisfies ThemeType;\r\n```\r\n\r\n### 2. Generate css variables\r\n\r\nnpx react-vario-theme compile \"path to your theme object\" \"path and name of the css/sass file you want to create\"\r\nWhen the css variables are generated they can be used in css or in react using the theme context provider.\r\n\r\n```\r\nCompile: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss\r\nWatch: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss --watch\r\n```\r\n\r\n### 3. Optional: Tailwind support\r\n\r\nYou can get all your theme css variables in tailwind using \"tailwindTheme\"\r\n\r\n```typescript\r\nimport { tailwindColors, tailwindTheme } from \"react-vario-theme\";\r\nimport { type Config } from \"tailwindcss\";\r\nimport { varoTheme } from \"./src/styles/theme\";\r\n\r\nexport default {\r\n  content: [\"./src/**/*.{js,ts,jsx,tsx}\"],\r\n  theme: tailwindTheme(varoTheme),\r\n  plugins: [],\r\n} satisfies Config;\r\n```\r\n\r\n### 3. Use `VarioThemeProvider`\r\n\r\nWrap your application with the `VarioThemeProvider`.\r\n\r\n```jsx\r\nimport { varoTheme } from \"~/styles/theme\";\r\nimport { VarioThemeProvider } from \"react-vario-theme\";\r\n\r\nconst App = () => {\r\n  return (\r\n    <VarioThemeProvider theme={varoTheme}>\r\n      <Component {...pageProps} />\r\n    </VarioThemeProvider>\r\n  );\r\n};\r\n```\r\n\r\n### 4. Access Theme Variables\r\n\r\nYou can now access theme variables anywhere within your components.\r\n\r\n```jsx\r\nimport { useVarioTheme } from \"react-vario-theme\";\r\nimport { varoTheme } from \"~/styles/theme\";\r\nconst MyComponent = () => {\r\n  const { theme, colorScheme, changeColorScheme } =\r\n    useVarioTheme<typeof varoTheme>();\r\n\r\n  return (\r\n    <button\r\n      style={{ backgroundColor: theme.colors.primary }}\r\n    >\r\n      Click Me\r\n    </button>\r\n  );\r\n};\r\n```\r\n\r\n## API\r\n\r\n### `VarioThemeProvider`\r\n\r\nProps:\r\n\r\n- `theme`: The theme object containing key-value pairs of CSS variables.\r\n\r\n### `useVarioTheme<T>()`\r\n\r\nReturns:\r\n\r\n- `theme, colorScheme, changeColorScheme`: An object containing the colors and variables of the theme, strongly typed with TypeScript when using `typeof`. All the variables will be equal to the css variable generated by react-vario-theme compile\r\n\r\n\r\n## UTIL Functions\r\nUtils to help create your theme object\r\n\r\n- [generateValues<Count>](#generatevaluescountvalue-multiplier-text-count)\r\n- [lighten](#lightenhex-percent)\r\n- [darken](#darkenhex-percent)\r\n- [colorVariants](#colorvariantsinput)\r\n- [brightnessVariants](#brightnessvariantscolor-variants)\r\n- [flatten](#flattenobj-prefix)\r\n- [flattenColors](#flattencolorsobj)\r\n- [rgbToHex](#rgbtohexr-g-b)\r\n- [hexToRgb](#hextorgbhex)\r\n- [generateColors](#generatecolorshex-count-reverse)\r\n\r\n---\r\n\r\n### `generateValues<Count>(value, multiplier, text, count)`\r\n\r\nThis function generates a dictionary (object) of values based on the specified `count`. It takes four parameters:\r\n\r\n- `value`: The initial value.\r\n- `multiplier`: A multiplier applied to each subsequent value.\r\n- `text`: A text suffix added to each value.\r\n- `count`: The number of values to generate.\r\n\r\nIt returns an object where keys are numbered from 1 to `count`, and values are calculated based on the formula `value * multiplier^index + text`.\r\n\r\n---\r\n\r\n### `lighten(hex, percent)`\r\n\r\nThis function lightens a given hex color by a specified percentage. It takes two parameters:\r\n\r\n- `hex`: The input hex color code (e.g., \"#RRGGBB\").\r\n- `percent`: The percentage by which to lighten the color.\r\n\r\nIt returns a new hex color code that is lighter by the specified percentage.\r\n\r\n---\r\n\r\n### `darken(hex, percent)`\r\n\r\nThis function darkens a given hex color by a specified percentage. It takes two parameters:\r\n\r\n- `hex`: The input hex color code (e.g., \"#RRGGBB\").\r\n- `percent`: The percentage by which to darken the color.\r\n\r\nIt returns a new hex color code that is darker by the specified percentage.\r\n\r\n---\r\n\r\n### `colorVariants(input)`\r\n\r\nThis function generates color variants based on a primary color. It takes an object `input` with the following properties:\r\n\r\n- `color`: The primary color.\r\n- `variants`: An object with keys representing variant names and values representing the percentage of lightening for each variant.\r\n- `additionalColors` (optional): An object with additional color names and their corresponding hex values.\r\n\r\nIt returns an object with color variants based on the primary color and additional colors if provided.\r\n\r\n---\r\n\r\n### `brightnessVariants(color, variants)`\r\n\r\nThis function generates brightness variants of a given color. It takes two parameters:\r\n\r\n- `color`: The input hex color code (e.g., \"#RRGGBB\").\r\n- `variants`: An object with keys representing variant names and values representing the percentage of lightening for each variant.\r\n\r\nIt returns an object with brightness variants of the input color.\r\n\r\n---\r\n\r\n### `flatten(obj, prefix)`\r\n\r\nThis function flattens a nested object into a flat object with keys formatted as `${prefix}-${nestedKey}`. It takes two parameters:\r\n\r\n- `obj`: The nested object to be flattened.\r\n- `prefix`: A prefix to prepend to the keys.\r\n\r\nIt returns a flat object with flattened keys.\r\n\r\n---\r\n\r\n### `flattenColors(obj)`\r\n\r\nThis is a specific use of the `flatten` function with the prefix \"color-\". It flattens an object with nested color definitions.\r\n\r\n---\r\n\r\n### `rgbToHex(r, g, b)`\r\n\r\nThis function converts RGB color values to a hex color code. It takes three parameters:\r\n\r\n- `r`: The red component (0-255).\r\n- `g`: The green component (0-255).\r\n- `b`: The blue component (0-255).\r\n\r\nIt returns a hex color code (e.g., \"#RRGGBB\").\r\n\r\n---\r\n\r\n### `hexToRgb(hex)`\r\n\r\nThis function converts a hex color code to RGB color values. It takes one parameter:\r\n\r\n- `hex`: The input hex color code (e.g., \"#RRGGBB\").\r\n\r\nIt returns an object with `r`, `g`, and `b` properties representing the RGB values.\r\n\r\n---\r\n\r\n### `generateColors(hex, count, reverse?)`\r\n\r\nThis function generates an array of hex color codes based on the specified `count`. It takes three parameters:\r\n\r\n- `hex`: The initial hex color code (e.g., \"#RRGGBB\").\r\n- `count`: The number of color codes to generate.\r\n- `reverse` (optional): A boolean flag to reverse the order of generated colors (default is `false`).\r\n\r\nIt returns an array of hex color codes, either in ascending or descending order, based on the provided parameters.\r\n","readmeFilename":"README.md","gitHead":"0443141573373f2e8f7409fea58a870636f1eab4","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-6cHFjzKiCs0Ot4tORSk6KdeLdshbojOJlbt/f6sBzwLNEVpgzgvVRHIeBDMngkUPB2Hc/F6DsXywal1bWPHwIw==","shasum":"5423134e9cc2eb8f004d36730d58817f54c7bdd0","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.6.0-beta.1.tgz","fileCount":32,"unpackedSize":316699,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9Z/xleC488+gXjvMdvelVfO+Ou6I+kPxsOUJ4jdSFiQIgbKp5SnuQMS54lUV50joT6uAgpqPS109GKfU6gSuW58c="}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.6.0-beta.1_1699704819393_0.586519433812376"},"_hasShrinkwrap":false},"3.6.0-beta.2":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.6.0-beta.2","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","bin":{"compile":"dist/cli/compile.js"},"types":"dist/index.d.ts","scripts":{"rollup":"rollup -c"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.4","@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","rollup":"^3.29.4","rollup-plugin-dts":"^6.0.2","ts-node":"^10.9.1","tslib":"^2.6.2","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.6.0-beta.2","readme":"# react-vario-theme\r\n\r\n![npm](https://img.shields.io/npm/v/react-vario-theme)\r\n\r\n**react-vario-theme** is a tool for managing themes in React applications. Easily convert a TypeScript theme object into CSS variables and seamlessly switch between multiple themes using the **ThemeVarioProvider** context.\r\n\r\n## Features\r\n\r\n- 💡 Easily define themes in a TypeScript object\r\n- 🌟 Singular Source of Truth\r\n- 🔄 Instant theme switching\r\n- 🎨 Access theme colors in react using ThemeProvider\r\n- 💫 Supports multiple themes\r\n- 🌈 Seamless Tailwind Integration by automatically generating all theme variables for Tailwind\r\n- 🤖 Built-in TypeScript support for strong typing\r\n\r\n## Usage\r\n\r\n### 1. Define your theme\r\n\r\nCreate a TypeScript object with your theme specifications. Colors will always be needed and can contain as many color schemes as you want. **Important:** To make sure that your theme will work as intended use it in its own file, for example theme.ts\r\n\r\n```typescript\r\nimport { ThemeType } from \"react-vario-theme\";\r\n\r\nexport const varoTheme = {\r\n  colors: {\r\n    light: {\r\n      primary: \"#007bff\",\r\n      accent: {\r\n        1: colorVariants({\r\n          color: colors.accent[1],\r\n          variants: { hover: -10, active: -10 },\r\n          additionalColors: { text: colors.text.light },\r\n        }),\r\n      },\r\n      text: {\r\n        default: \"#000000\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n    dark: {\r\n      text: {\r\n        default: \"#ffffff\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n  },\r\n  padding: {\r\n    sm: \"5px\",\r\n    md: \"10px\",\r\n    lg: \"20px\",\r\n  },\r\n} as const satisfies ThemeType;\r\n```\r\n\r\n### 2. Generate css variables\r\n\r\nnpx react-vario-theme compile \"path to your theme object\" \"path and name of the css/sass file you want to create\"\r\nWhen the css variables are generated they can be used in css or in react using the theme context provider.\r\n\r\n```\r\nCompile: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss\r\nWatch: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss --watch\r\n```\r\n\r\n### 3. Optional: Tailwind support\r\n\r\nYou can get all your theme css variables in tailwind using \"tailwindTheme\"\r\n\r\n```typescript\r\nimport { tailwindColors, tailwindTheme } from \"react-vario-theme\";\r\nimport { type Config } from \"tailwindcss\";\r\nimport { varoTheme } from \"./src/styles/theme\";\r\n\r\nexport default {\r\n  content: [\"./src/**/*.{js,ts,jsx,tsx}\"],\r\n  theme: tailwindTheme(varoTheme),\r\n  plugins: [],\r\n} satisfies Config;\r\n```\r\n\r\n### 3. Use `VarioThemeProvider`\r\n\r\nWrap your application with the `VarioThemeProvider`.\r\n\r\n```jsx\r\nimport { varoTheme } from \"~/styles/theme\";\r\nimport { VarioThemeProvider } from \"react-vario-theme\";\r\n\r\nconst App = () => {\r\n  return (\r\n    <VarioThemeProvider theme={varoTheme}>\r\n      <Component {...pageProps} />\r\n    </VarioThemeProvider>\r\n  );\r\n};\r\n```\r\n\r\n### 4. Access Theme Variables\r\n\r\nYou can now access theme variables anywhere within your components.\r\n\r\n```jsx\r\nimport { useVarioTheme } from \"react-vario-theme\";\r\nimport { varoTheme } from \"~/styles/theme\";\r\nconst MyComponent = () => {\r\n  const { theme, colorScheme, changeColorScheme } =\r\n    useVarioTheme<typeof varoTheme>();\r\n\r\n  return (\r\n    <button\r\n      style={{ backgroundColor: theme.colors.primary }}\r\n    >\r\n      Click Me\r\n    </button>\r\n  );\r\n};\r\n```\r\n\r\n## API\r\n\r\n### `VarioThemeProvider`\r\n\r\nProps:\r\n\r\n- `theme`: The theme object containing key-value pairs of CSS variables.\r\n\r\n### `useVarioTheme<T>()`\r\n\r\nReturns:\r\n\r\n- `theme, colorScheme, changeColorScheme`: An object containing the colors and variables of the theme, strongly typed with TypeScript when using `typeof`. All the variables will be equal to the css variable generated by react-vario-theme compile\r\n\r\n\r\n## UTIL Functions\r\nUtils to help create your theme object\r\n\r\n- [generateValues<Count>](#generatevaluescountvalue-multiplier-text-count)\r\n- [lighten](#lightenhex-percent)\r\n- [darken](#darkenhex-percent)\r\n- [colorVariants](#colorvariantsinput)\r\n- [brightnessVariants](#brightnessvariantscolor-variants)\r\n- [flatten](#flattenobj-prefix)\r\n- [flattenColors](#flattencolorsobj)\r\n- [rgbToHex](#rgbtohexr-g-b)\r\n- [hexToRgb](#hextorgbhex)\r\n- [generateColors](#generatecolorshex-count-reverse)\r\n\r\n---\r\n\r\n### `generateValues<Count>(value, multiplier, text, count)`\r\n\r\nThis function generates a dictionary (object) of values based on the specified `count`. It takes four parameters:\r\n\r\n- `value`: The initial value.\r\n- `multiplier`: A multiplier applied to each subsequent value.\r\n- `text`: A text suffix added to each value.\r\n- `count`: The number of values to generate.\r\n\r\nIt returns an object where keys are numbered from 1 to `count`, and values are calculated based on the formula `value * multiplier^index + text`.\r\n\r\n---\r\n\r\n### `lighten(hex, percent)`\r\n\r\nThis function lightens a given hex color by a specified percentage. It takes two parameters:\r\n\r\n- `hex`: The input hex color code (e.g., \"#RRGGBB\").\r\n- `percent`: The percentage by which to lighten the color.\r\n\r\nIt returns a new hex color code that is lighter by the specified percentage.\r\n\r\n---\r\n\r\n### `darken(hex, percent)`\r\n\r\nThis function darkens a given hex color by a specified percentage. It takes two parameters:\r\n\r\n- `hex`: The input hex color code (e.g., \"#RRGGBB\").\r\n- `percent`: The percentage by which to darken the color.\r\n\r\nIt returns a new hex color code that is darker by the specified percentage.\r\n\r\n---\r\n\r\n### `colorVariants(input)`\r\n\r\nThis function generates color variants based on a primary color. It takes an object `input` with the following properties:\r\n\r\n- `color`: The primary color.\r\n- `variants`: An object with keys representing variant names and values representing the percentage of lightening for each variant.\r\n- `additionalColors` (optional): An object with additional color names and their corresponding hex values.\r\n\r\nIt returns an object with color variants based on the primary color and additional colors if provided.\r\n\r\n---\r\n\r\n### `brightnessVariants(color, variants)`\r\n\r\nThis function generates brightness variants of a given color. It takes two parameters:\r\n\r\n- `color`: The input hex color code (e.g., \"#RRGGBB\").\r\n- `variants`: An object with keys representing variant names and values representing the percentage of lightening for each variant.\r\n\r\nIt returns an object with brightness variants of the input color.\r\n\r\n---\r\n\r\n### `flatten(obj, prefix)`\r\n\r\nThis function flattens a nested object into a flat object with keys formatted as `${prefix}-${nestedKey}`. It takes two parameters:\r\n\r\n- `obj`: The nested object to be flattened.\r\n- `prefix`: A prefix to prepend to the keys.\r\n\r\nIt returns a flat object with flattened keys.\r\n\r\n---\r\n\r\n### `flattenColors(obj)`\r\n\r\nThis is a specific use of the `flatten` function with the prefix \"color-\". It flattens an object with nested color definitions.\r\n\r\n---\r\n\r\n### `rgbToHex(r, g, b)`\r\n\r\nThis function converts RGB color values to a hex color code. It takes three parameters:\r\n\r\n- `r`: The red component (0-255).\r\n- `g`: The green component (0-255).\r\n- `b`: The blue component (0-255).\r\n\r\nIt returns a hex color code (e.g., \"#RRGGBB\").\r\n\r\n---\r\n\r\n### `hexToRgb(hex)`\r\n\r\nThis function converts a hex color code to RGB color values. It takes one parameter:\r\n\r\n- `hex`: The input hex color code (e.g., \"#RRGGBB\").\r\n\r\nIt returns an object with `r`, `g`, and `b` properties representing the RGB values.\r\n\r\n---\r\n\r\n### `generateColors(hex, count, reverse?)`\r\n\r\nThis function generates an array of hex color codes based on the specified `count`. It takes three parameters:\r\n\r\n- `hex`: The initial hex color code (e.g., \"#RRGGBB\").\r\n- `count`: The number of color codes to generate.\r\n- `reverse` (optional): A boolean flag to reverse the order of generated colors (default is `false`).\r\n\r\nIt returns an array of hex color codes, either in ascending or descending order, based on the provided parameters.\r\n","readmeFilename":"README.md","gitHead":"eb03b01b9a6f7f839ce82d8860636d8c3558a127","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-2PExejmUEU4Yg68gJJKQN1ayvVZbST9DrJjlfD5ists82aMgZIMQ/Y3LAZHlxXEmDrArXA2QA4Z3OJf6zxSghw==","shasum":"1587293426eadd201a8e12072a64305bcaa9ab14","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.6.0-beta.2.tgz","fileCount":32,"unpackedSize":316583,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwXasvCvciB0dyLrCFwqdtHz+wI1u8ePGqCS/5kfwy9wIgXK2JT76bUaovG7pm/5X2tSgNPrdaQPkPnP37gaVbWlw="}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.6.0-beta.2_1699731488757_0.5523781947567825"},"_hasShrinkwrap":false},"3.6.0":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.6.0","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","bin":{"compile":"dist/cli/compile.js"},"types":"dist/index.d.ts","scripts":{"rollup":"rollup -c"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.4","@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","rollup":"^3.29.4","rollup-plugin-dts":"^6.0.2","ts-node":"^10.9.1","tslib":"^2.6.2","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.6.0","gitHead":"b7d4926dc08a815428e5bf189391866393001d75","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-VbJaISLfr3ZHrAuj5INlScE0xE2P+n6Qi7Vor5MaeYzoWsA8cJwuZNNkiOQJth9c/jSAOALWS2Oxx6rS07XZwA==","shasum":"29ba0313fbcb73c03c50647a0af305c942ce87d8","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.6.0.tgz","fileCount":32,"unpackedSize":316682,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgx8GGkgt2eoOcYE+sBobawmvrwrA9T51lr1cSaTmKWQIhAMqDNEdlMaDQ9xm4BFWna7koBW6coxQy+q59noBxL/QU"}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.6.0_1699733145135_0.6951827103197727"},"_hasShrinkwrap":false},"3.7.0-beta.1":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.7.0-beta.1","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","bin":{"compile":"dist/cli/compile.js"},"types":"dist/index.d.ts","scripts":{"rollup":"rollup -c"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.4","@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","rollup":"^3.29.4","rollup-plugin-dts":"^6.0.2","ts-node":"^10.9.1","tslib":"^2.6.2","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.7.0-beta.1","readme":"# react-vario-theme\r\n\r\n![npm](https://img.shields.io/npm/v/react-vario-theme)\r\n\r\n**react-vario-theme** is a tool for managing themes in React applications. Easily convert a TypeScript theme object into CSS variables and seamlessly switch between multiple themes using the **ThemeVarioProvider** context.\r\n\r\n## Features\r\n\r\n- 💡 Easily define themes in a TypeScript object\r\n- 🌟 Singular Source of Truth\r\n- 🔄 Instant theme switching\r\n- 🎨 Access theme colors in react using ThemeProvider\r\n- 💫 Supports multiple themes\r\n- 🌈 Seamless Tailwind Integration by automatically generating all theme variables for Tailwind\r\n- 🤖 Built-in TypeScript support for strong typing\r\n\r\n## Usage\r\n\r\n### 1. Define your theme\r\n\r\nCreate a TypeScript object with your theme specifications. Colors will always be needed and can contain as many color schemes as you want. **Important:** To make sure that your theme will work as intended use it in its own file, for example theme.ts\r\n\r\n```typescript\r\nimport { ThemeType } from \"react-vario-theme\";\r\n\r\nexport const varoTheme = {\r\n  colors: {\r\n    light: {\r\n      primary: \"#007bff\",\r\n      accent: {\r\n        1: colorVariants({\r\n          color: colors.accent[1],\r\n          variants: { hover: -10, active: -10 },\r\n          additionalColors: { text: colors.text.light },\r\n        }),\r\n      },\r\n      text: {\r\n        default: \"#000000\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n    dark: {\r\n      text: {\r\n        default: \"#ffffff\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n  },\r\n  padding: {\r\n    sm: \"5px\",\r\n    md: \"10px\",\r\n    lg: \"20px\",\r\n  },\r\n} as const satisfies ThemeType;\r\n```\r\n\r\n### 2. Generate css variables\r\n\r\nnpx react-vario-theme compile \"path to your theme object\" \"path and name of the css/sass file you want to create\"\r\nWhen the css variables are generated they can be used in css or in react using the theme context provider.\r\n\r\n```\r\nCompile: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss\r\nWatch: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss --watch\r\n```\r\n\r\n### 3. Optional: Tailwind support\r\n\r\nYou can get all your theme css variables in tailwind using \"tailwindTheme\"\r\n\r\n```typescript\r\nimport { tailwindColors, tailwindTheme } from \"react-vario-theme\";\r\nimport { type Config } from \"tailwindcss\";\r\nimport { varoTheme } from \"./src/styles/theme\";\r\n\r\nexport default {\r\n  content: [\"./src/**/*.{js,ts,jsx,tsx}\"],\r\n  theme: tailwindTheme(varoTheme),\r\n  plugins: [],\r\n} satisfies Config;\r\n```\r\n\r\n### 3. Use `VarioThemeProvider`\r\n\r\nWrap your application with the `VarioThemeProvider`.\r\n\r\n```jsx\r\nimport { varoTheme } from \"~/styles/theme\";\r\nimport { VarioThemeProvider } from \"react-vario-theme\";\r\n\r\nconst App = () => {\r\n  return (\r\n    <VarioThemeProvider theme={varoTheme}>\r\n      <Component {...pageProps} />\r\n    </VarioThemeProvider>\r\n  );\r\n};\r\n```\r\n\r\n### 4. Access Theme Variables\r\n\r\nYou can now access theme variables anywhere within your components.\r\n\r\n```jsx\r\nimport { useVarioTheme } from \"react-vario-theme\";\r\nimport { varoTheme } from \"~/styles/theme\";\r\nconst MyComponent = () => {\r\n  const { theme, colorScheme, changeColorScheme } =\r\n    useVarioTheme<typeof varoTheme>();\r\n\r\n  return (\r\n    <button\r\n      style={{ backgroundColor: theme.colors.primary }}\r\n    >\r\n      Click Me\r\n    </button>\r\n  );\r\n};\r\n```\r\n\r\n## API\r\n\r\n### `VarioThemeProvider`\r\n\r\nProps:\r\n\r\n- `theme`: The theme object containing key-value pairs of CSS variables.\r\n\r\n### `useVarioTheme<T>()`\r\n\r\nReturns:\r\n\r\n- `theme, colorScheme, changeColorScheme`: An object containing the colors and variables of the theme, strongly typed with TypeScript when using `typeof`. All the variables will be equal to the css variable generated by react-vario-theme compile\r\n\r\n\r\n## UTIL Functions\r\nUtils to help create your theme object\r\n\r\n- [generateValues<Count>](#generatevaluescountvalue-multiplier-text-count)\r\n- [lighten](#lightenhex-percent)\r\n- [darken](#darkenhex-percent)\r\n- [colorVariants](#colorvariantsinput)\r\n- [brightnessVariants](#brightnessvariantscolor-variants)\r\n- [flatten](#flattenobj-prefix)\r\n- [flattenColors](#flattencolorsobj)\r\n- [rgbToHex](#rgbtohexr-g-b)\r\n- [hexToRgb](#hextorgbhex)\r\n- [generateColors](#generatecolorshex-count-reverse)\r\n\r\n---\r\n\r\n### `generateValues<Count>(value, multiplier, text, count)`\r\n\r\nThis function generates a dictionary (object) of values based on the specified `count`. It takes four parameters:\r\n\r\n- `value`: The initial value.\r\n- `multiplier`: A multiplier applied to each subsequent value.\r\n- `text`: A text suffix added to each value.\r\n- `count`: The number of values to generate.\r\n\r\nIt returns an object where keys are numbered from 1 to `count`, and values are calculated based on the formula `value * multiplier^index + text`.\r\n\r\n---\r\n\r\n### `lighten(hex, percent)`\r\n\r\nThis function lightens a given hex color by a specified percentage. It takes two parameters:\r\n\r\n- `hex`: The input hex color code (e.g., \"#RRGGBB\").\r\n- `percent`: The percentage by which to lighten the color.\r\n\r\nIt returns a new hex color code that is lighter by the specified percentage.\r\n\r\n---\r\n\r\n### `darken(hex, percent)`\r\n\r\nThis function darkens a given hex color by a specified percentage. It takes two parameters:\r\n\r\n- `hex`: The input hex color code (e.g., \"#RRGGBB\").\r\n- `percent`: The percentage by which to darken the color.\r\n\r\nIt returns a new hex color code that is darker by the specified percentage.\r\n\r\n---\r\n\r\n### `colorVariants(input)`\r\n\r\nThis function generates color variants based on a primary color. It takes an object `input` with the following properties:\r\n\r\n- `color`: The primary color.\r\n- `variants`: An object with keys representing variant names and values representing the percentage of lightening for each variant.\r\n- `additionalColors` (optional): An object with additional color names and their corresponding hex values.\r\n\r\nIt returns an object with color variants based on the primary color and additional colors if provided.\r\n\r\n---\r\n\r\n### `brightnessVariants(color, variants)`\r\n\r\nThis function generates brightness variants of a given color. It takes two parameters:\r\n\r\n- `color`: The input hex color code (e.g., \"#RRGGBB\").\r\n- `variants`: An object with keys representing variant names and values representing the percentage of lightening for each variant.\r\n\r\nIt returns an object with brightness variants of the input color.\r\n\r\n---\r\n\r\n### `flatten(obj, prefix)`\r\n\r\nThis function flattens a nested object into a flat object with keys formatted as `${prefix}-${nestedKey}`. It takes two parameters:\r\n\r\n- `obj`: The nested object to be flattened.\r\n- `prefix`: A prefix to prepend to the keys.\r\n\r\nIt returns a flat object with flattened keys.\r\n\r\n---\r\n\r\n### `flattenColors(obj)`\r\n\r\nThis is a specific use of the `flatten` function with the prefix \"color-\". It flattens an object with nested color definitions.\r\n\r\n---\r\n\r\n### `rgbToHex(r, g, b)`\r\n\r\nThis function converts RGB color values to a hex color code. It takes three parameters:\r\n\r\n- `r`: The red component (0-255).\r\n- `g`: The green component (0-255).\r\n- `b`: The blue component (0-255).\r\n\r\nIt returns a hex color code (e.g., \"#RRGGBB\").\r\n\r\n---\r\n\r\n### `hexToRgb(hex)`\r\n\r\nThis function converts a hex color code to RGB color values. It takes one parameter:\r\n\r\n- `hex`: The input hex color code (e.g., \"#RRGGBB\").\r\n\r\nIt returns an object with `r`, `g`, and `b` properties representing the RGB values.\r\n\r\n---\r\n\r\n### `generateColors(hex, count, reverse?)`\r\n\r\nThis function generates an array of hex color codes based on the specified `count`. It takes three parameters:\r\n\r\n- `hex`: The initial hex color code (e.g., \"#RRGGBB\").\r\n- `count`: The number of color codes to generate.\r\n- `reverse` (optional): A boolean flag to reverse the order of generated colors (default is `false`).\r\n\r\nIt returns an array of hex color codes, either in ascending or descending order, based on the provided parameters.\r\n","readmeFilename":"README.md","gitHead":"9f5627121eb6456cc20b8a9b2fffb6a5a7303331","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-c8JbAqllMsBG+kyl858QqQrJuDq0b0tC7hkU0E2JZZHZoctkwlIueKKmyIxb6L0g9GtauXvC2PBE69O4cdCY6w==","shasum":"6901d19a4433a960838864831653245f445b2365","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.7.0-beta.1.tgz","fileCount":32,"unpackedSize":317434,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDR3AbLXmBmCbUUzLa4z+caNGqRaGp5sm49CbXRw7siUQIhAMNLCvj7T0+zCJuhfVeh7xCjNNCObMliZGMVYK5F3rS2"}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.7.0-beta.1_1699737423890_0.7177442593110073"},"_hasShrinkwrap":false},"3.7.0-beta.2":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.7.0-beta.2","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","bin":{"compile":"dist/cli/compile.js"},"types":"dist/index.d.ts","scripts":{"rollup":"rollup -c"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.4","@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","rollup":"^3.29.4","rollup-plugin-dts":"^6.0.2","ts-node":"^10.9.1","tslib":"^2.6.2","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.7.0-beta.2","readme":"# react-vario-theme\r\n\r\n![npm](https://img.shields.io/npm/v/react-vario-theme)\r\n\r\n**react-vario-theme** is a tool for managing themes in React applications. Easily convert a TypeScript theme object into CSS variables and seamlessly switch between multiple themes using the **ThemeVarioProvider** context.\r\n\r\n## Features\r\n\r\n- 💡 Easily define themes in a TypeScript object\r\n- 🌟 Singular Source of Truth\r\n- 🔄 Instant theme switching\r\n- 🎨 Access theme colors in react using ThemeProvider\r\n- 💫 Supports multiple themes\r\n- 🌈 Seamless Tailwind Integration by automatically generating all theme variables for Tailwind\r\n- 🤖 Built-in TypeScript support for strong typing\r\n\r\n## Usage\r\n\r\n### 1. Define your theme\r\n\r\nCreate a TypeScript object with your theme specifications. Colors will always be needed and can contain as many color schemes as you want. **Important:** To make sure that your theme will work as intended use it in its own file, for example theme.ts\r\n\r\n```typescript\r\nimport { ThemeType } from \"react-vario-theme\";\r\n\r\nexport const varoTheme = {\r\n  colors: {\r\n    light: {\r\n      primary: \"#007bff\",\r\n      accent: {\r\n        1: colorVariants({\r\n          color: colors.accent[1],\r\n          variants: { hover: -10, active: -10 },\r\n          additionalColors: { text: colors.text.light },\r\n        }),\r\n      },\r\n      text: {\r\n        default: \"#000000\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n    dark: {\r\n      text: {\r\n        default: \"#ffffff\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n  },\r\n  padding: {\r\n    sm: \"5px\",\r\n    md: \"10px\",\r\n    lg: \"20px\",\r\n  },\r\n} as const satisfies ThemeType;\r\n```\r\n\r\n### 2. Generate css variables\r\n\r\nnpx react-vario-theme compile \"path to your theme object\" \"path and name of the css/sass file you want to create\"\r\nWhen the css variables are generated they can be used in css or in react using the theme context provider.\r\n\r\n```\r\nCompile: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss\r\nWatch: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss --watch\r\n```\r\n\r\n### 3. Optional: Tailwind support\r\n\r\nYou can get all your theme css variables in tailwind using \"tailwindTheme\"\r\n\r\n```typescript\r\nimport { tailwindColors, tailwindTheme } from \"react-vario-theme\";\r\nimport { type Config } from \"tailwindcss\";\r\nimport { varoTheme } from \"./src/styles/theme\";\r\n\r\nexport default {\r\n  content: [\"./src/**/*.{js,ts,jsx,tsx}\"],\r\n  theme: tailwindTheme(varoTheme),\r\n  plugins: [],\r\n} satisfies Config;\r\n```\r\n\r\n### 3. Use `VarioThemeProvider`\r\n\r\nWrap your application with the `VarioThemeProvider`.\r\n\r\n```jsx\r\nimport { varoTheme } from \"~/styles/theme\";\r\nimport { VarioThemeProvider } from \"react-vario-theme\";\r\n\r\nconst App = () => {\r\n  return (\r\n    <VarioThemeProvider theme={varoTheme}>\r\n      <Component {...pageProps} />\r\n    </VarioThemeProvider>\r\n  );\r\n};\r\n```\r\n\r\n### 4. Access Theme Variables\r\n\r\nYou can now access theme variables anywhere within your components.\r\n\r\n```jsx\r\nimport { useVarioTheme } from \"react-vario-theme\";\r\nimport { varoTheme } from \"~/styles/theme\";\r\nconst MyComponent = () => {\r\n  const { theme, colorScheme, changeColorScheme } =\r\n    useVarioTheme<typeof varoTheme>();\r\n\r\n  return (\r\n    <button\r\n      style={{ backgroundColor: theme.colors.primary }}\r\n    >\r\n      Click Me\r\n    </button>\r\n  );\r\n};\r\n```\r\n\r\n## API\r\n\r\n### `VarioThemeProvider`\r\n\r\nProps:\r\n\r\n- `theme`: The theme object containing key-value pairs of CSS variables.\r\n\r\n### `useVarioTheme<T>()`\r\n\r\nReturns:\r\n\r\n- `theme, colorScheme, changeColorScheme`: An object containing the colors and variables of the theme, strongly typed with TypeScript when using `typeof`. All the variables will be equal to the css variable generated by react-vario-theme compile\r\n\r\n\r\n## UTIL Functions\r\nUtils to help create your theme object\r\n\r\n- [generateValues<Count>](#generatevaluescountvalue-multiplier-text-count)\r\n- [lighten](#lightenhex-percent)\r\n- [darken](#darkenhex-percent)\r\n- [colorVariants](#colorvariantsinput)\r\n- [brightnessVariants](#brightnessvariantscolor-variants)\r\n- [flatten](#flattenobj-prefix)\r\n- [flattenColors](#flattencolorsobj)\r\n- [rgbToHex](#rgbtohexr-g-b)\r\n- [hexToRgb](#hextorgbhex)\r\n- [generateColors](#generatecolorshex-count-reverse)\r\n\r\n---\r\n\r\n### `generateValues<Count>(value, multiplier, text, count)`\r\n\r\nThis function generates a dictionary (object) of values based on the specified `count`. It takes four parameters:\r\n\r\n- `value`: The initial value.\r\n- `multiplier`: A multiplier applied to each subsequent value.\r\n- `text`: A text suffix added to each value.\r\n- `count`: The number of values to generate.\r\n\r\nIt returns an object where keys are numbered from 1 to `count`, and values are calculated based on the formula `value * multiplier^index + text`.\r\n\r\n---\r\n\r\n### `lighten(hex, percent)`\r\n\r\nThis function lightens a given hex color by a specified percentage. It takes two parameters:\r\n\r\n- `hex`: The input hex color code (e.g., \"#RRGGBB\").\r\n- `percent`: The percentage by which to lighten the color.\r\n\r\nIt returns a new hex color code that is lighter by the specified percentage.\r\n\r\n---\r\n\r\n### `darken(hex, percent)`\r\n\r\nThis function darkens a given hex color by a specified percentage. It takes two parameters:\r\n\r\n- `hex`: The input hex color code (e.g., \"#RRGGBB\").\r\n- `percent`: The percentage by which to darken the color.\r\n\r\nIt returns a new hex color code that is darker by the specified percentage.\r\n\r\n---\r\n\r\n### `colorVariants(input)`\r\n\r\nThis function generates color variants based on a primary color. It takes an object `input` with the following properties:\r\n\r\n- `color`: The primary color.\r\n- `variants`: An object with keys representing variant names and values representing the percentage of lightening for each variant.\r\n- `additionalColors` (optional): An object with additional color names and their corresponding hex values.\r\n\r\nIt returns an object with color variants based on the primary color and additional colors if provided.\r\n\r\n---\r\n\r\n### `brightnessVariants(color, variants)`\r\n\r\nThis function generates brightness variants of a given color. It takes two parameters:\r\n\r\n- `color`: The input hex color code (e.g., \"#RRGGBB\").\r\n- `variants`: An object with keys representing variant names and values representing the percentage of lightening for each variant.\r\n\r\nIt returns an object with brightness variants of the input color.\r\n\r\n---\r\n\r\n### `flatten(obj, prefix)`\r\n\r\nThis function flattens a nested object into a flat object with keys formatted as `${prefix}-${nestedKey}`. It takes two parameters:\r\n\r\n- `obj`: The nested object to be flattened.\r\n- `prefix`: A prefix to prepend to the keys.\r\n\r\nIt returns a flat object with flattened keys.\r\n\r\n---\r\n\r\n### `flattenColors(obj)`\r\n\r\nThis is a specific use of the `flatten` function with the prefix \"color-\". It flattens an object with nested color definitions.\r\n\r\n---\r\n\r\n### `rgbToHex(r, g, b)`\r\n\r\nThis function converts RGB color values to a hex color code. It takes three parameters:\r\n\r\n- `r`: The red component (0-255).\r\n- `g`: The green component (0-255).\r\n- `b`: The blue component (0-255).\r\n\r\nIt returns a hex color code (e.g., \"#RRGGBB\").\r\n\r\n---\r\n\r\n### `hexToRgb(hex)`\r\n\r\nThis function converts a hex color code to RGB color values. It takes one parameter:\r\n\r\n- `hex`: The input hex color code (e.g., \"#RRGGBB\").\r\n\r\nIt returns an object with `r`, `g`, and `b` properties representing the RGB values.\r\n\r\n---\r\n\r\n### `generateColors(hex, count, reverse?)`\r\n\r\nThis function generates an array of hex color codes based on the specified `count`. It takes three parameters:\r\n\r\n- `hex`: The initial hex color code (e.g., \"#RRGGBB\").\r\n- `count`: The number of color codes to generate.\r\n- `reverse` (optional): A boolean flag to reverse the order of generated colors (default is `false`).\r\n\r\nIt returns an array of hex color codes, either in ascending or descending order, based on the provided parameters.\r\n","readmeFilename":"README.md","gitHead":"0e4225758ef53ffe7e6b0a735f958c2925a41a79","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-LvJAlhGQsGEbCAHhbwm946r2nfL1xFzh9f2tO/rwR5Jo+SqAP2IdadGq7NEwkx8wGfdWDwLwnCcPHi97juXCuQ==","shasum":"c182120fd2ffefbf6a794dc054a8ffef9d30bddf","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.7.0-beta.2.tgz","fileCount":32,"unpackedSize":317450,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICZ5xRc6+tZnfj2Z1u6xGkSJIqTZQmp/lATOLGpXSTl4AiATPCRFRXk4ocPe38nTFd0gvUp0XM4rmdOnBF0gQ/wLWw=="}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.7.0-beta.2_1699737947577_0.9846287468133426"},"_hasShrinkwrap":false},"3.7.0":{"name":"react-vario-theme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"version":"3.7.0","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","bin":{"compile":"dist/cli/compile.js"},"types":"dist/index.d.ts","scripts":{"rollup":"rollup -c"},"author":{"name":"Nils Pettersson"},"license":"ISC","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.4","@types/node":"^20.6.0","@types/react":"^18.2.6","react":"18.2.0","rollup":"^3.29.4","rollup-plugin-dts":"^6.0.2","ts-node":"^10.9.1","tslib":"^2.6.2","typescript":"^5.2.2"},"dependencies":{"chokidar":"^3.5.3"},"_id":"react-vario-theme@3.7.0","gitHead":"e4381b345be9423e74789900b04389a5b1840b9f","bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"},"homepage":"https://github.com/nilspettersson/themeManager#readme","_nodeVersion":"20.5.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-7msRWl0mm2xZ24q0yL2d14kYBvjcMydCgAibEvSr3nIp9bYchwQtFVbmd37klIgOQP3ndKHoV2TnMbl+xXtL8Q==","shasum":"3deeeb16dfa3a25b79f554e328a2ce22c4b2443b","tarball":"https://registry.npmjs.org/react-vario-theme/-/react-vario-theme-3.7.0.tgz","fileCount":32,"unpackedSize":317443,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZUOYhRfdhhsG7su3yJTN/xMxOQA/YiA216nZbsVNK3AIhAL3TtReAfCFpHYr4gVeuEn5Zz3l+YFtTM/T5bF4mThoE"}]},"_npmUser":{"name":"nilspettersson","email":"nils-pettsson@outlook.com"},"directories":{},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vario-theme_3.7.0_1699738210715_0.6842406906566938"},"_hasShrinkwrap":false}},"time":{"created":"2023-09-20T17:48:53.451Z","0.1.0":"2023-09-20T17:48:53.622Z","modified":"2023-11-11T21:30:11.200Z","1.0.0":"2023-09-20T20:40:36.942Z","1.0.1":"2023-09-21T05:33:47.606Z","1.0.2":"2023-09-21T05:45:37.063Z","1.0.3":"2023-09-21T05:47:47.434Z","1.0.4":"2023-09-21T05:49:22.990Z","1.0.5":"2023-09-21T05:53:36.744Z","2.0.0":"2023-09-23T10:18:10.544Z","2.0.1":"2023-09-23T10:28:08.444Z","3.0.0-beta.0":"2023-09-24T07:52:05.058Z","3.0.0-beta.1":"2023-09-24T17:15:16.462Z","3.0.0":"2023-09-24T18:48:24.416Z","3.0.1":"2023-09-24T20:21:39.717Z","3.0.2":"2023-09-26T05:49:31.937Z","3.1.0-beta.1":"2023-09-28T17:23:28.065Z","3.1.0-beta.2":"2023-09-28T18:08:10.230Z","3.1.0-beta.3":"2023-09-28T18:15:37.124Z","3.1.0-beta.4":"2023-09-28T19:09:14.764Z","3.1.0-beta.5":"2023-09-28T19:10:54.784Z","3.1.0-beta.6":"2023-09-28T19:23:32.349Z","3.1.0-beta.7":"2023-09-28T19:27:39.051Z","3.1.0-beta.8":"2023-09-29T05:41:58.667Z","3.1.0-beta.9":"2023-09-29T05:48:54.453Z","3.1.0-beta.10":"2023-09-29T05:53:24.762Z","3.1.0-beta.11":"2023-09-30T11:13:46.559Z","3.1.0-beta.12":"2023-09-30T13:51:22.193Z","3.1.0-beta.13":"2023-09-30T14:26:58.780Z","3.1.0-beta.14":"2023-09-30T14:39:52.098Z","3.2.0":"2023-09-30T18:49:00.634Z","3.3.0":"2023-10-01T17:19:37.737Z","3.3.1":"2023-10-02T06:08:55.037Z","3.3.2":"2023-10-03T20:30:06.110Z","3.3.3":"2023-10-04T17:01:59.306Z","3.4.0":"2023-10-07T11:26:32.767Z","3.5.0":"2023-10-21T08:01:38.670Z","3.5.1":"2023-10-21T09:33:53.135Z","3.6.0-beta.1":"2023-11-11T12:13:39.704Z","3.6.0-beta.2":"2023-11-11T19:38:08.963Z","3.6.0":"2023-11-11T20:05:45.402Z","3.7.0-beta.1":"2023-11-11T21:17:04.278Z","3.7.0-beta.2":"2023-11-11T21:25:47.850Z","3.7.0":"2023-11-11T21:30:11.018Z"},"maintainers":[{"name":"nilspettersson","email":"nils-pettsson@outlook.com"}],"author":{"name":"Nils Pettersson"},"license":"ISC","readme":"# react-vario-theme\r\n\r\n![npm](https://img.shields.io/npm/v/react-vario-theme)\r\n\r\n**react-vario-theme** is a tool for managing themes in React applications. Easily convert a TypeScript theme object into CSS variables and seamlessly switch between multiple themes using the **ThemeVarioProvider** context.\r\n\r\n## Features\r\n\r\n- 💡 Easily define themes in a TypeScript object\r\n- 🌟 Singular Source of Truth\r\n- 🔄 Instant theme switching\r\n- 🎨 Access theme colors in react using ThemeProvider\r\n- 💫 Supports multiple themes\r\n- 🌈 Seamless Tailwind Integration by automatically generating all theme variables for Tailwind\r\n- 🤖 Built-in TypeScript support for strong typing\r\n\r\n## Usage\r\n\r\n### 1. Define your theme\r\n\r\nCreate a TypeScript object with your theme specifications. Colors will always be needed and can contain as many color schemes as you want. **Important:** To make sure that your theme will work as intended use it in its own file, for example theme.ts\r\n\r\n```typescript\r\nimport { ThemeType } from \"react-vario-theme\";\r\n\r\nexport const varoTheme = {\r\n  colors: {\r\n    light: {\r\n      primary: \"#007bff\",\r\n      accent: {\r\n        1: colorVariants({\r\n          color: colors.accent[1],\r\n          variants: { hover: -10, active: -10 },\r\n          additionalColors: { text: colors.text.light },\r\n        }),\r\n      },\r\n      text: {\r\n        default: \"#000000\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n    dark: {\r\n      text: {\r\n        default: \"#ffffff\",\r\n        link: \"#007bff\",\r\n      },\r\n    },\r\n  },\r\n  padding: {\r\n    sm: \"5px\",\r\n    md: \"10px\",\r\n    lg: \"20px\",\r\n  },\r\n} as const satisfies ThemeType;\r\n```\r\n\r\n### 2. Generate css variables\r\n\r\nnpx react-vario-theme compile \"path to your theme object\" \"path and name of the css/sass file you want to create\"\r\nWhen the css variables are generated they can be used in css or in react using the theme context provider.\r\n\r\n```\r\nCompile: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss\r\nWatch: npx react-vario-theme compile src/styles/theme.ts src/styles/theme.scss --watch\r\n```\r\n\r\n### 3. Optional: Tailwind support\r\n\r\nYou can get all your theme css variables in tailwind using \"tailwindTheme\"\r\n\r\n```typescript\r\nimport { tailwindColors, tailwindTheme } from \"react-vario-theme\";\r\nimport { type Config } from \"tailwindcss\";\r\nimport { varoTheme } from \"./src/styles/theme\";\r\n\r\nexport default {\r\n  content: [\"./src/**/*.{js,ts,jsx,tsx}\"],\r\n  theme: tailwindTheme(varoTheme),\r\n  plugins: [],\r\n} satisfies Config;\r\n```\r\n\r\n### 3. Use `VarioThemeProvider`\r\n\r\nWrap your application with the `VarioThemeProvider`.\r\n\r\n```jsx\r\nimport { varoTheme } from \"~/styles/theme\";\r\nimport { VarioThemeProvider } from \"react-vario-theme\";\r\n\r\nconst App = () => {\r\n  return (\r\n    <VarioThemeProvider theme={varoTheme}>\r\n      <Component {...pageProps} />\r\n    </VarioThemeProvider>\r\n  );\r\n};\r\n```\r\n\r\n### 4. Access Theme Variables\r\n\r\nYou can now access theme variables anywhere within your components.\r\n\r\n```jsx\r\nimport { useVarioTheme } from \"react-vario-theme\";\r\nimport { varoTheme } from \"~/styles/theme\";\r\nconst MyComponent = () => {\r\n  const { theme, colorScheme, changeColorScheme } =\r\n    useVarioTheme<typeof varoTheme>();\r\n\r\n  return (\r\n    <button\r\n      style={{ backgroundColor: theme.colors.primary }}\r\n    >\r\n      Click Me\r\n    </button>\r\n  );\r\n};\r\n```\r\n\r\n## API\r\n\r\n### `VarioThemeProvider`\r\n\r\nProps:\r\n\r\n- `theme`: The theme object containing key-value pairs of CSS variables.\r\n\r\n### `useVarioTheme<T>()`\r\n\r\nReturns:\r\n\r\n- `theme, colorScheme, changeColorScheme`: An object containing the colors and variables of the theme, strongly typed with TypeScript when using `typeof`. All the variables will be equal to the css variable generated by react-vario-theme compile\r\n\r\n\r\n## UTIL Functions\r\nUtils to help create your theme object\r\n\r\n- [generateValues<Count>](#generatevaluescountvalue-multiplier-text-count)\r\n- [lighten](#lightenhex-percent)\r\n- [darken](#darkenhex-percent)\r\n- [colorVariants](#colorvariantsinput)\r\n- [brightnessVariants](#brightnessvariantscolor-variants)\r\n- [flatten](#flattenobj-prefix)\r\n- [flattenColors](#flattencolorsobj)\r\n- [rgbToHex](#rgbtohexr-g-b)\r\n- [hexToRgb](#hextorgbhex)\r\n- [generateColors](#generatecolorshex-count-reverse)\r\n\r\n---\r\n\r\n### `generateValues<Count>(value, multiplier, text, count)`\r\n\r\nThis function generates a dictionary (object) of values based on the specified `count`. It takes four parameters:\r\n\r\n- `value`: The initial value.\r\n- `multiplier`: A multiplier applied to each subsequent value.\r\n- `text`: A text suffix added to each value.\r\n- `count`: The number of values to generate.\r\n\r\nIt returns an object where keys are numbered from 1 to `count`, and values are calculated based on the formula `value * multiplier^index + text`.\r\n\r\n---\r\n\r\n### `lighten(hex, percent)`\r\n\r\nThis function lightens a given hex color by a specified percentage. It takes two parameters:\r\n\r\n- `hex`: The input hex color code (e.g., \"#RRGGBB\").\r\n- `percent`: The percentage by which to lighten the color.\r\n\r\nIt returns a new hex color code that is lighter by the specified percentage.\r\n\r\n---\r\n\r\n### `darken(hex, percent)`\r\n\r\nThis function darkens a given hex color by a specified percentage. It takes two parameters:\r\n\r\n- `hex`: The input hex color code (e.g., \"#RRGGBB\").\r\n- `percent`: The percentage by which to darken the color.\r\n\r\nIt returns a new hex color code that is darker by the specified percentage.\r\n\r\n---\r\n\r\n### `colorVariants(input)`\r\n\r\nThis function generates color variants based on a primary color. It takes an object `input` with the following properties:\r\n\r\n- `color`: The primary color.\r\n- `variants`: An object with keys representing variant names and values representing the percentage of lightening for each variant.\r\n- `additionalColors` (optional): An object with additional color names and their corresponding hex values.\r\n\r\nIt returns an object with color variants based on the primary color and additional colors if provided.\r\n\r\n---\r\n\r\n### `brightnessVariants(color, variants)`\r\n\r\nThis function generates brightness variants of a given color. It takes two parameters:\r\n\r\n- `color`: The input hex color code (e.g., \"#RRGGBB\").\r\n- `variants`: An object with keys representing variant names and values representing the percentage of lightening for each variant.\r\n\r\nIt returns an object with brightness variants of the input color.\r\n\r\n---\r\n\r\n### `flatten(obj, prefix)`\r\n\r\nThis function flattens a nested object into a flat object with keys formatted as `${prefix}-${nestedKey}`. It takes two parameters:\r\n\r\n- `obj`: The nested object to be flattened.\r\n- `prefix`: A prefix to prepend to the keys.\r\n\r\nIt returns a flat object with flattened keys.\r\n\r\n---\r\n\r\n### `flattenColors(obj)`\r\n\r\nThis is a specific use of the `flatten` function with the prefix \"color-\". It flattens an object with nested color definitions.\r\n\r\n---\r\n\r\n### `rgbToHex(r, g, b)`\r\n\r\nThis function converts RGB color values to a hex color code. It takes three parameters:\r\n\r\n- `r`: The red component (0-255).\r\n- `g`: The green component (0-255).\r\n- `b`: The blue component (0-255).\r\n\r\nIt returns a hex color code (e.g., \"#RRGGBB\").\r\n\r\n---\r\n\r\n### `hexToRgb(hex)`\r\n\r\nThis function converts a hex color code to RGB color values. It takes one parameter:\r\n\r\n- `hex`: The input hex color code (e.g., \"#RRGGBB\").\r\n\r\nIt returns an object with `r`, `g`, and `b` properties representing the RGB values.\r\n\r\n---\r\n\r\n### `generateColors(hex, count, reverse?)`\r\n\r\nThis function generates an array of hex color codes based on the specified `count`. It takes three parameters:\r\n\r\n- `hex`: The initial hex color code (e.g., \"#RRGGBB\").\r\n- `count`: The number of color codes to generate.\r\n- `reverse` (optional): A boolean flag to reverse the order of generated colors (default is `false`).\r\n\r\nIt returns an array of hex color codes, either in ascending or descending order, based on the provided parameters.\r\n","readmeFilename":"README.md","description":"Versatile theming tool for React applications, effortlessly transforming TypeScript objects into CSS variables.","keywords":["React theming","CSS variables","TypeScript","dynamic","colors","theme","switching","context","provider"],"homepage":"https://github.com/nilspettersson/themeManager#readme","repository":{"type":"git","url":"git+https://github.com/nilspettersson/themeManager.git"},"bugs":{"url":"https://github.com/nilspettersson/themeManager/issues"}}