cyhip-dynamic-themes 0.1.2 → 0.1.4

package/README.md

@@ -3,14 +3,14 @@
 ![cyhip-dynamic-themes minzip package size](https://img.shields.io/bundlephobia/minzip/cyhip-dynamic-themes)
 [![Version](https://img.shields.io/npm/v/cyhip-dynamic-themes.svg?colorB=green)](https://www.npmjs.com/package/cyhip-dynamic-themes)
 
-**Dynamically switch color themes in your React + TypeScript + Tailwind CSS apps.**
+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.
 
 ## Features
 
--   **Dynamic Color Theming**: Utilize OKLCH colors for vibrant and accurate color representations.
+-   **Dynamic Color Theming**: Allow your users to switch the color theme of your application in a simple and practical way.
 -   **Dark Mode Support**: Easily switch between light and dark modes across your custom themes.
 
-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 integrates seamlessly with their [tw-dynamic-themes](https://github.com/dkzlv/tw-dynamic-themes) library to manage dynamic CSS variables effectively.
+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)
 
 ## Installation
 
@@ -26,7 +26,7 @@ yarn add cyhip-dynamic-themes
 
 ### Prerequisites
 
-Ensure you have Tailwind CSS installed in your project and a `tailwind.config.ts `file in your root directory.
+Ensure you have Tailwind CSS installed in your project and the `tailwind.config.ts` and `postcss.config.mjs` files in your root directory.
 
 ### Initialize Theme basic files
 
@@ -136,7 +136,7 @@ You can add or modify hue palettes by visiting [OKLCH Color Preview](https://okl
  */
 
 const hueScheme: Record<string, string> = {
-    monoCromatic: "-1",
+    white: "-1",
     blue: "250",
     green: "150",
     orange: "35",
@@ -149,19 +149,19 @@ export { hueScheme };
 
 ## API
 
-### `useColorTheme(hue: string, darkMode: boolean)`
+### `useColorTheme(hue: number, darkMode: boolean)`
 
 A custom hook that manages the application of color themes based on the provided HUE value and dark mode setting.
 
--   **Note**: Dispatches a custom event themeChange when the theme changes.
+-   **Note**: Dispatches a custom event `themeChange` when the theme changes.
 
-### `getThemeProperties(hue: string, darkMode: boolean)`
+### `getThemeProperties(hue: number, darkMode: boolean)`
 
 Defines CSS class and style properties based on the provided HUE value and dark mode setting.
 
 -   **Parameters:**
 
-    -   `hue`: A string representing the hue value. If -1, the theme is monochromatic.
+    -   `hue`: A number representing the hue value. If -1, the theme is monochromatic.
 
     -   `darkMode`: A boolean indicating if dark mode is active.
 

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 export { version } from "./__version__";
 export { consistentChroma } from "./lib/tw-dynamic-themes/runtime";
 export { dynamicTwClasses } from "./lib/tw-dynamic-themes/twPlugin";
-export { hueScheme as defaultHueScheme } from "./src/hue-scheme";
 export { currentAccentValue, getThemeProperties } from "./src/theme-helpers";
 export { useColorTheme } from "./src/theme-hook";

package/dist/index.js

@@ -1,6 +1,5 @@
 export { version } from "./__version__";
 export { consistentChroma } from "./lib/tw-dynamic-themes/runtime";
 export { dynamicTwClasses } from "./lib/tw-dynamic-themes/twPlugin";
-export { hueScheme as defaultHueScheme } from "./src/hue-scheme";
 export { currentAccentValue, getThemeProperties } from "./src/theme-helpers";
 export { useColorTheme } from "./src/theme-hook";

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

@@ -2,13 +2,12 @@
  * A map of CSS varable name to color
  */
 type SingleVariable = [string, string];
-export declare function getVariables({ baseName, hue, mode, monoCromatic, }: {
+export declare function getVariables({ baseName, hue, mode, }: {
     baseName: string;
     hue: number;
     mode?: "bright" | "consistent";
-    monoCromatic?: boolean;
 }): 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, monoCromatic?: boolean) => string;
+export declare const consistentChroma: (i: number, hue: number, whitePalette?: boolean) => string;
 export {};

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

@@ -2,11 +2,12 @@ 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, _c = _a.monoCromatic, monoCromatic = _c === void 0 ? false : _c;
+    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 [
         makeVariable({ name: baseName, shade: shade }),
-        calculator(shadeIndex, hue, monoCromatic),
+        calculator(shadeIndex, +hue, whitePalette),
     ]; });
 }
 export function updateVariables(variables, el) {
@@ -33,16 +34,12 @@ export var highestChroma = function (shadeIndex, hue) {
     // Clamping it to the highest chroma possible
     return serializeColor(oklch(toGamut("p3", "oklch", differenceEuclidean("oklch"), 0)(color)));
 };
-export var consistentChroma = function (i, hue, monoCromatic) {
-    if (monoCromatic === void 0) { monoCromatic = false; }
+export var consistentChroma = function (i, hue, whitePalette) {
+    if (whitePalette === void 0) { whitePalette = false; }
     var oklch = converter("oklch");
     // Using a pinned chroma
-    var chroma = monoCromatic ? chromaData[i] * 0.00001 : chromaData[i];
-    var light = monoCromatic ? lightness[i] * 1.0 : lightness[i] * 0.95;
-    // if (monoCromatic && i > 4) {
-    //     light = 0.24 + i / 10;
-    //     chroma = 0;
-    // }
+    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, ")");
     return serializeColor(oklch(toGamut("p3", "oklch", differenceEuclidean("oklch"), 0)(color)));
 };
@@ -72,17 +69,4 @@ var chromaData = {
     9: 0.0588,
     10: 0.0491,
 };
-// const chromaData: Record<number, number> = {
-//     0: 0.0,
-//     1: 0.0,
-//     2: 0.0,
-//     3: 0.0,
-//     4: 0.0,
-//     5: 0.0,
-//     6: 0.0,
-//     7: 0.0,
-//     8: 0.0,
-//     9: 0.0,
-//     10: 0.0,
-// };
 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)); };

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "cyhip-dynamic-themes",
-    "version": "0.1.2",
+    "version": "0.1.4",
     "description": "Tailwind-powered dynamic color themes for React apps.",
     "author": "@KassioRF, @CyberHippie-io",
     "license": "MIT",
@@ -8,12 +8,30 @@
         "type": "git",
         "url": "https://github.com/CyberHippie-io/cyhip-dynamic-themes"
     },
