cyhip-dynamic-themes 0.2.1 → 1.0.0

package/README.md

@@ -9,23 +9,21 @@ Implement dynamic color themes in your React apps with Tailwind CSS in a simple
 
 - **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.
--   **Dark Mode Support**: Easily switch between light and dark modes across your custom themes.
+- **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)
+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.
+- **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.
+- **Custom Hooks for Dynamic Theme Switching**: Switch themes dynamically with `useTheme`, `useThemeHue`, and `useThemeMode`.
 
 ## Installation
 
@@ -41,9 +39,9 @@ yarn add cyhip-dynamic-themes
 
 ### Prerequisites
 
-Ensure you have Tailwind CSS installed in your project and the `tailwind.config.ts` and `postcss.config.mjs` files in your root directory.
+Ensure you have Tailwind CSS v4 installed in your project.
 
-### Initialize Theme basic files
+### Initialize theme files
 
 In your project's root directory, run:
 
@@ -55,192 +53,229 @@ This command generates the following files in the `/themes/` folder:
 
 ```bash
 /themes/
-├── theme.config.ts.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;
+├── app-theme-provider.tsx   # Wraps ThemeProvider for your app.
+├── root.css                 # Tailwind v4 tokens + theme mapping.
+├── theme.config.ts          # Theme palette + defaults.
+└── theme-switcher.tsx       # Example component for theme switching.
 ```
 
-**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:
+To apply the Tailwind v4 tokens and theme mapping, import `/themes/root.css` in your root file.
 
 ```tsx
-// src/main.tsx
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App.tsx";
+// src/main.tsx (Vite)
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+import { AppThemeProvider } from './themes/app-theme-provider.tsx';
+import './themes/root.css';
 
-// Import CSS
-import "./themes/root.css";
-
-createRoot(document.getElementById("root")!).render(
+createRoot(document.getElementById('root')!).render(
     <StrictMode>
-        <App />
-    </StrictMode>
+        <AppThemeProvider>
+            <App />
+        </AppThemeProvider>
+    </StrictMode>,
 );
 ```
 
-
 ### Theme Provider
 
-Use the `ThemeProvider` to initialize a default theme.
+Use the `ThemeProvider` to initialize a default theme and optional storage.
 
 ```tsx
-// src/main.tsx
-import { ThemeConfig, ThemeProvider } from 'cyhip-dynamic-themes';
-import { chromaData, hueScheme } from './themes/theme.config.ts';
+// themes/app-theme-provider.tsx
+'use client';
 
-import './index.css';
+import { ThemeProvider } from 'cyhip-dynamic-themes';
+import { defaultTheme, themeStorage } from './theme.config';
 
-createRoot(document.getElementById('root')!).render(
-    <StrictMode>
-        <ThemeProvider
-            themeConfig={
-                {
-                    hue: hueScheme.default,
-                    mode: 'light',
-                    chromaData: chromaData,
-                } as ThemeConfig
-            }
-        >
-            <App />
+export function AppThemeProvider({ children }: { children: React.ReactNode }) {
+    return (
+        <ThemeProvider themeConfig={defaultTheme} storage={themeStorage}>
+            {children}
         </ThemeProvider>
-    </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:
+Switch the main color palette and mode using `useThemeHue()` and `useThemeMode()`.
+
+```tsx
+// src/themes/theme-switcher.tsx
+import { availableThemes, hueScheme } from './theme.config';
+import { useThemeHue, useThemeMode } from 'cyhip-dynamic-themes';
+import { useMemo } from 'react';
+
+export function ThemeSwitcher() {
+    return (
+        <div className="auto-cols grid grid-flow-row gap-2">
+            <div className="rounded border">
+                <ColorPaletteMenu />
+            </div>
+            <div>
+                <ThemeModeMenu />
+            </div>
+        </div>
+    );
+}
+
+function ColorPaletteMenu() {
+    const { hue, setThemeHue } = useThemeHue();
+
+    const selected = useMemo(
+        () => Object.keys(hueScheme).find((key) => hueScheme[key] === hue) ?? null,
+        [hue],
+    );
+
+    return (
+        <div className="m-3 grid auto-cols-max grid-flow-col gap-4">
+            {Object.keys(availableThemes).map((key) => (
+                <button
+                    type="button"
+                    key={key}
+                    className="relative cursor-pointer"
+                    onClick={() => setThemeHue(hueScheme[key])}
+                >
+                    {selected === key && (
+                        <span className="border-accent-400 absolute -inset-1 block h-8 w-8 rounded-full border-2" />
+                    )}
+                    <span
+                        className="block h-6 w-6 rounded-full"
+                        style={{ background: availableThemes[key] }}
+                    />
+                </button>
+            ))}
+        </div>
+    );
+}
+
+function ThemeModeMenu() {
+    const { mode, setThemeMode } = useThemeMode();
+
+    const btnStyle = 'border px-2 py-2 rounded-md cursor-pointer hover:ring-1';
+    return (
+        <div className="m-2 flex justify-center gap-4">
+            <button
+                type="button"
+                className={`${btnStyle} ${mode === 'light' ? 'ring-1' : ''}`}
+                onClick={() => setThemeMode('light')}
+            >
+                Light
+            </button>
+            <button
+                type="button"
+                className={`${btnStyle} ${mode === 'dark' ? 'ring-1' : ''}`}
+                onClick={() => setThemeMode('dark')}
+            >
+                Dark
+            </button>
+        </div>
+    );
+}
+```
 
 ```tsx
