cyhip-dynamic-themes 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +51 -5
- package/dist/package.json +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -55,7 +55,7 @@ This command generates the following files in the `/themes/` folder:
|
|
|
55
55
|
|
|
56
56
|
```bash
|
|
57
57
|
/themes/
|
|
58
|
-
├──
|
|
58
|
+
├── theme.config.ts.ts # To set your available hue-based colors.
|
|
59
59
|
├── root.css # Main CSS file for styling.
|
|
60
60
|
├── theme-colors.ts # Includes color definitions for Tailwind.
|
|
61
61
|
└── theme-switcher.tsx # Example component for theme switching.
|
|
@@ -84,6 +84,8 @@ export default {
|
|
|
84
84
|
|
|
85
85
|
**Note:** After updating the configuration, restart your application to apply the changes.
|
|
86
86
|
|
|
87
|
+
|
|
88
|
+
|
|
87
89
|
### Import `root.css`
|
|
88
90
|
|
|
89
91
|
To apply CSS styles linked to the defined themes, add `/themes/root.css` to your root TSX file:
|
|
@@ -104,6 +106,36 @@ createRoot(document.getElementById("root")!).render(
|
|
|
104
106
|
);
|
|
105
107
|
```
|
|
106
108
|
|
|
109
|
+
|
|
110
|
+
### Theme Provider
|
|
111
|
+
|
|
112
|
+
Use the `ThemeProvider` to initialize a default theme.
|
|
113
|
+
|
|
114
|
+
```tsx
|
|
115
|
+
// src/main.tsx
|
|
116
|
+
import { ThemeConfig, ThemeProvider } from 'cyhip-dynamic-themes';
|
|
117
|
+
import { chromaData, hueScheme } from './themes/theme.config.ts';
|
|
118
|
+
|
|
119
|
+
import './index.css';
|
|
120
|
+
|
|
121
|
+
createRoot(document.getElementById('root')!).render(
|
|
122
|
+
<StrictMode>
|
|
123
|
+
<ThemeProvider
|
|
124
|
+
themeConfig={
|
|
125
|
+
{
|
|
126
|
+
hue: hueScheme.default,
|
|
127
|
+
mode: 'light',
|
|
128
|
+
chromaData: chromaData,
|
|
129
|
+
} as ThemeConfig
|
|
130
|
+
}
|
|
131
|
+
>
|
|
132
|
+
<App />
|
|
133
|
+
</ThemeProvider>
|
|
134
|
+
</StrictMode>
|
|
135
|
+
);
|
|
136
|
+
|
|
137
|
+
```
|
|
138
|
+
|
|
107
139
|
### Switching Themes Dynamically
|
|
108
140
|
|
|
109
141
|
Switching the main color palette can be done using the `ThemeSwitcher` component. Here's a basic example to illustrate its use:
|
|
@@ -164,22 +196,36 @@ export { hueScheme };
|
|
|
164
196
|
|
|
165
197
|
## API
|
|
166
198
|
|
|
167
|
-
### `
|
|
199
|
+
### `Type ThemeConfig`
|
|
200
|
+
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.
|
|
201
|
+
|
|
202
|
+
- **Properties:**
|
|
203
|
+
|
|
204
|
+
- `hue`: `number`
|
|
205
|
+
It determines the primary color base; if set to -1, the theme uses a white color based scheme.
|
|
206
|
+
|
|
207
|
+
- `mode`: `'light' | 'dark'`
|
|
208
|
+
Defines whether the theme is in "light" or "dark" mode. Acceptable
|
|
209
|
+
|
|
210
|
+
- `chromaData`: `Record<number,number>`
|
|
211
|
+
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.
|
|
212
|
+
|
|
213
|
+
### `useColorTheme(theme: ThemeConfig)`
|
|
168
214
|
|
|
169
215
|
A custom hook that manages the application of color themes based on the provided HUE value and dark mode setting.
|
|
170
216
|
|
|
171
|
-
- **Note**: Dispatches a custom event `themeChange` when the theme changes.
|
|
172
217
|
|
|
173
|
-
### `getThemeProperties(hue: number, darkMode: boolean)`
|
|
218
|
+
### `getThemeProperties(hue: number, darkMode: boolean, chromaData: Record<number,number>)`
|
|
174
219
|
|
|
175
220
|
Defines CSS class and style properties based on the provided HUE value and dark mode setting.
|
|
176
221
|
|
|
177
222
|
- **Parameters:**
|
|
178
223
|
|
|
179
|
-
- `hue
|
|
224
|
+
- `hue`
|
|
180
225
|
|
|
181
226
|
- `darkMode`: A boolean indicating if dark mode is active.
|
|
182
227
|
|
|
228
|
+
- `chromaData`
|
|
183
229
|
- **Returns:**
|
|
184
230
|
|
|
185
231
|
- An object containing:
|
package/dist/package.json
CHANGED