cyhip-dynamic-themes 0.1.1 → 0.1.3

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 CyberHippie-io
+Copyright (c) 2024 Kassio Rodrigues Ferreira
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,2 +1,186 @@
 # cyhip-dynamic-themes
-Dynamic Color Themes for React Apps
+
+![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.**
+
+## Features
+
+-   **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 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
+
+To install the package, run:
+
+```bash
+npm install cyhip-dynamic-themes
+# or
+yarn add cyhip-dynamic-themes
+```
+
+## Usage
+
+### Prerequisites
+
+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
+
+In your project's root directory, run:
+
+```bash
+npx cyhip-dynamic-themes init
+```
+
+This command generates the following files in the `/themes/` folder:
+
+```bash
+/themes/
+├── hue-palettes.ts      # To set your available hue-based colors.
+├── root.css             # Main CSS file for styling.
+├── theme-colors.ts      # Includes color definitions for Tailwind.
+└── theme-switcher.tsx   # Example component for theme switching.
+```
+
+### Update `tailwind.config.ts`
+
+To enable dynamic colors and dark mode, modify your `tailwind.config.ts` as follows:
+
+```ts
+// tailwind.config.ts
+import type { Config } from "tailwindcss";
+import { themeColors } from "./src/themes/theme-colors";
+
+export default {
+    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+    darkMode: "class",
+    theme: {
+        extend: {
+            colors: themeColors,
+        },
+    },
+    plugins: [],
+} satisfies Config;
+```
+
+**Note:** After updating the configuration, restart your application to apply the changes.
+
+### Import `root.css`
+
+To apply CSS styles linked to the defined themes, add `/themes/root.css` to your root TSX file:
+
+```tsx
+// src/main.tsx
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+
+// Import CSS
+import "./themes/root.css";
+
+createRoot(document.getElementById("root")!).render(
+    <StrictMode>
+        <App />
+    </StrictMode>
+);
+```
+
+### Switching Themes Dynamically
+
+Switching the main color palette can be done using the `ThemeSwitcher` component. Here's a basic example to illustrate its use:
+
+```tsx
+// App.tsx
+import { ThemeSwitcher } from "./themes/theme-switcher";
+function App() {
+    return (
+        <>
+            <main className="h-screen flex flex-col justify-center items-center gap-y-14">
+                <h1 className="text-4xl font-bold text-center">
+                    Cyhip Dynamic Themes - Basic Usage
+                </h1>
+                <ThemeSwitcher />
+                <div className="bg-accent-200/40 dark:bg-accent-700/40 grid grid-cols-1 gap-6 p-4">
+                    <button className="bg-primary text-primary-foreground px-5 py-2 shadow rounded-sm font-medium mx-auto">
+                        Button
+                    </button>
+                    <samp className="bg-accent-950/80 text-accent-100/90 text-sm rounded-sm px-4 py-1 shadow">
+                        className="bg-primary text-primary-foreground ..."
+                    </samp>
+                </div>
+            </main>
+        </>
+    );
+}
+
+export default App;
+```
+
+Check the `/templates/theme-switcher.tsx` component to see how to initialize and alternate themes.
+
+Finally, take a look on the last example and see how we can combine the accent variable with tailwind classes like `bg-accent-<value>` and `text-accent-<value>`.
+
+## Defining Color Palettes Based on Hue
+
+You can add or modify hue palettes by visiting [OKLCH Color Preview](https://oklch.com/). To change your hue values, edit the `/themes/hue-palettes.ts` file:
+
+```ts
+// themes/hue-palettes.ts
+/**
+ * HUE THEMES
+ * Define the available color palettes here!
+ */
+
+const hueScheme: Record<string, string> = {
+    white: "-1",
+    blue: "250",
+    green: "150",
+    orange: "35",
+    pink: "0",
+    purple: "316",
+};
+
+export { hueScheme };
+```
+
+## API
+
+### `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.
+
+### `getThemeProperties(hue: number, darkMode: boolean)`
+
+Defines CSS class and style properties based on the provided HUE value and dark mode setting.
+
+-   **Parameters:**
+
+    -   `hue`: A number representing the hue value. If -1, the theme is monochromatic.
+
+    -   `darkMode`: A boolean indicating if dark mode is active.
+
+-   **Returns:**
+
+    -   An object containing:
+        -   `className`: A string for dark mode ("dark") or an empty string for light mode.
+        -   `style`: A record of dynamically generated CSS variables for accent colors.
+
+### `currentAccentValue(variableName: string)`
+
+Retrieves the current value of a specified CSS variable from the root element.
+
+-   **Parameters**:
+
+    -   `variableName`: The name of the CSS variable to retrieve (e.g., "--accent-500").
+
+-   **Returns**: The OKLCH color value or `null` if not available.
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for details.

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";
-export { version } from "./__version__";

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";
-export { version } from "./__version__";

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.1",
+    "version": "0.1.3",
     "description": "Tailwind-powered dynamic color themes for React apps.",
     "author": "@KassioRF, @CyberHippie-io",
     "license": "MIT",
@@ -8,34 +8,61 @@
         "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",
         "README.md",
         "LICENSE"
     ],
+    "type": "module",
     "main": "./dist/index.js",
     "module": "./dist/index.esm.js",
     "types": "./dist/index.d.ts",
+    "bin": {
+        "cyhip-dynamic-themes": "./dist/src/cli.js"
+    },
     "scripts": {
         "build": "tsc --project tsconfig.json",
-        "start": "tsx src/index.ts",
-        "prepublishOnly": "yarn build"
+        "start": "tsx ./index.ts",
+        "prepublishOnly": "pnpm build"
     },
     "devDependencies": {
         "@types/culori": "^2.1.1",
+        "@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"
     },
     "dependencies": {
+        "chalk": "^5.3.0",
         "culori": "^4.0.1",
+        "inquirer": "^12.0.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
     },

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

@@ -0,0 +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;

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

@@ -0,0 +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, 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

@@ -0,0 +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;

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

@@ -0,0 +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";
+export default rootCss;

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

@@ -0,0 +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;

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

@@ -0,0 +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};";
+export default themeColors;

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