+    "homepage": "https://cyhip-dynamic-themes.vercel.app/",
     "keywords": [
+        "color palette",
+        "color system",
+        "color themes",
+        "css in js",
+        "css variables",
+        "custom themes",
+        "dark mode",
+        "dynamic themes",
+        "frontend styling",
+        "light mode",
+        "nextjs",
+        "OKLCH",
+        "tailwindcss",
+        "tailwindcss plugin",
+        "tailwind themes",
+        "theme customization",
+        "theme switcher",
         "react",
-        "tailwind",
-        "theme",
-        "color",
-        "dynamic"
+        "react dynamic themes",
+        "react typescipt",
+        "typescript",
+        "vite"
     ],
     "files": [
         "dist",
@@ -29,7 +47,7 @@
     },
     "scripts": {
         "build": "tsc --project tsconfig.json",
-        "start": "tsx src/index.ts",
+        "start": "tsx ./index.ts",
         "prepublishOnly": "pnpm build"
     },
     "devDependencies": {
@@ -37,6 +55,7 @@
         "@types/node": "^22.7.7",
         "@types/react": "^18.3.11",
         "commander": "^12.1.0",
+        "ts-node": "^10.9.2",
         "tsx": "^4.19.1",
         "typescript": "^5.6.3"
     },
@@ -48,8 +67,8 @@
         "react-dom": "^18.3.1"
     },
     "peerDependencies": {
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0"
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0"
     },
     "exports": {
         ".": {

package/dist/src/_templates/hue-scheme.d.ts

@@ -1,2 +1,2 @@
+declare const huePalettes = "\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\nconst hueScheme: Record<string, number> = {\n    white: -1,\n    blue: 250,\n    green: 150,\n    orange: 35,\n    pink: 0,\n    purple: 316,\n};\n\nexport { hueScheme };\n\n";
 export default huePalettes;
-declare const huePalettes: "\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\nconst hueScheme: Record<string, string> = {\n    monoCromatic: \"-1\",\n    blue: \"250\",\n    green: \"150\",\n    orange: \"35\",\n    pink: \"0\",\n    purple: \"316\",\n};\n\nexport { hueScheme };\n";

package/dist/src/_templates/hue-scheme.js

@@ -1,2 +1,2 @@
-var huePalettes = "\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\nconst hueScheme: Record<string, string> = {\n    monoCromatic: \"-1\",\n    blue: \"250\",\n    green: \"150\",\n    orange: \"35\",\n    pink: \"0\",\n    purple: \"316\",\n};\n\nexport { hueScheme };\n";
+var huePalettes = "\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\nconst hueScheme: Record<string, number> = {\n    white: -1,\n    blue: 250,\n    green: 150,\n    orange: 35,\n    pink: 0,\n    purple: 316,\n};\n\nexport { hueScheme };\n\n";
 export default huePalettes;

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";
 export default rootCss;
-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";

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};";
 export default themeColors;
-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};";

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";
 export default themeSwitcher;