-// App.tsx
-import { ThemeSwitcher } from "./themes/theme-switcher";
-function App() {
+// src/App.tsx
+import { ThemeSwitcher } from './themes/theme-switcher';
+
+export default 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
+            <main className="flex h-screen flex-col items-center justify-center gap-y-14">
+                <h1 className="bg-accent-200/40 dark:bg-accent-700/40 grid grid-cols-1 gap-6 p-4">
+                    Cyhip Dynamic Themes
                 </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">
+                <div className="grid grid-cols-1 gap-6 p-4">
+                    <button className="bg-primary text-primary-foreground mx-auto rounded-sm px-5 py-2 font-medium shadow">
                         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.
+See `dev-apps/test-app/src/themes/theme-switcher.tsx` for a compact example with both hue and mode toggles.
 
-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>`.
+Finally, take a look at the example above 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:
+You can add or modify hue palettes by visiting [OKLCH Color Preview](https://oklch.com/). To change your hue values, edit `/themes/theme.config.ts`:
 
 ```ts
-// themes/hue-palettes.ts
+// themes/theme.config.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 const hueScheme: Record<string, number> = {
+    default: -1,
+    blue: 250,
+    green: 150,
+    orange: 35,
+    pink: 0,
+    purple: 316,
 };
-
-export { hueScheme };
 ```
 
 ## API
 
 ### `Type ThemeConfig`
+
 The `ThemeConfig` type represents the configuration settings for an application's theme, specifically controlling color and mode settings. This type provides key properties for determining color hues, dark or light mode, and chromatic adjustments based on a data record.
 
-- **Properties:**
+- **`hue: number`** Determines the primary color base. If set to `-1`, the theme uses a white-based palette.
+- **`mode: 'light' | 'dark'`** Controls light or dark mode.
+- **`chromaData: Record<number, number>`** Maps shade numbers to chroma values for generating color scales.
 
-    - `hue`: `number`
-    It determines the primary color base; if set to -1, the theme uses a white color based scheme.
+### `Type ThemeMode`
 
-    - `mode`: `'light' | 'dark'`
-    Defines whether the theme is in "light" or "dark" mode. Acceptable
+Type alias for `'light' | 'dark'`.
 
-    - `chromaData`: `Record<number,number>`
-    A record that maps specific numeric values to chroma levels. This data allows for dynamic chromatic adjustments, enabling fine-tuning of the theme's color saturation or intensity.
+### `Type ThemeColor`
 
-### `useColorTheme(theme: ThemeConfig)`
+Type alias for the numeric hue value.
 
-A custom hook that manages the application of color themes based on the provided HUE value and dark mode setting.
+### `useTheme()`
 
+State hook with `setTheme`, plus granular setters `setThemeHue` and `setThemeMode`.
 
-### `getThemeProperties(hue: number, darkMode: boolean, chromaData: Record<number,number>)`
+### `useThemeHue()`
 
-Defines CSS class and style properties based on the provided HUE value and dark mode setting.
+Derived hook to read and update only the hue.
 
--   **Parameters:**
+### `useThemeMode()`
 
-    -   `hue`
+Derived hook to read and update only the mode.
 
-    -   `darkMode`: A boolean indicating if dark mode is active.
+### `ThemeProvider`
 
-    - `chromaData`
--   **Returns:**
+React provider that applies theme settings and optionally loads/saves user preferences via storage.
 
-    -   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.
+### `ThemeStorage` and `defaultThemeStorage`
 
-### `currentAccentValue(variableName: string)`
+`ThemeStorage` defines `load()` and `save()` for persisting user theme settings. `defaultThemeStorage` uses `localStorage`.
 
-Retrieves the current value of a specified CSS variable from the root element.
+### `getThemeProperties(themeConfig: ThemeConfig)`
+
+Returns `{ dataTheme, style }` where `dataTheme` is `'light' | 'dark'` and `style` maps `--accent-*` CSS variables.
+
+### `currentAccentValue(variableName: string)`
 
--   **Parameters**:
+Returns the current OKLCH value for a CSS variable from `:root`, or `null` if not available.
 
-    -   `variableName`: The name of the CSS variable to retrieve (e.g., "--accent-500").
+## Tailwind v4 and Dark Mode Notes
 
--   **Returns**: The OKLCH color value or `null` if not available.
+- Theme tokens and semantic colors are defined in `themes/root.css` using `@theme inline`.
+- Dark mode is controlled via `data-theme="dark" | "light"` on the root element, not `class="dark"`.
 
 ## License
 

package/dist/index.d.ts

@@ -1,7 +1,9 @@
-export { version } from "./__version__";
-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 { useTheme, updateTheme } from "./src/theme-hook";
-export { type ThemeConfig, type ThemeMode, type ThemeColor } from "./src/theme.config";
-export { ThemeProvider } from "./src/theme-provider";
+export { version } from './__version__';
+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 { useTheme, useThemeHue, useThemeMode } from './src/theme-hook';
+export { defaultThemeStorage } from './src/theme-storage';
+export type { ThemeStorage } from './src/theme-storage';
+export { type ThemeColor, type ThemeConfig, type ThemeMode } from './src/theme.config';
+export { ThemeProvider } from './src/theme-provider';

package/dist/index.js

@@ -1,6 +1,7 @@
-export { version } from "./__version__";
-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 { useTheme, updateTheme } from "./src/theme-hook";
-export { ThemeProvider } from "./src/theme-provider";
+export { version } from './__version__';
+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 { useTheme, useThemeHue, useThemeMode } from './src/theme-hook';
+export { defaultThemeStorage } from './src/theme-storage';
+export { ThemeProvider } from './src/theme-provider';

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "cyhip-dynamic-themes",
-    "version": "0.2.1",
+    "version": "1.0.0",
     "description": "Tailwind-powered dynamic color themes for React apps.",
     "author": "@KassioRF, @CyberHippie-io",
     "license": "MIT",
@@ -47,6 +47,7 @@
     },
     "scripts": {
         "build": "tsc --project tsconfig.json",
+        "dev": "tsc --watch -d",
         "start": "tsx ./index.ts",
         "prepublishOnly": "pnpm build"
     },
@@ -55,6 +56,8 @@
         "@types/node": "^20",
         "@types/react": "^18",
         "commander": "^12.1.0",
+        "react": "^19.2.3",
+        "react-dom": "^19.2.3",
         "ts-node": "^10.9.2",
         "tsx": "^4.19.1",
         "typescript": "^5.6.3"
@@ -63,14 +66,8 @@
         "chalk": "^5.3.0",
         "culori": "^4.0.1",
         "inquirer": "^12.0.0",
-        "react": "^18",
-        "react-dom": "^18",
         "zustand": "^5.0.1"
     },
-    "peerDependencies": {
-        "react": "^18",
-        "react-dom": "^18"
-    },
     "exports": {
         ".": {
             "import": {
@@ -82,5 +79,9 @@
                 "default": "./dist/index.js"
             }
         }
+    },
+    "peerDependencies": {
+        "react": "^19.2.3",
+        "react-dom": "^19.2.3"
     }
 }

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

@@ -0,0 +1,2 @@
+declare const appThemeProvider = "\n'use client';\nimport { ThemeProvider } from 'cyhip-dynamic-themes';\nimport { defaultTheme, themeStorage } from './theme.config';\n\nexport function AppThemeProvider({ children }: { children: React.ReactNode }) {\n    return (\n        <ThemeProvider themeConfig={defaultTheme} storage={themeStorage}>\n            {children}\n        </ThemeProvider>\n    );\n}\n    \n";
+export default appThemeProvider;

package/dist/src/_templates/app-theme-provider.js

@@ -0,0 +1,2 @@
+var appThemeProvider = "\n'use client';\nimport { ThemeProvider } from 'cyhip-dynamic-themes';\nimport { defaultTheme, themeStorage } from './theme.config';\n\nexport function AppThemeProvider({ children }: { children: React.ReactNode }) {\n    return (\n        <ThemeProvider themeConfig={defaultTheme} storage={themeStorage}>\n            {children}\n        </ThemeProvider>\n    );\n}\n    \n";
+export default appThemeProvider;

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: 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";
+declare const rootCss = "\n@import 'tailwindcss';\n@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));\n/* \n  --------------------------------------------------------------------------\n  Tailwind Theme Tokens\n  --------------------------------------------------------------------------\n\n  Defines the design tokens used by Tailwind utilities.\n\n  Example token:\n\n  --color-primary\n\n  Generates utilities like:\n\n    bg-primary\n    text-primary\n    border-primary\n\n  'inline' is important because values depend on runtime CSS vars\n  (--accent-*) injected by the dynamic theme library.\n\n  Accent palette\n  ----------------\n  Maps the dynamic palette to Tailwind colors.\n\n  Example utility usage:\n\n    bg-accent-500\n    text-accent-700\n\n  Semantic tokens\n  ----------------\n   UI roles instead of raw colors:\n\n    primary\n    secondary\n    background\n    foreground\n\n  Example:\n\n    <button class=\"bg-primary text-primary-foreground\">\n\n  Extend example:\n \n    --color-success: oklch(var(--success));\n      -> bg-success text-success\n\n*/\n\n@theme inline {\n    /* dynamic accent palette */\n    --color-accent-50: oklch(var(--accent-50));\n    --color-accent-100: oklch(var(--accent-100));\n    --color-accent-200: oklch(var(--accent-200));\n    --color-accent-300: oklch(var(--accent-300));\n    --color-accent-400: oklch(var(--accent-400));\n    --color-accent-500: oklch(var(--accent-500));\n    --color-accent-600: oklch(var(--accent-600));\n    --color-accent-700: oklch(var(--accent-700));\n    --color-accent-800: oklch(var(--accent-800));\n    --color-accent-900: oklch(var(--accent-900));\n    --color-accent-950: oklch(var(--accent-950));\n\n    /* semantic tokens */\n    --color-background: oklch(var(--background));\n    --color-foreground: oklch(var(--foreground));\n\n    --color-primary: oklch(var(--primary));\n    --color-primary-foreground: oklch(var(--primary-foreground));\n\n    --color-secondary: oklch(var(--secondary));\n    --color-secondary-foreground: oklch(var(--secondary-foreground));\n\n    --color-border: var(--border);\n    --color-ring: var(--ring);\n}\n\n/*\n --------------------------------------------------------------------------\n Light Theme Mapping\n --------------------------------------------------------------------------\n\n Maps the accent palette to semantic UI roles.\n\n Example mapping:\n\n   accent-500 \u2192 primary\n   accent-200 \u2192 secondary\n   accent-100 \u2192 background\n\n This allows changing the entire UI by only updating --accent-*\n variables injected by the theme library.\n\n Customize example:\n\n   --background: var(--accent-50);\n   --primary: var(--accent-600);\n\n*/\n:root {\n    --background: var(--accent-50);\n    --foreground: var(--accent-900);\n\n    --primary: var(--accent-500);\n    --primary-foreground: var(--accent-50);\n\n    --secondary: var(--accent-200);\n    --secondary-foreground: var(--accent-900);\n\n    --ring: oklch(var(--accent-500) / 0.2);\n    --border: oklch(var(--accent-950) / 0.2);\n}\n/*\n  --------------------------------------------------------------------------\n   Dark Theme Mapping\n  --------------------------------------------------------------------------\n \n  Overrides semantic tokens when .dark class is present.\n \n  Example:\n \n    <html class=\"dark\">\n \n  Strategy: \n    dark background -> darker accent\n    dark text -> lighter accent\n \n  Customize by remapping accent shades:\n \n    --background: var(--accent-950);\n \n*/\n[data-theme='dark'] {\n    --background: var(--accent-950);\n    --foreground: var(--accent-100);\n\n    --primary: var(--accent-500);\n    --primary-foreground: var(--accent-50);\n\n    --secondary: var(--accent-800);\n    --secondary-foreground: var(--accent-200);\n\n    --border: oklch(var(--accent-100) / 0.25);\n}\n\n/*\n  --------------------------------------------------------------------------\n   Base Layer\n  --------------------------------------------------------------------------\n  \n   Global low-level styles applied before utilities.\n  \n   Includes:\n  \n   - border color from theme token\n   - default outline color\n   - box-sizing reset\n  \n   Example:\n  \n    border -> uses --color-border\n  \n   Extend here for global resets like:\n  \n    fonts\n    scrollbar\n    selection\n  \n*/\n\n@layer base {\n    *,\n    ::before,\n    ::after {\n        box-sizing: border-box;\n        border-color: var(--color-border);\n        @apply outline-accent-500 dark:outline-accent-400;\n    }\n}\n\n/*\n  --------------------------------------------------------------------------\n   App Defaults\n  --------------------------------------------------------------------------\n  \n   Sets the main page background and text color using semantic tokens.  \n  \n*/\nbody {\n    @apply bg-background 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: 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";
+var rootCss = "\n@import 'tailwindcss';\n@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));\n/* \n  --------------------------------------------------------------------------\n  Tailwind Theme Tokens\n  --------------------------------------------------------------------------\n\n  Defines the design tokens used by Tailwind utilities.\n\n  Example token:\n\n  --color-primary\n\n  Generates utilities like:\n\n    bg-primary\n    text-primary\n    border-primary\n\n  'inline' is important because values depend on runtime CSS vars\n  (--accent-*) injected by the dynamic theme library.\n\n  Accent palette\n  ----------------\n  Maps the dynamic palette to Tailwind colors.\n\n  Example utility usage:\n\n    bg-accent-500\n    text-accent-700\n\n  Semantic tokens\n  ----------------\n   UI roles instead of raw colors:\n\n    primary\n    secondary\n    background\n    foreground\n\n  Example:\n\n    <button class=\"bg-primary text-primary-foreground\">\n\n  Extend example:\n \n    --color-success: oklch(var(--success));\n      -> bg-success text-success\n\n*/\n\n@theme inline {\n    /* dynamic accent palette */\n    --color-accent-50: oklch(var(--accent-50));\n    --color-accent-100: oklch(var(--accent-100));\n    --color-accent-200: oklch(var(--accent-200));\n    --color-accent-300: oklch(var(--accent-300));\n    --color-accent-400: oklch(var(--accent-400));\n    --color-accent-500: oklch(var(--accent-500));\n    --color-accent-600: oklch(var(--accent-600));\n    --color-accent-700: oklch(var(--accent-700));\n    --color-accent-800: oklch(var(--accent-800));\n    --color-accent-900: oklch(var(--accent-900));\n    --color-accent-950: oklch(var(--accent-950));\n\n    /* semantic tokens */\n    --color-background: oklch(var(--background));\n    --color-foreground: oklch(var(--foreground));\n\n    --color-primary: oklch(var(--primary));\n    --color-primary-foreground: oklch(var(--primary-foreground));\n\n    --color-secondary: oklch(var(--secondary));\n    --color-secondary-foreground: oklch(var(--secondary-foreground));\n\n    --color-border: var(--border);\n    --color-ring: var(--ring);\n}\n\n/*\n --------------------------------------------------------------------------\n Light Theme Mapping\n --------------------------------------------------------------------------\n\n Maps the accent palette to semantic UI roles.\n\n Example mapping:\n\n   accent-500 \u2192 primary\n   accent-200 \u2192 secondary\n   accent-100 \u2192 background\n\n This allows changing the entire UI by only updating --accent-*\n variables injected by the theme library.\n\n Customize example:\n\n   --background: var(--accent-50);\n   --primary: var(--accent-600);\n\n*/\n:root {\n    --background: var(--accent-50);\n    --foreground: var(--accent-900);\n\n    --primary: var(--accent-500);\n    --primary-foreground: var(--accent-50);\n\n    --secondary: var(--accent-200);\n    --secondary-foreground: var(--accent-900);\n\n    --ring: oklch(var(--accent-500) / 0.2);\n    --border: oklch(var(--accent-950) / 0.2);\n}\n/*\n  --------------------------------------------------------------------------\n   Dark Theme Mapping\n  --------------------------------------------------------------------------\n \n  Overrides semantic tokens when .dark class is present.\n \n  Example:\n \n    <html class=\"dark\">\n \n  Strategy: \n    dark background -> darker accent\n    dark text -> lighter accent\n \n  Customize by remapping accent shades:\n \n    --background: var(--accent-950);\n \n*/\n[data-theme='dark'] {\n    --background: var(--accent-950);\n    --foreground: var(--accent-100);\n\n    --primary: var(--accent-500);\n    --primary-foreground: var(--accent-50);\n\n    --secondary: var(--accent-800);\n    --secondary-foreground: var(--accent-200);\n\n    --border: oklch(var(--accent-100) / 0.25);\n}\n\n/*\n  --------------------------------------------------------------------------\n   Base Layer\n  --------------------------------------------------------------------------\n  \n   Global low-level styles applied before utilities.\n  \n   Includes:\n  \n   - border color from theme token\n   - default outline color\n   - box-sizing reset\n  \n   Example:\n  \n    border -> uses --color-border\n  \n   Extend here for global resets like:\n  \n    fonts\n    scrollbar\n    selection\n  \n*/\n\n@layer base {\n    *,\n    ::before,\n    ::after {\n        box-sizing: border-box;\n        border-color: var(--color-border);\n        @apply outline-accent-500 dark:outline-accent-400;\n    }\n}\n\n/*\n  --------------------------------------------------------------------------\n   App Defaults\n  --------------------------------------------------------------------------\n  \n   Sets the main page background and text color using semantic tokens.  \n  \n*/\nbody {\n    @apply bg-background text-foreground;\n    overflow-x: hidden;\n}\n\n";
 export default rootCss;

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 { 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";
+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 */\nimport { availableThemes, hueScheme } from '@/themes/theme.config';\nimport { useThemeHue, useThemeMode } from 'cyhip-dynamic-themes';\nimport { useMemo } from 'react';\n\nexport function ThemeSwitcher() {\n    return (\n        <div className=\"auto-cols grid grid-flow-row gap-2\">\n            <div className=\"rounded border\">\n                <ColorPaletteMenu />\n            </div>\n            <div>\n                <ThemeModeMenu />\n            </div>\n        </div>\n    );\n}\n\nfunction ColorPaletteMenu() {\n    const { hue, setThemeHue } = useThemeHue();\n\n    const selected = useMemo(\n        () => Object.keys(hueScheme).find((key) => hueScheme[key] === hue) ?? null,\n        [hue],\n    );\n\n    return (\n        <div className=\"m-3 grid auto-cols-max grid-flow-col gap-4\">\n            {Object.keys(availableThemes).map((key) => (\n                <button\n                    type=\"button\"\n                    key={key}\n                    className=\"relative cursor-pointer\"\n                    onClick={() => setThemeHue(hueScheme[key])}\n                >\n                    {selected === key && (\n                        <span className=\"border-accent-400 absolute -inset-1 block h-8 w-8 rounded-full border-2\" />\n                    )}\n                    <span\n                        className=\"block h-6 w-6 rounded-full\"\n                        style={{ background: availableThemes[key] }}\n                    />\n                </button>\n            ))}\n        </div>\n    );\n}\n\nfunction ThemeModeMenu() {\n    const { mode, setThemeMode } = useThemeMode();\n\n    const btnStyle = 'border px-2 py-2 rounded-md cursor-pointer hover:ring-1';\n    return (\n        <div className=\"m-2 flex justify-center gap-4\">\n            <button\n                type=\"button\"\n                className={`${btnStyle} ${mode === 'light' ? 'ring-1' : ''}`}\n                onClick={() => setThemeMode('light')}\n            >\n                Light\n            </button>\n            <button\n                type=\"button\"\n                className={`${btnStyle} ${mode === 'dark' ? 'ring-1' : ''}`}\n                onClick={() => setThemeMode('dark')}\n            >\n                Dark\n            </button>\n        </div>\n    );\n}\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 { 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";
+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 */\nimport { availableThemes, hueScheme } from '@/themes/theme.config';\nimport { useThemeHue, useThemeMode } from 'cyhip-dynamic-themes';\nimport { useMemo } from 'react';\n\nexport function ThemeSwitcher() {\n    return (\n        <div className=\"auto-cols grid grid-flow-row gap-2\">\n            <div className=\"rounded border\">\n                <ColorPaletteMenu />\n            </div>\n            <div>\n                <ThemeModeMenu />\n            </div>\n        </div>\n    );\n}\n\nfunction ColorPaletteMenu() {\n    const { hue, setThemeHue } = useThemeHue();\n\n    const selected = useMemo(\n        () => Object.keys(hueScheme).find((key) => hueScheme[key] === hue) ?? null,\n        [hue],\n    );\n\n    return (\n        <div className=\"m-3 grid auto-cols-max grid-flow-col gap-4\">\n            {Object.keys(availableThemes).map((key) => (\n                <button\n                    type=\"button\"\n                    key={key}\n                    className=\"relative cursor-pointer\"\n                    onClick={() => setThemeHue(hueScheme[key])}\n                >\n                    {selected === key && (\n                        <span className=\"border-accent-400 absolute -inset-1 block h-8 w-8 rounded-full border-2\" />\n                    )}\n                    <span\n                        className=\"block h-6 w-6 rounded-full\"\n                        style={{ background: availableThemes[key] }}\n                    />\n                </button>\n            ))}\n        </div>\n    );\n}\n\nfunction ThemeModeMenu() {\n    const { mode, setThemeMode } = useThemeMode();\n\n    const btnStyle = 'border px-2 py-2 rounded-md cursor-pointer hover:ring-1';\n    return (\n        <div className=\"m-2 flex justify-center gap-4\">\n            <button\n                type=\"button\"\n                className={`${btnStyle} ${mode === 'light' ? 'ring-1' : ''}`}\n                onClick={() => setThemeMode('light')}\n            >\n                Light\n            </button>\n            <button\n                type=\"button\"\n                className={`${btnStyle} ${mode === 'dark' ? 'ring-1' : ''}`}\n                onClick={() => setThemeMode('dark')}\n            >\n                Dark\n            </button>\n        </div>\n    );\n}\n\n\n";
 export default themeSwitcher;

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

@@ -1,2 +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";
+declare const themeConfig = "\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\nimport {\n    defaultThemeStorage,\n    getChroma,\n    type ThemeConfig,\n    type ThemeStorage,\n} from 'cyhip-dynamic-themes';\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/**\n * Declares the available color palette.\n */\n\ntype ITheme = {\n    [name: string]: string;\n};\n\nexport const availableThemes: ITheme = Object.keys(hueScheme).reduce((acc, key) => {\n    const hueValue = hueScheme[key];\n    acc[key] = 'oklch(' + getChroma(5, hueValue, chromaData) + ')';\n    return acc;\n}, {} as ITheme);\n\n/**\n * Default theme configuration used by the application.\n *\n * This serves as the base theme when the app initializes.\n * If theme storage is enabled and a user preference exists,\n * the stored values will override these defaults.\n *\n * You can customize this object to define the initial\n * color hue, mode (light/dark), and chroma settings\n * used throughout your application.\n */\nexport const defaultTheme: ThemeConfig = {\n    hue: 250,\n    mode: 'light',\n    chromaData: chromaData,\n};\n\n/**\n * Theme persistence handler.\n *\n * Defines how the user's theme preferences (hue and mode)\n * are loaded and saved.\n *\n * By default, the library provides a localStorage-based\n * implementation (defaultThemeStorage).\n *\n * If you prefer to manage persistence using a different\n * strategy (cookies, API, indexedDB, etc.), you can replace\n * this with your own ThemeStorage implementation.\n */\nexport const themeStorage: ThemeStorage = defaultThemeStorage;\n\n";
 export default themeConfig;

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

@@ -1,2 +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";
+var themeConfig = "\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\nimport {\n    defaultThemeStorage,\n    getChroma,\n    type ThemeConfig,\n    type ThemeStorage,\n} from 'cyhip-dynamic-themes';\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/**\n * Declares the available color palette.\n */\n\ntype ITheme = {\n    [name: string]: string;\n};\n\nexport const availableThemes: ITheme = Object.keys(hueScheme).reduce((acc, key) => {\n    const hueValue = hueScheme[key];\n    acc[key] = 'oklch(' + getChroma(5, hueValue, chromaData) + ')';\n    return acc;\n}, {} as ITheme);\n\n/**\n * Default theme configuration used by the application.\n *\n * This serves as the base theme when the app initializes.\n * If theme storage is enabled and a user preference exists,\n * the stored values will override these defaults.\n *\n * You can customize this object to define the initial\n * color hue, mode (light/dark), and chroma settings\n * used throughout your application.\n */\nexport const defaultTheme: ThemeConfig = {\n    hue: 250,\n    mode: 'light',\n    chromaData: chromaData,\n};\n\n/**\n * Theme persistence handler.\n *\n * Defines how the user's theme preferences (hue and mode)\n * are loaded and saved.\n *\n * By default, the library provides a localStorage-based\n * implementation (defaultThemeStorage).\n *\n * If you prefer to manage persistence using a different\n * strategy (cookies, API, indexedDB, etc.), you can replace\n * this with your own ThemeStorage implementation.\n */\nexport const themeStorage: ThemeStorage = defaultThemeStorage;\n\n";
 export default themeConfig;

package/dist/src/cli.js

@@ -35,38 +35,39 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         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 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";
+import chalk from 'chalk';
+import fs from 'fs';
+import inquirer from 'inquirer';
+import path from 'path';
+import appThemeProvider from './_templates/app-theme-provider.js';
+import rootCss from './_templates/root-css.js';
+import themeSwitcher from './_templates/theme-switcher.js';
+import themeConfig from './_templates/theme.config.js';
 var initThemesDirectory = function (themesDir) {
     if (!fs.existsSync(themesDir)) {
         fs.mkdirSync(themesDir);
-        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());
+        fs.writeFileSync(path.join(themesDir, 'theme.config.ts'), themeConfig.trim());
+        fs.writeFileSync(path.join(themesDir, 'root.css'), rootCss.trim());
+        fs.writeFileSync(path.join(themesDir, 'app-theme-provider.tsx'), appThemeProvider.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 ├── theme.config.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."));
+        console.log(chalk.cyan('\n\t /themes/\n' +
+            '\t ├── app-theme-provider.tsx\n' +
+            '\t ├── root.css\n' +
+            '\t ├── theme.config.ts\n' +
+            '\t └── theme-switcher.tsx\n'));
+        console.log(chalk.cyan("  1. 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("  2. Wrap your application with the AppThemeProvider in your base TSX file (Main.tsx, App.tsx, or Layout.tsx)."));
+        console.log(chalk.cyan("  3. Customize the color palette in /themes/theme.config.ts."));
+        console.log(chalk.cyan("  4. 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 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;
@@ -76,16 +77,16 @@ var askDirectory = function () { return __awaiter(void 0, void 0, void 0, functi
                 srcExists = checkSrcDirectory();
                 return [4 /*yield*/, inquirer.prompt([
                         {
-                            type: "list",
-                            name: "selectedDir",
-                            message: "Where would you like to initialize the themes directory?",
+                            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: './src (if exists)',
+                                    value: 'src',
+                                    disabled: !fs.existsSync(path.join(process.cwd(), 'src')),
                                 },
-                                { name: "./ (project root)", value: "." },
+                                { name: './ (project root)', value: '.' },
                             ],
                             default: srcExists,
                         },
@@ -103,13 +104,13 @@ var runInit = function () { return __awaiter(void 0, void 0, void 0, function ()
             case 0: return [4 /*yield*/, askDirectory()];
             case 1:
                 directory = _a.sent();
-                themesDir = path.join(process.cwd(), directory, "themes");
+                themesDir = path.join(process.cwd(), directory, 'themes');
                 initThemesDirectory(themesDir);
                 return [2 /*return*/];
         }
     });
 }); };
 var _a = process.argv, command = _a[2];
-if (command === "init") {
+if (command === 'init') {
     runInit();
 }

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

@@ -1,3 +1,4 @@
+import { ThemeConfig } from './theme.config';
 /**
  * getThemeProperties
  *
@@ -5,12 +6,12 @@
  *
  * - If `hue` is "-1", the theme is monochromatic, which affects the accent color behavior.
  * - Returns an object with:
- *    - `className`: A string containing the class for dark mode ("dark") or an empty string for light mode.
+ *    - `dataTheme`: A string containing the class for dark mode ("dark") or an empty string for light mode.
  *    - `style`: A record with dynamically generated CSS variables for the accent colors.
  *
  */
-export declare const getThemeProperties: (hue: number, darkMode: boolean, chromaData?: Record<number, number>) => {
-    className: string;
+export declare const getThemeProperties: (themeConfig: ThemeConfig) => {
+    dataTheme: string;
     style: Record<string, string>;
 };
 /**

package/dist/src/theme-helpers.js

@@ -1,5 +1,4 @@
 import { getVariables } from '../lib/tw-dynamic-themes/runtime';
-import { chromaData as defaultChromaData } from './theme.config';
 /**
  * getThemeProperties
  *
@@ -7,31 +6,25 @@ import { chromaData as defaultChromaData } from './theme.config';
  *
  * - If `hue` is "-1", the theme is monochromatic, which affects the accent color behavior.
  * - Returns an object with:
- *    - `className`: A string containing the class for dark mode ("dark") or an empty string for light mode.
+ *    - `dataTheme`: A string containing the class for dark mode ("dark") or an empty string for light mode.
  *    - `style`: A record with dynamically generated CSS variables for the accent colors.
  *
  */
-export var getThemeProperties = function (hue, darkMode, chromaData) {
-    if (chromaData === void 0) { chromaData = defaultChromaData; }
-    var whitePalette = hue == -1;
+export var getThemeProperties = function (themeConfig) {
+    var whitePalette = themeConfig.hue == -1;
+    var darkMode = themeConfig.mode == 'dark';
     var accent = getVariables({
         baseName: 'accent',
-        hue: hue,
-        chromaData: chromaData,
+        hue: themeConfig.hue,
+        chromaData: themeConfig.chromaData,
     });
-    // whitePalette have a different accent behavior for accent values
+    // white pallet have a different accent behavior
     if (whitePalette) {
-        accent.push([
-            '--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.push(['--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']);
     }
     return {
-        className: darkMode ? 'dark' : '',
+        dataTheme: darkMode ? 'dark' : 'light',
         style: Object.fromEntries(accent),
     };
 };

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

@@ -1,8 +1,20 @@
-import { ThemeConfig } from "./theme.config";
-declare const updateTheme: (themeConfig: ThemeConfig) => void;
+import { ThemeStorage } from './theme-storage';
+import { ThemeConfig, ThemeMode } from './theme.config';
 type ThemeState = {
     theme: ThemeConfig;
+    storage: ThemeStorage | null;
+    setStorage: (storage: ThemeStorage | null) => void;
     setTheme: (theme: ThemeConfig) => void;
+    setThemeHue: (hue: number) => void;
+    setThemeMode: (mode: ThemeMode) => void;
 };
 declare const useTheme: import("zustand").UseBoundStore<import("zustand").StoreApi<ThemeState>>;
-export { updateTheme, useTheme };
+declare const useThemeMode: () => {
+    mode: ThemeMode;
+    setThemeMode: (mode: ThemeMode) => void;
+};
+declare const useThemeHue: () => {
+    hue: number;
+    setThemeHue: (hue: number) => void;
+};
+export { useTheme, useThemeHue, useThemeMode };

package/dist/src/theme-hook.js

@@ -1,20 +1,65 @@
-import { getThemeProperties } from "./theme-helpers";
+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);
+};
 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);
+import { useShallow } from 'zustand/react/shallow';
+import { getThemeProperties } from './theme-helpers';
+import { chromaData } from './theme.config';
+var applyTheme = function (themeConfig, storage) {
+    var _a = getThemeProperties(themeConfig), dataTheme = _a.dataTheme, style = _a.style;
+    document.documentElement.setAttribute('data-theme', dataTheme);
     Object.entries(style).forEach(function (_a) {
         var key = _a[0], value = _a[1];
         document.documentElement.style.setProperty(key, value);
     });
+    if (storage) {
+        storage.save(themeConfig);
+    }
 };
-var useTheme = create(function (set, get) { return ({
+var useTheme = create(function (set) { return ({
     theme: { hue: 250, mode: 'light', chromaData: chromaData },
+    storage: null,
     setTheme: function (theme) {
-        set({ theme: theme });
-        updateTheme(theme);
+        set(function (state) {
+            applyTheme(theme, state.storage);
+            return { theme: theme };
+        });
+    },
+    setStorage: function (storage) {
+        set({ storage: storage });
+    },
+    setThemeHue: function (hue) {
+        set(function (state) {
+            var theme = __assign(__assign({}, state.theme), { hue: hue });
+            applyTheme(theme, state.storage);
+            return { theme: theme };
+        });
+    },
+    setThemeMode: function (mode) {
+        set(function (state) {
+            var theme = __assign(__assign({}, state.theme), { mode: mode });
+            applyTheme(theme, state.storage);
+            return { theme: theme };
+        });
     },
 }); });
-export { updateTheme, useTheme };
+/* selectors (derived hooks) */
+var themeModeSelector = function (s) { return ({
+    mode: s.theme.mode,
+    setThemeMode: s.setThemeMode,
+}); };
+var themeHueSelector = function (s) { return ({
+    hue: s.theme.hue,
+    setThemeHue: s.setThemeHue,
+}); };
+var useThemeMode = function () { return useTheme(useShallow(themeModeSelector)); };
+var useThemeHue = function () { return useTheme(useShallow(themeHueSelector)); };
+export { useTheme, useThemeHue, useThemeMode };

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

@@ -1,8 +1,9 @@
-import React, { type ReactNode } from 'react';
+import { ThemeStorage } from './theme-storage';
 import { ThemeConfig } from './theme.config';
 interface ThemeProviderProps {
-    children: ReactNode;
+    children: React.ReactNode;
     themeConfig: ThemeConfig;
+    storage?: ThemeStorage;
 }
-declare const ThemeProvider: React.FC<ThemeProviderProps>;
+declare function ThemeProvider({ children, themeConfig, storage }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element | null;
 export { ThemeProvider };

package/dist/src/theme-provider.js

@@ -1,20 +1,36 @@
+'use client'; // enable for next
+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);
+};
 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);
+import { useLayoutEffect, useState } from 'react';
+import { useTheme } from './theme-hook';
+function ThemeProvider(_a) {
+    var children = _a.children, themeConfig = _a.themeConfig, storage = _a.storage;
+    var _b = useTheme(), setStorage = _b.setStorage, setTheme = _b.setTheme;
+    var _c = useState(false), ready = _c[0], setReady = _c[1];
+    useLayoutEffect(function () {
+        var theme = themeConfig;
+        setStorage(storage !== null && storage !== void 0 ? storage : null);
+        if (storage) {
+            var stored = storage.load();
+            if (stored) {
+                theme = __assign(__assign({}, themeConfig), stored);
+            }
         }
-    }, [theme, isInitialized]);
-    if (!isInitialized)
+        setTheme(theme);
+        setReady(true);
+    }, [themeConfig, storage, setTheme]);
+    if (!ready)
         return null;
     return _jsx(_Fragment, { children: children });
-};
+}
 export { ThemeProvider };

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

@@ -0,0 +1,11 @@
+import { ThemeConfig } from './theme.config';
+type ThemeStorageData = {
+    mode: 'light' | 'dark';
+    hue: number;
+};
+export type ThemeStorage = {
+    load: () => ThemeStorageData | null;
+    save: (theme: ThemeConfig) => void;
+};
+export declare const defaultThemeStorage: ThemeStorage;
+export {};

package/dist/src/theme-storage.js

@@ -0,0 +1,23 @@
+var STORAGE_KEY = 'app-theme';
+var loadStoredTheme = function () {
+    try {
+        var raw = localStorage.getItem(STORAGE_KEY);
+        if (!raw)
+            return null;
+        return JSON.parse(raw);
+    }
+    catch (_a) {
+        return null;
+    }
+};
+var saveStoredTheme = function (theme) {
+    var data = {
+        mode: theme.mode,
+        hue: theme.hue,
+    };
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+};
+export var defaultThemeStorage = {
+    load: loadStoredTheme,
+    save: saveStoredTheme,
+};

package/package.json

@@ -1,85 +1,87 @@
 {
-  "name": "cyhip-dynamic-themes",
-  "version": "0.2.1",
-  "description": "Tailwind-powered dynamic color themes for React apps.",
-  "author": "@KassioRF, @CyberHippie-io",
-  "license": "MIT",
-  "repository": {
-    "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",
-    "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": "^20",
-    "@types/react": "^18",
-    "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",
-    "react-dom": "^18",
-    "zustand": "^5.0.1"
-  },
-  "peerDependencies": {
-    "react": "^18",
-    "react-dom": "^18"
-  },
-  "exports": {
-    ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      }
+    "name": "cyhip-dynamic-themes",
+    "version": "1.0.0",
+    "description": "Tailwind-powered dynamic color themes for React apps.",
+    "author": "@KassioRF, @CyberHippie-io",
+    "license": "MIT",
+    "repository": {
+        "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",
+        "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",
+        "dev": "tsc --watch -d",
+        "start": "tsx ./index.ts",
+        "prepublishOnly": "pnpm build"
+    },
+    "devDependencies": {
+        "@types/culori": "^2.1.1",
+        "@types/node": "^20",
+        "@types/react": "^18",
+        "commander": "^12.1.0",
+        "react": "^19.2.3",
+        "react-dom": "^19.2.3",
+        "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",
+        "zustand": "^5.0.1"
+    },
+    "exports": {
+        ".": {
+            "import": {
+                "types": "./dist/index.d.ts",
+                "default": "./dist/index.js"
+            },
+            "require": {
+                "types": "./dist/index.d.ts",
+                "default": "./dist/index.js"
+            }
+        }
+    },
+    "peerDependencies": {
+        "react": "^19.2.3",
+        "react-dom": "^19.2.3"
     }
-  },
-  "scripts": {
-    "build": "tsc --project tsconfig.json",
-    "start": "tsx ./index.ts"
-  }
-}
+}

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

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

@@ -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, 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/theme-colors.d.ts

@@ -1,2 +0,0 @@
-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 +0,0 @@
-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/theme.types.d.ts

@@ -1,9 +0,0 @@
-/**
- * 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

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