cyhip-dynamic-themes 0.1.5 → 0.2.0

package/README.md

@@ -5,6 +5,12 @@
 
 Implement dynamic color themes in your React apps with Tailwind CSS in a simple and practical way. This package also includes native support for dark mode.
 
+## Examples
+
+- **Vite + React-ts: [cyhip-dynamic-themes](https://cyhip-dynamic-themes.vercel.app/)**
+
+- **Nextjs + React-ts: [cyhip-dynamic-themes-nextjs-example](https://cyhip-dynamic-themes-nextjs-example.vercel.app/)** 
+
 ## Features
 
 -   **Dynamic Color Theming**: Allow your users to switch the color theme of your application in a simple and practical way.
@@ -12,6 +18,15 @@ Implement dynamic color themes in your React apps with Tailwind CSS in a simple
 
 Inspired by the excellent [article](https://evilmartians.com/chronicles/better-dynamic-themes-in-tailwind-with-oklch-color-magic) by Dan Kozlov and Travis Turner, this package uses the library provided by them which provides a series of features for handling colors and defining dynamic css variables. Take a look at:. [https://github.com/dkzlv/tw-dynamic-themes](https://github.com/dkzlv/tw-dynamic-themes)
 
+## How It Works?
+
+`cyhip-dynamic-themes` simplifies theme setup with a unique approach:
+
+- **Single Hue Input**: Define just the **Hue** value, and the package automatically generates all color variants across the spectrum.
+- **Automatic Color Variants**: Unlike traditional methods, there’s no need to set up each shade manually—simply select a hue, and the package takes care of the rest.
+
+- **Custom Hook for Dynamic Theme Switching**: Allow your users to switch themes dynamically with the `useColorTheme` hook.
+
 ## Installation
 
 To install the package, run:

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { version } from "./__version__";
-export { consistentChroma } from "./lib/tw-dynamic-themes/runtime";
+export { consistentChroma as getChroma } from "./lib/tw-dynamic-themes/runtime";
 export { dynamicTwClasses } from "./lib/tw-dynamic-themes/twPlugin";
 export { currentAccentValue, getThemeProperties } from "./src/theme-helpers";
-export { useColorTheme } from "./src/theme-hook";
+export { useTheme, updateTheme } from "./src/theme-hook";
+export { type ThemeConfig, type ThemeMode, type ThemeColor } from "./src/theme.config";
+export { ThemeProvider } from "./src/theme-provider";

package/dist/index.js

@@ -1,5 +1,6 @@
 export { version } from "./__version__";
-export { consistentChroma } from "./lib/tw-dynamic-themes/runtime";
+export { consistentChroma as getChroma } from "./lib/tw-dynamic-themes/runtime";
 export { dynamicTwClasses } from "./lib/tw-dynamic-themes/twPlugin";
 export { currentAccentValue, getThemeProperties } from "./src/theme-helpers";
-export { useColorTheme } from "./src/theme-hook";
+export { useTheme, updateTheme } from "./src/theme-hook";
+export { ThemeProvider } from "./src/theme-provider";

package/dist/lib/tw-dynamic-themes/runtime.d.ts

@@ -2,12 +2,10 @@
  * A map of CSS varable name to color
  */
 type SingleVariable = [string, string];
-export declare function getVariables({ baseName, hue, mode, }: {
+export declare function getVariables({ baseName, hue, chromaData, }: {
     baseName: string;
     hue: number;
-    mode?: "bright" | "consistent";
+    chromaData?: Record<number, number>;
 }): SingleVariable[];
-export declare function updateVariables(variables: SingleVariable[], el?: HTMLElement): void;
-export declare const highestChroma: (shadeIndex: number, hue: number) => string;
-export declare const consistentChroma: (i: number, hue: number, whitePalette?: boolean) => string;
+export declare const consistentChroma: (shadeIndex: number, hue: number, chromaData?: Record<number, number>) => string;
 export {};

package/dist/lib/tw-dynamic-themes/runtime.js

@@ -2,21 +2,14 @@ import { toGamut as _toGamut, converter, differenceEuclidean, } from "culori";
 import { makeVariable, shades } from "./common";
 var toGamut = _toGamut;
 export function getVariables(_a) {
-    var baseName = _a.baseName, hue = _a.hue, _b = _a.mode, mode = _b === void 0 ? "consistent" : _b;
-    var whitePalette = hue == -1;
-    var calculator = mode === "bright" ? highestChroma : consistentChroma;
-    return shades.map(function (shade, shadeIndex) { return [
+    var baseName = _a.baseName, hue = _a.hue, _b = _a.chromaData, chromaData = _b === void 0 ? chromaDataDefault : _b;
+    var variables = shades.map(function (shade, shadeIndex) { return [
         makeVariable({ name: baseName, shade: shade }),
-        calculator(shadeIndex, +hue, whitePalette),
+        consistentChroma(shadeIndex, hue, chromaData),
     ]; });
+    return variables;
 }
-export function updateVariables(variables, el) {
-    var target = el !== null && el !== void 0 ? el : document.documentElement;
-    for (var _i = 0, variables_1 = variables; _i < variables_1.length; _i++) {
-        var _a = variables_1[_i], varName = _a[0], value = _a[1];
-        target.style.setProperty(varName, value + "");
-    }
-}
+;
 var lightnessForShade = function (shade) {
     var highestL = 100;
     var lowestL = 13;
@@ -27,46 +20,27 @@ var lightnessForShade = function (shade) {
     return (lowestL + (highestL - diffL * multiplier)) / 100;
 };
 var lightness = shades.map(lightnessForShade);
-export var highestChroma = function (shadeIndex, hue) {
-    var oklch = converter("oklch");
-    // Setting an obsurdly high chroma
-    var color = "oklch(".concat(lightness[shadeIndex], " 0.4 ").concat(hue, ")");
-    // Clamping it to the highest chroma possible
-    return serializeColor(oklch(toGamut("p3", "oklch", differenceEuclidean("oklch"), 0)(color)));
-};
-export var consistentChroma = function (i, hue, whitePalette) {
-    if (whitePalette === void 0) { whitePalette = false; }
+export var consistentChroma = function (shadeIndex, hue, chromaData) {
+    if (chromaData === void 0) { chromaData = chromaDataDefault; }
     var oklch = converter("oklch");
+    var asWhite = hue === -1;
     // Using a pinned chroma
-    var chroma = whitePalette ? chromaData[i] * 0.00001 : chromaData[i];
-    var light = whitePalette ? lightness[i] * 1.0 : lightness[i] * 0.95;
-    var color = "oklch(".concat(light, " ").concat(chroma, " ").concat(hue, ")");
+    var chroma = !asWhite ? chromaData[shadeIndex] : 0.0;
+    var light = !asWhite ? lightness[shadeIndex] * 0.95 : lightness[shadeIndex];
+    var color = "oklch(".concat(light, " ").concat(chroma, " ").concat(+hue, ")");
     return serializeColor(oklch(toGamut("p3", "oklch", differenceEuclidean("oklch"), 0)(color)));
 };
-// const chromaData: Record<number, number> = {
-//     0: 0.0108,
-//     1: 0.0321,
-//     2: 0.0609,
-//     3: 0.0908,
-//     4: 0.1398,
-//     5: 0.1472,
-//     6: 0.1299,
-//     7: 0.1067,
-//     8: 0.0898,
-//     9: 0.0726,
-//     10: 0.054,
-// };
-var chromaData = {
-    0: 0.0114,
-    1: 0.0331,
-    2: 0.0774,
-    3: 0.1275,
-    4: 0.1547,
-    5: 0.1355,
-    6: 0.1164,
-    7: 0.0974,
-    8: 0.0782,
-    9: 0.0588,
-    10: 0.0491,
-};
 var serializeColor = function (c) { var _a; return "".concat(c.l.toFixed(3), " ").concat(c.c.toFixed(3), " ").concat((_a = c.h) === null || _a === void 0 ? void 0 : _a.toFixed(3)); };
+var chromaDataDefault = {
+    0: 0.0108,
+    1: 0.0121,
+    2: 0.0609,
+    3: 0.0908,
+    4: 0.1398,
+    5: 0.1472,
+    6: 0.1299,
+    7: 0.1067,
+    8: 0.0898,
+    9: 0.0726,
+    10: 0.005,
+};

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "cyhip-dynamic-themes",
-    "version": "0.1.5",
+    "version": "0.2.0",
     "description": "Tailwind-powered dynamic color themes for React apps.",
     "author": "@KassioRF, @CyberHippie-io",
     "license": "MIT",
@@ -64,7 +64,8 @@
         "culori": "^4.0.1",
         "inquirer": "^12.0.0",
         "react": "^18",
-        "react-dom": "^18"
+        "react-dom": "^18",
+        "zustand": "^5.0.1"
     },
     "peerDependencies": {
         "react": "^18",

package/dist/src/_templates/root-css.d.ts

@@ -1,2 +1,2 @@
-declare const rootCss = "\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n/* \n * This is how your global.css or index.css should look like. \n *\n * To see how to apply this variables declared here on tailwind\n * check ./theme-colors.ts properties examples.\n * \n */\n\n@layer base {\n    :root {\n        /* oklch vars - Applied by dynamic accent colors */\n        --background: oklch(var(--accent-100));\n        --foreground: oklch(var(--accent-900));\n        --primary: oklch(var(--accent-500));\n        --primary-foreground: oklch(var(--accent-50));\n        --secondary: oklch(var(--accent-800));\n        --secondary-foreground: oklch(var(--accent-200));\n        --ring: oklch(var(--accent-500));\n        --box-shadow: oklch(var(--accent-800) / 0.15);\n        --border: oklch(var(--accent-900) / 0.2);\n        /* hsl vars */\n        --muted: hsl(240 4.8% 95.9%);\n        --muted-foreground: hsl(240 3.8% 45%);\n        --input: hsl(240 5.9% 80%);\n    }\n    * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n        @apply outline-accent-500 dark:outline-accent-400;\n    }\n    *,\n    :after,\n    :before {\n        border-color: theme(\"colors.border\");\n    }\n}\n\n.dark {\n    /* oklch vars - Applied by dynamic accent colors */\n    --background: oklch(var(--accent-900));\n    --foreground: oklch(var(--accent-100));\n    --primary: oklch(var(--accent-500));\n    --primary-foreground: oklch(var(--accent-50));\n    --box-shadow: oklch(var(--accent-100) / 0.15);\n    --border: oklch(var(--accent-100) / 0.4);\n\n    /* hsl vars */\n    --muted: hsl(240 4.8% 30%);\n    --muted-foreground: hsl(240 3.8% 70%);\n}\n\nbody {\n    background-color: var(--background);\n    color: var(--foreground);\n}\n";
+declare const rootCss = "\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n/* \n * This is how your global.css or index.css should look like. \n *\n * To see how to apply this variables declared here on tailwind\n * check ./theme-colors.ts properties examples.\n * \n */\n\n@layer base {\n    :root {\n        /* oklch vars - Applied by dynamic accent colors */\n        --background: var(--accent-50);\n        --foreground: var(--accent-900);\n        --primary: var(--accent-500);\n        --primary-foreground: var(--accent-50);\n        --secondary: var(--accent-200);\n        --secondary-foreground: var(--accent-900);\n        --ring: oklch(var(--accent-500) / 0.2);\n        --box-shadow: oklch(var(--accent-800) / 0.15);\n        --border: oklch(var(--accent-950) / 0.2);\n        /* hsl vars */\n        --muted: hsl(240 4.8% 95.9% / 0.6);\n        --muted-foreground: hsl(240 3.8% 65%);\n        --input: hsl(240 5.9% 90% / 0.5);\n    }\n    * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n        @apply outline-accent-500 dark:outline-accent-400;\n    }\n    *,\n    :after,\n    :before {\n        border-color: theme('colors.border');\n    }\n}\n\n.dark {\n    /* oklch vars - Applied by dynamic accent colors */\n    --background: var(--accent-950);\n    --foreground: var(--accent-100);\n    --primary: var(--accent-500);\n    --primary-foreground: var(--accent-50);\n    --secondary: var(--accent-800);\n    --secondary-foreground: var(--accent-200);\n    --box-shadow: oklch(var(--accent-100) / 0.1);\n    --border: oklch(var(--accent-100) / 0.25);\n\n    /* hsl vars */\n    --muted: hsl(240 4.8% 25% / 0.7);\n    --muted-foreground: hsl(240 3.8% 70%);\n    --input: hsl(240 5.9% 80% / 0.8);\n}\n\nbody {\n    @apply bg-background dark:bg-background;\n    @apply text-foreground;\n    overflow-x: hidden;\n}\n\n";
 export default rootCss;

package/dist/src/_templates/root-css.js

@@ -1,2 +1,2 @@
-var rootCss = "\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n/* \n * This is how your global.css or index.css should look like. \n *\n * To see how to apply this variables declared here on tailwind\n * check ./theme-colors.ts properties examples.\n * \n */\n\n@layer base {\n    :root {\n        /* oklch vars - Applied by dynamic accent colors */\n        --background: oklch(var(--accent-100));\n        --foreground: oklch(var(--accent-900));\n        --primary: oklch(var(--accent-500));\n        --primary-foreground: oklch(var(--accent-50));\n        --secondary: oklch(var(--accent-800));\n        --secondary-foreground: oklch(var(--accent-200));\n        --ring: oklch(var(--accent-500));\n        --box-shadow: oklch(var(--accent-800) / 0.15);\n        --border: oklch(var(--accent-900) / 0.2);\n        /* hsl vars */\n        --muted: hsl(240 4.8% 95.9%);\n        --muted-foreground: hsl(240 3.8% 45%);\n        --input: hsl(240 5.9% 80%);\n    }\n    * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n        @apply outline-accent-500 dark:outline-accent-400;\n    }\n    *,\n    :after,\n    :before {\n        border-color: theme(\"colors.border\");\n    }\n}\n\n.dark {\n    /* oklch vars - Applied by dynamic accent colors */\n    --background: oklch(var(--accent-900));\n    --foreground: oklch(var(--accent-100));\n    --primary: oklch(var(--accent-500));\n    --primary-foreground: oklch(var(--accent-50));\n    --box-shadow: oklch(var(--accent-100) / 0.15);\n    --border: oklch(var(--accent-100) / 0.4);\n\n    /* hsl vars */\n    --muted: hsl(240 4.8% 30%);\n    --muted-foreground: hsl(240 3.8% 70%);\n}\n\nbody {\n    background-color: var(--background);\n    color: var(--foreground);\n}\n";
+var rootCss = "\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n/* \n * This is how your global.css or index.css should look like. \n *\n * To see how to apply this variables declared here on tailwind\n * check ./theme-colors.ts properties examples.\n * \n */\n\n@layer base {\n    :root {\n        /* oklch vars - Applied by dynamic accent colors */\n        --background: var(--accent-50);\n        --foreground: var(--accent-900);\n        --primary: var(--accent-500);\n        --primary-foreground: var(--accent-50);\n        --secondary: var(--accent-200);\n        --secondary-foreground: var(--accent-900);\n        --ring: oklch(var(--accent-500) / 0.2);\n        --box-shadow: oklch(var(--accent-800) / 0.15);\n        --border: oklch(var(--accent-950) / 0.2);\n        /* hsl vars */\n        --muted: hsl(240 4.8% 95.9% / 0.6);\n        --muted-foreground: hsl(240 3.8% 65%);\n        --input: hsl(240 5.9% 90% / 0.5);\n    }\n    * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n        @apply outline-accent-500 dark:outline-accent-400;\n    }\n    *,\n    :after,\n    :before {\n        border-color: theme('colors.border');\n    }\n}\n\n.dark {\n    /* oklch vars - Applied by dynamic accent colors */\n    --background: var(--accent-950);\n    --foreground: var(--accent-100);\n    --primary: var(--accent-500);\n    --primary-foreground: var(--accent-50);\n    --secondary: var(--accent-800);\n    --secondary-foreground: var(--accent-200);\n    --box-shadow: oklch(var(--accent-100) / 0.1);\n    --border: oklch(var(--accent-100) / 0.25);\n\n    /* hsl vars */\n    --muted: hsl(240 4.8% 25% / 0.7);\n    --muted-foreground: hsl(240 3.8% 70%);\n    --input: hsl(240 5.9% 80% / 0.8);\n}\n\nbody {\n    @apply bg-background dark:bg-background;\n    @apply text-foreground;\n    overflow-x: hidden;\n}\n\n";
 export default rootCss;

package/dist/src/_templates/theme-colors.d.ts

@@ -1,2 +1,2 @@
-declare const themeColors = "\n\n/**\n * COLORS\n * \n * You can use this on tailwindcss.config.ts as follows:\n * \n *   import type { Config } from \"tailwindcss\";\n *   import { themeColors } from \"./src/themes/theme-colors\";\n *\n *   export default {\n *       content: [\"./index.html\", \".\\src\\**\\*.{js,ts,jsx,tsx}\"],\n *       darkMode: \"class\",\n *       theme: {\n *           extend: {\n *               colors: themeColors,\n *           },\n *       },\n *       plugins: [],\n *   } satisfies Config;\n *\n * \n */\n\nimport colors from \"tailwindcss/colors\";\nimport { dynamicTwClasses } from \"cyhip-dynamic-themes\";\n\nexport const themeColors = {\n    // accent vars to allow dynamic color changes\n    accent: dynamicTwClasses(\"accent\", 250),\n    // static colors as you wish...\n    white: colors.white,\n    destructive: colors.red,\n    success: colors.green,\n    /**\n     * You can customize this css vars based on accent values.\n     * Take a look at root.css\n     */\n    background: \"var(--background)\",\n    foreground: \"var(--foreground)\",\n    primary: {\n        DEFAULT: \"var(--primary)\",\n        foreground: \"var(--primary-foreground)\",\n    },\n    secondary: {\n        DEFAULT: \"var(--secondary)\",\n        foreground: \"var(--foreground)\",\n    },\n    muted: {\n        DEFAULT: \"var(--muted)\",\n        foreground: \"var(--muted-foreground)\",\n    },\n    border: \"var(--border)\",\n    ring: \"var(--ring)\",\n    input: \"var(--input)\",\n};";
+declare const themeColors = "\n\n/**\n * COLORS\n *\n * You can use this on tailwindcss.config.ts as follows:\n *\n *   import type { Config } from \"tailwindcss\";\n *   import { themeColors } from \"./src/themes/theme-colors\";\n *\n *   export default {\n *       content: [\"./index.html\", \".src***.{js,ts,jsx,tsx}\"],\n *       darkMode: \"class\",\n *       theme: {\n *           extend: {\n *               colors: themeColors,\n *           },\n *       },\n *       plugins: [],\n *   } satisfies Config;\n *\n *\n */\n\nimport { dynamicTwClasses } from 'cyhip-dynamic-themes';\nimport colors from 'tailwindcss/colors';\nimport { hueScheme } from './theme.config';\n\nexport const themeColors = {\n    // accent vars to allow dynamic color changes\n    accent: dynamicTwClasses('accent', hueScheme.default),\n    // static colors as you wish...\n    white: colors.white,\n    destructive: colors.red,\n    success: colors.green,\n    /**\n     * You can customize this css vars based on accent values.\n     * Take a look at root.css\n     */\n    background: 'oklch(var(--background) / <alpha-value>)',\n\n    foreground: 'oklch(var(--foreground) / <alpha-value>)',\n    primary: {\n        DEFAULT: 'oklch(var(--primary) / <alpha-value>)',\n        foreground: 'oklch(var(--primary-foreground) / <alpha-value>)',\n    },\n    secondary: {\n        DEFAULT: 'oklch(var(--secondary) / <alpha-value>)',\n        foreground: 'oklch(var(--secondary-foreground) / <alpha-value>)',\n    },\n    muted: {\n        DEFAULT: 'var(--muted)',\n        foreground: 'var(--muted-foreground)',\n    },\n    border: 'var(--border)',\n    ring: 'var(--ring)',\n    input: 'var(--input)',\n};\n\n";
 export default themeColors;

package/dist/src/_templates/theme-colors.js

@@ -1,2 +1,2 @@
-var themeColors = "\n\n/**\n * COLORS\n * \n * You can use this on tailwindcss.config.ts as follows:\n * \n *   import type { Config } from \"tailwindcss\";\n *   import { themeColors } from \"./src/themes/theme-colors\";\n *\n *   export default {\n *       content: [\"./index.html\", \".\\src\\**\\*.{js,ts,jsx,tsx}\"],\n *       darkMode: \"class\",\n *       theme: {\n *           extend: {\n *               colors: themeColors,\n *           },\n *       },\n *       plugins: [],\n *   } satisfies Config;\n *\n * \n */\n\nimport colors from \"tailwindcss/colors\";\nimport { dynamicTwClasses } from \"cyhip-dynamic-themes\";\n\nexport const themeColors = {\n    // accent vars to allow dynamic color changes\n    accent: dynamicTwClasses(\"accent\", 250),\n    // static colors as you wish...\n    white: colors.white,\n    destructive: colors.red,\n    success: colors.green,\n    /**\n     * You can customize this css vars based on accent values.\n     * Take a look at root.css\n     */\n    background: \"var(--background)\",\n    foreground: \"var(--foreground)\",\n    primary: {\n        DEFAULT: \"var(--primary)\",\n        foreground: \"var(--primary-foreground)\",\n    },\n    secondary: {\n        DEFAULT: \"var(--secondary)\",\n        foreground: \"var(--foreground)\",\n    },\n    muted: {\n        DEFAULT: \"var(--muted)\",\n        foreground: \"var(--muted-foreground)\",\n    },\n    border: \"var(--border)\",\n    ring: \"var(--ring)\",\n    input: \"var(--input)\",\n};";
+var themeColors = "\n\n/**\n * COLORS\n *\n * You can use this on tailwindcss.config.ts as follows:\n *\n *   import type { Config } from \"tailwindcss\";\n *   import { themeColors } from \"./src/themes/theme-colors\";\n *\n *   export default {\n *       content: [\"./index.html\", \".src***.{js,ts,jsx,tsx}\"],\n *       darkMode: \"class\",\n *       theme: {\n *           extend: {\n *               colors: themeColors,\n *           },\n *       },\n *       plugins: [],\n *   } satisfies Config;\n *\n *\n */\n\nimport { dynamicTwClasses } from 'cyhip-dynamic-themes';\nimport colors from 'tailwindcss/colors';\nimport { hueScheme } from './theme.config';\n\nexport const themeColors = {\n    // accent vars to allow dynamic color changes\n    accent: dynamicTwClasses('accent', hueScheme.default),\n    // static colors as you wish...\n    white: colors.white,\n    destructive: colors.red,\n    success: colors.green,\n    /**\n     * You can customize this css vars based on accent values.\n     * Take a look at root.css\n     */\n    background: 'oklch(var(--background) / <alpha-value>)',\n\n    foreground: 'oklch(var(--foreground) / <alpha-value>)',\n    primary: {\n        DEFAULT: 'oklch(var(--primary) / <alpha-value>)',\n        foreground: 'oklch(var(--primary-foreground) / <alpha-value>)',\n    },\n    secondary: {\n        DEFAULT: 'oklch(var(--secondary) / <alpha-value>)',\n        foreground: 'oklch(var(--secondary-foreground) / <alpha-value>)',\n    },\n    muted: {\n        DEFAULT: 'var(--muted)',\n        foreground: 'var(--muted-foreground)',\n    },\n    border: 'var(--border)',\n    ring: 'var(--ring)',\n    input: 'var(--input)',\n};\n\n";
 export default themeColors;

package/dist/src/_templates/theme-switcher.d.ts

@@ -1,2 +1,2 @@
-declare const themeSwitcher = "\n// \"use client\"; // enable this if you are using Nextjs\n/**\n * ThemeSwitcher component\n *\n * A simlpe example about how you can define a ThemeSwitcher component.\n *\n */\n\nimport { consistentChroma, useColorTheme } from \"cyhip-dynamic-themes\";\nimport { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { hueScheme } from \"./hue-palettes\";\n\n/**\n * This methods are used only to build a gradient sample based on the hue value.\n * Used for a visual referrence as a \"icon\" of the theme on the buttons.\n */\nconst buildThemeSample = (hue: number, whitePalette: boolean = false) => {\n    const oklchA = 'oklch(' + consistentChroma(4, +hue, whitePalette) + ')';\n    const oklchB = 'oklch(' + consistentChroma(5, +hue, whitePalette) + ')';\n    const oklchC = 'oklch(' + consistentChroma(6, +hue, whitePalette) + ')';\n    const gradient = 'linear-gradient(70deg, ' + oklchA + ', ' + oklchB + ', ' + oklchC + ')';\n    return gradient;\n};\n\nconst availableThemes: Record<string, string> = Object.keys(hueScheme).reduce(\n    (acc, key) => {\n        const value = hueScheme[key];\n        acc[key] = buildThemeSample(value, value === -1);\n        return acc;\n    },\n    {} as Record<string, string>\n);\n\nconst ThemeSwitcher = forwardRef<\n    HTMLDivElement,\n    HTMLAttributes<HTMLDivElement>\n>(({ ...props }, ref) => {\n    /** To initialize here you can manage cookie values to reminder user preferences. */\n    const [isMounted, setIsMounted] = useState(false);\n\n    const [darkMode, setDarkMode] = useState(false);\n    const [hue, setHue] = useState(hueScheme.blue);\n    const { setTheme } = useColorTheme(hue, darkMode);\n\n    useEffect(() => {\n        if (!isMounted) return;\n        setTheme(hue, darkMode);\n    }, [hue, darkMode, setTheme, isMounted]);\n\n    useEffect(() => {\n        setIsMounted(true);\n    }, []);\n\n    return (\n        <>\n            <div\n                ref={ref}\n                className=\"bg-accent-200/40 dark:bg-accent-700/40 grid grid-cols-3 rounded-sm gap-2 p-6\"\n                {...props}\n            >\n                {Object.keys(availableThemes).map((key) => (\n                    <button\n                        key={key}\n                        className=\"bg-background px-4 py-1 text-sm font-medium rounded-ms border flex space-x-2 hover:ring-1 hover:ring-offset-2 hover:ring-offset-background hover:ring-primary\"\n                        onClick={() => setHue(hueScheme[key])}\n                    >\n                        <span\n                            className=\"w-4 h-4 rounded-full\"\n                            style={{\n                                background: availableThemes[key],\n                            }}\n                        ></span>\n                        <span>{key}</span>\n                    </button>\n                ))}\n                <div className=\"col-span-3 grid grid-cols-2 gap-x-2 mx-auto\">\n                    <button\n                        className=\"bg-background border px-4 py-1 text-sm font-medium rounded-ms hover:ring-1 hover:ring-offset-2 hover:ring-offset-background hover:ring-primary\"\n                        onClick={() => setDarkMode(false)}\n                    >\n                        Light\n                    </button>\n                    <button\n                        className=\"bg-background border px-4 py-1 text-sm font-medium rounded-ms hover:ring-1 hover:ring-offset-2 hover:ring-offset-background hover:ring-primary\"\n                        onClick={() => setDarkMode(true)}\n                    >\n                        Dark\n                    </button>\n                </div>\n            </div>\n        </>\n    );\n});\n\nThemeSwitcher.displayName = \"ThemeSwitcher\";\n\nexport { ThemeSwitcher };\n\n";
+declare const themeSwitcher = "\n// \"use client\"; // enable this if you are using Nextjs\n/**\n * ThemeSwitcher component\n *\n * A simlpe example about how you can define a ThemeSwitcher component.\n *\n */\n\nimport { getChroma, ThemeConfig, useTheme } from 'cyhip-dynamic-themes';\nimport { forwardRef, HTMLAttributes, useEffect, useState } from 'react';\nimport { chromaData, hueScheme } from './theme.config';\n\n/**\n * This methods are used only to build a gradient sample based on the hue value.\n * Used for a visual referrence as a \"icon\" of the theme on the buttons.\n */\nconst buildThemeSample = (hue: number) => {\n    const oklch = 'oklch(' + getChroma(5, hue, chromaData) + ')';\n    return oklch;\n};\n\nconst availableThemes: Record<string, string> = Object.keys(hueScheme).reduce(\n    (acc, key) => {\n        const value = hueScheme[key];\n        acc[key] = buildThemeSample(value);\n        return acc;\n    },\n    {} as Record<string, string>\n);\n\nconst ThemeSwitcher = forwardRef<\n    HTMLDivElement,\n    HTMLAttributes<HTMLDivElement>\n>(({ ...props }, ref) => {\n    /** To initialize here you can manage cookie values to reminder user preferences. */\n    const { theme, setTheme } = useTheme();\n    const [hue, setHue] = useState(theme.hue);\n    const [darkMode, setDarkMode] = useState(theme.mode === 'light');\n\n    useEffect(() => {\n        setTheme({\n            hue,\n            mode: darkMode ? 'dark' : 'light',\n            chromaData: chromaData,\n        } as ThemeConfig);\n    }, [hue, darkMode, setTheme]);\n\n    return (\n        <>\n            <div\n                ref={ref}\n                className=\"bg-accent-200/40 dark:bg-accent-700/40 grid grid-cols-3 rounded-sm gap-2 p-6\"\n                {...props}\n            >\n                {Object.keys(availableThemes).map((key) => (\n                    <button\n                        key={key}\n                        className=\"bg-background px-4 py-1 text-sm font-medium rounded-ms border flex space-x-2 hover:ring-1 hover:ring-offset-2 hover:ring-offset-background hover:ring-primary\"\n                        onClick={() => setHue(hueScheme[key])}\n                    >\n                        <span\n                            className=\"w-4 h-4 rounded-full\"\n                            style={{\n                                background: availableThemes[key],\n                            }}\n                        ></span>\n                        <span>{key}</span>\n                    </button>\n                ))}\n                <div className=\"col-span-3 grid grid-cols-2 gap-x-2 mx-auto\">\n                    <button\n                        className=\"bg-background border px-4 py-1 text-sm font-medium rounded-ms hover:ring-1 hover:ring-offset-2 hover:ring-offset-background hover:ring-primary\"\n                        onClick={() => setDarkMode(false)}\n                    >\n                        Light\n                    </button>\n                    <button\n                        className=\"bg-background border px-4 py-1 text-sm font-medium rounded-ms hover:ring-1 hover:ring-offset-2 hover:ring-offset-background hover:ring-primary\"\n                        onClick={() => setDarkMode(true)}\n                    >\n                        Dark\n                    </button>\n                </div>\n            </div>\n        </>\n    );\n});\n\nThemeSwitcher.displayName = 'ThemeSwitcher';\n\nexport { ThemeSwitcher };\n\n\n";
 export default themeSwitcher;

package/dist/src/_templates/theme-switcher.js

@@ -1,2 +1,2 @@
-var themeSwitcher = "\n// \"use client\"; // enable this if you are using Nextjs\n/**\n * ThemeSwitcher component\n *\n * A simlpe example about how you can define a ThemeSwitcher component.\n *\n */\n\nimport { consistentChroma, useColorTheme } from \"cyhip-dynamic-themes\";\nimport { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { hueScheme } from \"./hue-palettes\";\n\n/**\n * This methods are used only to build a gradient sample based on the hue value.\n * Used for a visual referrence as a \"icon\" of the theme on the buttons.\n */\nconst buildThemeSample = (hue: number, whitePalette: boolean = false) => {\n    const oklchA = 'oklch(' + consistentChroma(4, +hue, whitePalette) + ')';\n    const oklchB = 'oklch(' + consistentChroma(5, +hue, whitePalette) + ')';\n    const oklchC = 'oklch(' + consistentChroma(6, +hue, whitePalette) + ')';\n    const gradient = 'linear-gradient(70deg, ' + oklchA + ', ' + oklchB + ', ' + oklchC + ')';\n    return gradient;\n};\n\nconst availableThemes: Record<string, string> = Object.keys(hueScheme).reduce(\n    (acc, key) => {\n        const value = hueScheme[key];\n        acc[key] = buildThemeSample(value, value === -1);\n        return acc;\n    },\n    {} as Record<string, string>\n);\n\nconst ThemeSwitcher = forwardRef<\n    HTMLDivElement,\n    HTMLAttributes<HTMLDivElement>\n>(({ ...props }, ref) => {\n    /** To initialize here you can manage cookie values to reminder user preferences. */\n    const [isMounted, setIsMounted] = useState(false);\n\n    const [darkMode, setDarkMode] = useState(false);\n    const [hue, setHue] = useState(hueScheme.blue);\n    const { setTheme } = useColorTheme(hue, darkMode);\n\n    useEffect(() => {\n        if (!isMounted) return;\n        setTheme(hue, darkMode);\n    }, [hue, darkMode, setTheme, isMounted]);\n\n    useEffect(() => {\n        setIsMounted(true);\n    }, []);\n\n    return (\n        <>\n            <div\n                ref={ref}\n                className=\"bg-accent-200/40 dark:bg-accent-700/40 grid grid-cols-3 rounded-sm gap-2 p-6\"\n                {...props}\n            >\n                {Object.keys(availableThemes).map((key) => (\n                    <button\n                        key={key}\n                        className=\"bg-background px-4 py-1 text-sm font-medium rounded-ms border flex space-x-2 hover:ring-1 hover:ring-offset-2 hover:ring-offset-background hover:ring-primary\"\n                        onClick={() => setHue(hueScheme[key])}\n                    >\n                        <span\n                            className=\"w-4 h-4 rounded-full\"\n                            style={{\n                                background: availableThemes[key],\n                            }}\n                        ></span>\n                        <span>{key}</span>\n                    </button>\n                ))}\n                <div className=\"col-span-3 grid grid-cols-2 gap-x-2 mx-auto\">\n                    <button\n                        className=\"bg-background border px-4 py-1 text-sm font-medium rounded-ms hover:ring-1 hover:ring-offset-2 hover:ring-offset-background hover:ring-primary\"\n                        onClick={() => setDarkMode(false)}\n                    >\n                        Light\n                    </button>\n                    <button\n                        className=\"bg-background border px-4 py-1 text-sm font-medium rounded-ms hover:ring-1 hover:ring-offset-2 hover:ring-offset-background hover:ring-primary\"\n                        onClick={() => setDarkMode(true)}\n                    >\n                        Dark\n                    </button>\n                </div>\n            </div>\n        </>\n    );\n});\n\nThemeSwitcher.displayName = \"ThemeSwitcher\";\n\nexport { ThemeSwitcher };\n\n";
+var themeSwitcher = "\n// \"use client\"; // enable this if you are using Nextjs\n/**\n * ThemeSwitcher component\n *\n * A simlpe example about how you can define a ThemeSwitcher component.\n *\n */\n\nimport { getChroma, ThemeConfig, useTheme } from 'cyhip-dynamic-themes';\nimport { forwardRef, HTMLAttributes, useEffect, useState } from 'react';\nimport { chromaData, hueScheme } from './theme.config';\n\n/**\n * This methods are used only to build a gradient sample based on the hue value.\n * Used for a visual referrence as a \"icon\" of the theme on the buttons.\n */\nconst buildThemeSample = (hue: number) => {\n    const oklch = 'oklch(' + getChroma(5, hue, chromaData) + ')';\n    return oklch;\n};\n\nconst availableThemes: Record<string, string> = Object.keys(hueScheme).reduce(\n    (acc, key) => {\n        const value = hueScheme[key];\n        acc[key] = buildThemeSample(value);\n        return acc;\n    },\n    {} as Record<string, string>\n);\n\nconst ThemeSwitcher = forwardRef<\n    HTMLDivElement,\n    HTMLAttributes<HTMLDivElement>\n>(({ ...props }, ref) => {\n    /** To initialize here you can manage cookie values to reminder user preferences. */\n    const { theme, setTheme } = useTheme();\n    const [hue, setHue] = useState(theme.hue);\n    const [darkMode, setDarkMode] = useState(theme.mode === 'light');\n\n    useEffect(() => {\n        setTheme({\n            hue,\n            mode: darkMode ? 'dark' : 'light',\n            chromaData: chromaData,\n        } as ThemeConfig);\n    }, [hue, darkMode, setTheme]);\n\n    return (\n        <>\n            <div\n                ref={ref}\n                className=\"bg-accent-200/40 dark:bg-accent-700/40 grid grid-cols-3 rounded-sm gap-2 p-6\"\n                {...props}\n            >\n                {Object.keys(availableThemes).map((key) => (\n                    <button\n                        key={key}\n                        className=\"bg-background px-4 py-1 text-sm font-medium rounded-ms border flex space-x-2 hover:ring-1 hover:ring-offset-2 hover:ring-offset-background hover:ring-primary\"\n                        onClick={() => setHue(hueScheme[key])}\n                    >\n                        <span\n                            className=\"w-4 h-4 rounded-full\"\n                            style={{\n                                background: availableThemes[key],\n                            }}\n                        ></span>\n                        <span>{key}</span>\n                    </button>\n                ))}\n                <div className=\"col-span-3 grid grid-cols-2 gap-x-2 mx-auto\">\n                    <button\n                        className=\"bg-background border px-4 py-1 text-sm font-medium rounded-ms hover:ring-1 hover:ring-offset-2 hover:ring-offset-background hover:ring-primary\"\n                        onClick={() => setDarkMode(false)}\n                    >\n                        Light\n                    </button>\n                    <button\n                        className=\"bg-background border px-4 py-1 text-sm font-medium rounded-ms hover:ring-1 hover:ring-offset-2 hover:ring-offset-background hover:ring-primary\"\n                        onClick={() => setDarkMode(true)}\n                    >\n                        Dark\n                    </button>\n                </div>\n            </div>\n        </>\n    );\n});\n\nThemeSwitcher.displayName = 'ThemeSwitcher';\n\nexport { ThemeSwitcher };\n\n\n";
 export default themeSwitcher;

package/dist/src/_templates/theme.config.d.ts

@@ -0,0 +1,2 @@
+declare const themeConfig = "\n\n/**\n * HUE THEMES\n *\n * Define the available color palettes here!\n *\n * The palettes are based on HUE values.\n *\n * To add or modify a HUE palette, explore and preview colors at:\n * https://oklch.com/#70,0.1,250,100\n *\n */\n\nexport const hueScheme: Record<string, number> = {\n    default: -1,\n    blue: 250,\n    green: 150,\n    orange: 35,\n    pink: 0,\n    purple: 316,\n};\n\n/**\n *\n * Default Chroma for each shade available on theme. See more at:\n * https://evilmartians.com/chronicles/better-dynamic-themes-in-tailwind-with-oklch-color-magic\n *\n */\nexport const chromaData: Record<number, number> = {\n    0: 0.0108,\n    1: 0.0121,\n    2: 0.0609,\n    3: 0.0908,\n    4: 0.1398,\n    5: 0.1472,\n    6: 0.1299,\n    7: 0.1067,\n    8: 0.0898,\n    9: 0.0726,\n    10: 0.005,\n};\n\n";
+export default themeConfig;

package/dist/src/_templates/theme.config.js

@@ -0,0 +1,2 @@
+var themeConfig = "\n\n/**\n * HUE THEMES\n *\n * Define the available color palettes here!\n *\n * The palettes are based on HUE values.\n *\n * To add or modify a HUE palette, explore and preview colors at:\n * https://oklch.com/#70,0.1,250,100\n *\n */\n\nexport const hueScheme: Record<string, number> = {\n    default: -1,\n    blue: 250,\n    green: 150,\n    orange: 35,\n    pink: 0,\n    purple: 316,\n};\n\n/**\n *\n * Default Chroma for each shade available on theme. See more at:\n * https://evilmartians.com/chronicles/better-dynamic-themes-in-tailwind-with-oklch-color-magic\n *\n */\nexport const chromaData: Record<number, number> = {\n    0: 0.0108,\n    1: 0.0121,\n    2: 0.0609,\n    3: 0.0908,\n    4: 0.1398,\n    5: 0.1472,\n    6: 0.1299,\n    7: 0.1067,\n    8: 0.0898,\n    9: 0.0726,\n    10: 0.005,\n};\n\n";
+export default themeConfig;

package/dist/src/cli.js

@@ -39,20 +39,20 @@ import chalk from "chalk";
 import fs from "fs";
 import inquirer from "inquirer";
 import path from "path";
-import huePalettes from "./_templates/hue-scheme.js";
 import rootCss from "./_templates/root-css.js";
 import themeColors from "./_templates/theme-colors.js";
+import themeConfig from "./_templates/theme.config.js";
 import themeSwitcher from "./_templates/theme-switcher.js";
 var initThemesDirectory = function (themesDir) {
     if (!fs.existsSync(themesDir)) {
         fs.mkdirSync(themesDir);
-        fs.writeFileSync(path.join(themesDir, "hue-palettes.ts"), huePalettes.trim());
+        fs.writeFileSync(path.join(themesDir, "theme.config.ts"), themeConfig.trim());
         fs.writeFileSync(path.join(themesDir, "root.css"), rootCss.trim());
         fs.writeFileSync(path.join(themesDir, "theme-colors.ts"), themeColors.trim());
         fs.writeFileSync(path.join(themesDir, "theme-switcher.tsx"), themeSwitcher.trim());
         console.log(chalk.green("Default files created in \"".concat(themesDir, "\".")));
         console.log(chalk.cyan("\n\t /themes/\n" +
-            "\t ├── hue-palettes.ts\n" +
+            "\t ├── theme.config.ts\n" +
             "\t ├── root.css\n" +
             "\t ├── theme-colors.ts\n" +
             "\t └── theme-switcher.tsx\n"));

package/dist/src/theme-helpers.d.ts

@@ -9,7 +9,7 @@
  *    - `style`: A record with dynamically generated CSS variables for the accent colors.
  *
  */
-export declare const getThemeProperties: (hue: number, darkMode: boolean) => {
+export declare const getThemeProperties: (hue: number, darkMode: boolean, chromaData?: Record<number, number>) => {
     className: string;
     style: Record<string, string>;
 };

package/dist/src/theme-helpers.js

@@ -1,4 +1,5 @@
-import { getVariables } from "../lib/tw-dynamic-themes/runtime";
+import { getVariables } from '../lib/tw-dynamic-themes/runtime';
+import { chromaData as defaultChromaData } from './theme.config';
 /**
  * getThemeProperties
  *
@@ -10,25 +11,27 @@ import { getVariables } from "../lib/tw-dynamic-themes/runtime";
  *    - `style`: A record with dynamically generated CSS variables for the accent colors.
  *
  */
-export var getThemeProperties = function (hue, darkMode) {
+export var getThemeProperties = function (hue, darkMode, chromaData) {
+    if (chromaData === void 0) { chromaData = defaultChromaData; }
     var whitePalette = hue == -1;
     var accent = getVariables({
-        baseName: "accent",
+        baseName: 'accent',
         hue: hue,
+        chromaData: chromaData,
     });
     // whitePalette have a different accent behavior for accent values
     if (whitePalette) {
         accent.push([
-            "--accent-500",
-            darkMode ? "1.000 0.000 89.876" : "0.212 0.000 359.000",
+            '--accent-500',
+            darkMode ? '1.000 0.000 89.876' : '0.212 0.000 359.000',
         ]);
         accent.push([
-            "--accent-50",
-            darkMode ? "0.212 0.000 359.000" : "1.000 0.000 89.876",
+            '--accent-50',
+            darkMode ? '0.212 0.000 359.000' : '1.000 0.000 89.876',
         ]);
     }
     return {
-        className: darkMode ? "dark" : "",
+        className: darkMode ? 'dark' : '',
         style: Object.fromEntries(accent),
     };
 };
@@ -42,7 +45,7 @@ export var getThemeProperties = function (hue, darkMode) {
  * @returns The OKLCH color value for the provided CSS variable, e.g., "0.614 0.136 250.000", or `null` if not available.
  */
 export var currentAccentValue = function (variableName) {
-    if (typeof window === "undefined") {
+    if (typeof window === 'undefined') {
         return null;
     }
     var rootElement = document.documentElement;

package/dist/src/theme-hook.d.ts

@@ -1,17 +1,8 @@
-/**
- * useColorTheme
- *
- * A custom hook that manages the application of color themes based on
- * the provided HUE value and dark mode setting.
- *
- * It updates the document's root element with the appropriate
- * class name and CSS variables for the theme.
- *
- * Note: This hook dispatches a custom event 'themeChange' when the theme changes.
- *        You can listen for this event to update components that depend on the theme.
- *
- */
-declare const useColorTheme: (hue: number, darkMode: boolean) => {
-    setTheme: (newHue: number, newDarkMode: boolean) => void;
+import { ThemeConfig } from "./theme.config";
+declare const updateTheme: (themeConfig: ThemeConfig) => void;
+type ThemeState = {
+    theme: ThemeConfig;
+    setTheme: (theme: ThemeConfig) => void;
 };
-export { useColorTheme };
+declare const useTheme: import("zustand").UseBoundStore<import("zustand").StoreApi<ThemeState>>;
+export { updateTheme, useTheme };

package/dist/src/theme-hook.js

@@ -1,35 +1,20 @@
-import { useCallback, useEffect } from "react";
 import { getThemeProperties } from "./theme-helpers";
-/**
- * useColorTheme
- *
- * A custom hook that manages the application of color themes based on
- * the provided HUE value and dark mode setting.
- *
- * It updates the document's root element with the appropriate
- * class name and CSS variables for the theme.
- *
- * Note: This hook dispatches a custom event 'themeChange' when the theme changes.
- *        You can listen for this event to update components that depend on the theme.
- *
- */
-var useColorTheme = function (hue, darkMode) {
-    var setTheme = useCallback(function (newHue, newDarkMode) {
-        var _a = getThemeProperties(newHue, newDarkMode), className = _a.className, style = _a.style;
-        document.documentElement.className = className;
-        document.documentElement.style.setProperty("color-scheme", newDarkMode ? "dark" : "light");
-        Object.entries(style).forEach(function (_a) {
-            var key = _a[0], value = _a[1];
-            document.documentElement.style.setProperty(key, value);
-        });
-        var themeChangeEvent = new CustomEvent("themeChange", {
-            detail: { hue: newHue, darkMode: newDarkMode },
-        });
-        window.dispatchEvent(themeChangeEvent);
-    }, []);
-    useEffect(function () {
-        setTheme(hue, darkMode);
-    }, [hue, darkMode, setTheme]);
-    return { setTheme: setTheme };
+import { create } from 'zustand';
+import { chromaData } from "./theme.config";
+var updateTheme = function (themeConfig) {
+    var _a = getThemeProperties(themeConfig.hue, themeConfig.mode === 'dark', themeConfig.chromaData), className = _a.className, style = _a.style;
+    document.documentElement.className = className;
+    document.documentElement.style.setProperty('--color-scheme', themeConfig.mode);
+    Object.entries(style).forEach(function (_a) {
+        var key = _a[0], value = _a[1];
+        document.documentElement.style.setProperty(key, value);
+    });
 };
-export { useColorTheme };
+var useTheme = create(function (set, get) { return ({
+    theme: { hue: 250, mode: 'light', chromaData: chromaData },
+    setTheme: function (theme) {
+        set({ theme: theme });
+        updateTheme(theme);
+    },
+}); });
+export { updateTheme, useTheme };

package/dist/src/theme-provider.d.ts

@@ -0,0 +1,8 @@
+import React, { type ReactNode } from 'react';
+import { ThemeConfig } from './theme.config';
+interface ThemeProviderProps {
+    children: ReactNode;
+    themeConfig: ThemeConfig;
+}
+declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export { ThemeProvider };

package/dist/src/theme-provider.js

@@ -0,0 +1,20 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+// 'use client'; // enable on Nextjs
+import { updateTheme, useTheme } from './theme-hook';
+import { useEffect, useState } from 'react';
+var ThemeProvider = function (_a) {
+    var children = _a.children, themeConfig = _a.themeConfig;
+    /**@TODO Get this values from user cookie */
+    var theme = useTheme().theme;
+    var _b = useState(false), isInitialized = _b[0], setIsInitialized = _b[1];
+    useEffect(function () {
+        if (!isInitialized) {
+            setIsInitialized(true);
+            updateTheme(themeConfig);
+        }
+    }, [theme, isInitialized]);
+    if (!isInitialized)
+        return null;
+    return _jsx(_Fragment, { children: children });
+};
+export { ThemeProvider };

package/dist/src/theme.config.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Theme Configuration
+ * Required params to init and switch the theme.
+ */
+export type ThemeMode = 'light' | 'dark';
+export type ThemeColor = number;
+export type ThemeConfig = {
+    hue: ThemeColor;
+    mode: ThemeMode;
+    chromaData: Record<number, number>;
+};
+/**
+ * HUE THEMES
+ *
+ * Define the available color palettes here!
+ *
+ * The palettes are based on HUE values.
+ *
+ * To add or modify a HUE palette, explore and preview colors at:
+ * https://oklch.com/#70,0.1,250,100
+ *
+ */
+export declare const hueScheme: Record<string, ThemeColor>;
+/**
+ *
+ * Default Chroma for each shade available on theme. See more at:
+ * https://evilmartians.com/chronicles/better-dynamic-themes-in-tailwind-with-oklch-color-magic
+ *
+ */
+export declare const chromaData: Record<number, number>;

package/dist/src/theme.config.js

@@ -0,0 +1,38 @@
+/**
+ * HUE THEMES
+ *
+ * Define the available color palettes here!
+ *
+ * The palettes are based on HUE values.
+ *
+ * To add or modify a HUE palette, explore and preview colors at:
+ * https://oklch.com/#70,0.1,250,100
+ *
+ */
+export var hueScheme = {
+    default: -1,
+    blue: 250,
+    green: 150,
+    orange: 35,
+    pink: 0,
+    purple: 316,
+};
+/**
+ *
+ * Default Chroma for each shade available on theme. See more at:
+ * https://evilmartians.com/chronicles/better-dynamic-themes-in-tailwind-with-oklch-color-magic
+ *
+ */
+export var chromaData = {
+    0: 0.0108,
+    1: 0.0121,
+    2: 0.0609,
+    3: 0.0908,
+    4: 0.1398,
+    5: 0.1472,
+    6: 0.1299,
+    7: 0.1067,
+    8: 0.0898,
+    9: 0.0726,
+    10: 0.054,
+};

package/dist/src/theme.types.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Theme Configuration
+ * Required params to init and switch the theme.
+ */
+type ThemeConfig = {
+    hue: number;
+    mode: 'light' | 'dark';
+    chromaData: Record<number, number>;
+};

package/dist/src/theme.types.js

@@ -0,0 +1 @@
+"use strict";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cyhip-dynamic-themes",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "Tailwind-powered dynamic color themes for React apps.",
   "author": "@KassioRF, @CyberHippie-io",
   "license": "MIT",
@@ -59,7 +59,8 @@
     "culori": "^4.0.1",
     "inquirer": "^12.0.0",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "zustand": "^5.0.1"
   },
   "peerDependencies": {
     "react": "^18",