-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: string, monoCromatic: boolean = false) => {\n    const oklchA = 'oklch(' + consistentChroma(4, +hue, monoCromatic) + ')';\n    const oklchB = 'oklch(' + consistentChroma(5, +hue, monoCromatic) + ')';\n    const oklchC = 'oklch(' + consistentChroma(6, +hue, monoCromatic) + ')';\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";

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: string, monoCromatic: boolean = false) => {\n    const oklchA = 'oklch(' + consistentChroma(4, +hue, monoCromatic) + ')';\n    const oklchB = 'oklch(' + consistentChroma(5, +hue, monoCromatic) + ')';\n    const oklchC = 'oklch(' + consistentChroma(6, +hue, monoCromatic) + ')';\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 { 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";
 export default themeSwitcher;

package/dist/src/cli.js

@@ -51,6 +51,11 @@ var initThemesDirectory = function (themesDir) {
         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 ├── root.css\n" +
+            "\t ├── theme-colors.ts\n" +
+            "\t └── theme-switcher.tsx\n"));
         console.log(chalk.cyan("  1. Update your tailwind.conf.ts as described in /themes/theme-colors.ts"));
         console.log(chalk.cyan("  2. Import /themes/root.css into the base tsx of your application, e.g.: [ Main.tsx or App.tsx or Layout.tsx ]"));
         console.log(chalk.cyan("  3. Add the /themes/theme-switcher.tsx component to your application and to see how it works."));

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: string, darkMode: boolean) => {
+export declare const getThemeProperties: (hue: number, darkMode: boolean) => {
     className: string;
     style: Record<string, string>;
 };

package/dist/src/theme-helpers.js

@@ -11,14 +11,13 @@ import { getVariables } from "../lib/tw-dynamic-themes/runtime";
  *
  */
 export var getThemeProperties = function (hue, darkMode) {
-    var monoCromatic = hue == "-1";
+    var whitePalette = hue == -1;
     var accent = getVariables({
         baseName: "accent",
-        hue: +hue,
-        monoCromatic: monoCromatic,
+        hue: hue,
     });
-    // MonoCromatic have a different accent behavior for accent values
-    if (monoCromatic) {
+    // 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",

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

@@ -11,7 +11,7 @@
  *        You can listen for this event to update components that depend on the theme.
  *
  */
-declare const useColorTheme: (hue: string, darkMode: boolean) => {
-    setTheme: (newHue: string, newDarkMode: boolean) => void;
+declare const useColorTheme: (hue: number, darkMode: boolean) => {
+    setTheme: (newHue: number, newDarkMode: boolean) => void;
 };
 export { useColorTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cyhip-dynamic-themes",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Tailwind-powered dynamic color themes for React apps.",
   "author": "@KassioRF, @CyberHippie-io",
   "license": "MIT",
@@ -8,12 +8,30 @@
     "type": "git",
     "url": "https://github.com/CyberHippie-io/cyhip-dynamic-themes"
   },
+  "homepage": "https://cyhip-dynamic-themes.vercel.app/",
   "keywords": [
+    "color palette",
+    "color system",
+    "color themes",
+    "css in js",
+    "css variables",
+    "custom themes",
+    "dark mode",
+    "dynamic themes",
+    "frontend styling",
+    "light mode",
+    "nextjs",
+    "OKLCH",
+    "tailwindcss",
+    "tailwindcss plugin",
+    "tailwind themes",
+    "theme customization",
+    "theme switcher",
     "react",
-    "tailwind",
-    "theme",
-    "color",
-    "dynamic"
+    "react dynamic themes",
+    "react typescipt",
+    "typescript",
+    "vite"
   ],
   "files": [
     "dist",
@@ -32,6 +50,7 @@
     "@types/node": "^22.7.7",
     "@types/react": "^18.3.11",
     "commander": "^12.1.0",
+    "ts-node": "^10.9.2",
     "tsx": "^4.19.1",
     "typescript": "^5.6.3"
   },
@@ -43,8 +62,8 @@
     "react-dom": "^18.3.1"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
   },
   "exports": {
     ".": {
@@ -60,6 +79,6 @@
   },
   "scripts": {
     "build": "tsc --project tsconfig.json",
-    "start": "tsx src/index.ts"
+    "start": "tsx ./index.ts"
   }
 }

package/dist/src/_templates/hue-palettes.d.ts

@@ -1,2 +0,0 @@
-export default huePalettes;
-declare const huePalettes: "\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\nconst hueScheme: Record<string, string> = {\n    monoCromatic: \"-1\",\n    blue: \"250\",\n    green: \"150\",\n    orange: \"35\",\n    pink: \"0\",\n    purple: \"316\",\n};\n\nexport { hueScheme };\n";

package/dist/src/_templates/hue-palettes.js

@@ -1,2 +0,0 @@
-var huePalettes = "\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\nconst hueScheme: Record<string, string> = {\n    monoCromatic: \"-1\",\n    blue: \"250\",\n    green: \"150\",\n    orange: \"35\",\n    pink: \"0\",\n    purple: \"316\",\n};\n\nexport { hueScheme };\n";
-export default huePalettes;

package/dist/src/hue-scheme.d.ts

@@ -1,13 +0,0 @@
-/**
- * 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
- *
- */
-declare const hueScheme: Record<string, string>;
-export { hueScheme };

package/dist/src/hue-scheme.js

@@ -1,20 +0,0 @@
-/**
- * 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
- *
- */
-var hueScheme = {
-    monoCromatic: "-1",
-    blue: "250",
-    green: "150",
-    orange: "35",
-    pink: "0",
-    purple: "316",
-};
-export { hueScheme };

package/dist/src/index.d.ts

@@ -1,5 +0,0 @@
-export { consistentChroma } from "../lib/tw-dynamic-themes/runtime";
-export { dynamicTwClasses } from "../lib/tw-dynamic-themes/twPlugin";
-export { hueScheme as defaultHueScheme } from "./hue-scheme";
-export { currentAccentValue, getThemeProperties } from "./theme-helpers";
-export { useColorTheme } from "./theme-hook";

package/dist/src/index.js

@@ -1,5 +0,0 @@
-export { consistentChroma } from "../lib/tw-dynamic-themes/runtime";
-export { dynamicTwClasses } from "../lib/tw-dynamic-themes/twPlugin";
-export { hueScheme as defaultHueScheme } from "./hue-scheme";
-export { currentAccentValue, getThemeProperties } from "./theme-helpers";
-export { useColorTheme } from "./theme-hook";

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

@@ -1,8 +0,0 @@
-import { HTMLAttributes } from "react";
-declare const ThemeSwitcher: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    hueScheme: Record<string, string>;
-    availableThemes: Record<string, string>;
-    setHue: (hue: string) => void;
-    setDarkMode: (darkMode: boolean) => void;
-} & import("react").RefAttributes<HTMLDivElement>>;
-export { ThemeSwitcher };

package/dist/src/theme-switcher.js

@@ -1,33 +0,0 @@
-"use client";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef } from "react";
-var ThemeSwitcher = forwardRef(function (_a, ref) {
-    var hueScheme = _a.hueScheme, availableThemes = _a.availableThemes, setHue = _a.setHue, setDarkMode = _a.setDarkMode, className = _a.className, props = __rest(_a, ["hueScheme", "availableThemes", "setHue", "setDarkMode", "className"]);
-    return (_jsx(_Fragment, { children: _jsxs("div", __assign({ ref: ref, className: "bg-accent-200/40 dark:bg-accent-700/40 grid grid-cols-3 rounded-sm gap-2 p-6" }, props, { children: [Object.keys(availableThemes).map(function (key) { return (_jsxs("button", { 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", onClick: function () { return setHue(hueScheme[key]); }, children: [_jsx("span", { className: "w-4 h-4 rounded-full", style: {
-                                background: availableThemes[key],
-                            } }), _jsx("span", { children: key })] }, key)); }), _jsxs("div", { className: "col-span-3 grid grid-cols-2 gap-x-2 mx-auto", children: [_jsx("button", { 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", onClick: function () { return setDarkMode(false); }, children: "Light" }), _jsx("button", { 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", onClick: function () { return setDarkMode(true); }, children: "Dark" })] })] })) }));
-});
-ThemeSwitcher.displayName = "ThemeSwitcher";
-export { ThemeSwitcher };