@@ -0,0 +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;

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

@@ -0,0 +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";
+export default themeSwitcher;

package/dist/src/cli.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/src/cli.js

@@ -0,0 +1,115 @@
+#!/usr/bin/env node
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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 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, "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 ├── 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."));
+    }
+    else {
+        console.error(chalk.red("A \"/themes/ folder already exists, it was not possible to initialize the files."));
+    }
+};
+var checkSrcDirectory = function () {
+    var srcPath = path.join(process.cwd(), "src");
+    return fs.existsSync(srcPath) ? "src" : ".";
+};
+var askDirectory = function () { return __awaiter(void 0, void 0, void 0, function () {
+    var srcExists, selectedDir;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                srcExists = checkSrcDirectory();
+                return [4 /*yield*/, inquirer.prompt([
+                        {
+                            type: "list",
+                            name: "selectedDir",
+                            message: "Where would you like to initialize the themes directory?",
+                            choices: [
+                                {
+                                    name: "./src (if exists)",
+                                    value: "src",
+                                    disabled: !fs.existsSync(path.join(process.cwd(), "src")),
+                                },
+                                { name: "./ (project root)", value: "." },
+                            ],
+                            default: srcExists,
+                        },
+                    ])];
+            case 1:
+                selectedDir = (_a.sent()).selectedDir;
+                return [2 /*return*/, selectedDir];
+        }
+    });
+}); };
+var runInit = function () { return __awaiter(void 0, void 0, void 0, function () {
+    var directory, themesDir;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, askDirectory()];
+            case 1:
+                directory = _a.sent();
+                themesDir = path.join(process.cwd(), directory, "themes");
+                initThemesDirectory(themesDir);
+                return [2 /*return*/];
+        }
+    });
+}); };
+var _a = process.argv, command = _a[2];
+if (command === "init") {
+    runInit();
+}

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.1",
+  "version": "0.1.3",
   "description": "Tailwind-powered dynamic color themes for React apps.",
   "author": "@KassioRF, @CyberHippie-io",
   "license": "MIT",
@@ -8,29 +8,56 @@
     "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",
     "README.md",
     "LICENSE"
   ],
+  "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
   "types": "./dist/index.d.ts",
+  "bin": {
+    "cyhip-dynamic-themes": "./dist/src/cli.js"
+  },
   "devDependencies": {
     "@types/culori": "^2.1.1",
+    "@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"
   },
   "dependencies": {
+    "chalk": "^5.3.0",
     "culori": "^4.0.1",
+    "inquirer": "^12.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
@@ -52,6 +79,6 @@
   },
   "scripts": {
     "build": "tsc --project tsconfig.json",
-    "start": "tsx src/index.ts"
+    "start": "tsx ./index.ts"
   }
 }

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";