package/dist/src/theme-switcher.jsx

@@ -1,36 +0,0 @@
-"use client";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { forwardRef } from "react";
-var ThemeSwitcher = forwardRef(function (_a, ref) {
-    var hueScheme = _a.hueScheme, availableThemes = _a.availableThemes, setHue = _a.setHue, setDarkMode = _a.setDarkMode, className = _a.className, props = __rest(_a, ["hueScheme", "availableThemes", "setHue", "setDarkMode", "className"]);
-    return (<>
-                <div ref={ref} className="bg-accent-200/40 dark:bg-accent-700/40 grid grid-cols-3 rounded-sm gap-2 p-6" {...props}>
-                    {Object.keys(availableThemes).map(function (key) { return (<button key={key} 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" onClick={function () { return setHue(hueScheme[key]); }}>
-                            <span className="w-4 h-4 rounded-full" style={{
-                background: availableThemes[key],
-            }}></span>
-                            <span>{key}</span>
-                        </button>); })}
-                    <div className="col-span-3 grid grid-cols-2 gap-x-2 mx-auto">
-                        <button 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" onClick={function () { return setDarkMode(false); }}>
-                            Light
-                        </button>
-                        <button 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" onClick={function () { return setDarkMode(true); }}>
-                            Dark
-                        </button>
-                    </div>
-                </div>
-            </>);
-});
-ThemeSwitcher.displayName = "ThemeSwitcher";
-export { ThemeSwitcher };