@razzusharma/accent-theme 1.0.1 → 1.0.2
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 +1 -38
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
<<<<<<< HEAD
|
|
2
|
-
# @razzu/accent-theme
|
|
3
|
-
=======
|
|
4
1
|
# @razzusharma/accent-theme
|
|
5
|
-
>>>>>>> a4f8ab5 (updating readme)
|
|
6
2
|
|
|
7
3
|
A React hook and provider for dynamic accent color theming. Perfect for adding customizable color themes to your React applications.
|
|
8
4
|
|
|
@@ -19,20 +15,11 @@ A React hook and provider for dynamic accent color theming. Perfect for adding c
|
|
|
19
15
|
## Installation
|
|
20
16
|
|
|
21
17
|
```bash
|
|
22
|
-
<<<<<<< HEAD
|
|
23
|
-
npm install @razzu/accent-theme
|
|
24
|
-
# or
|
|
25
|
-
yarn add @razzu/accent-theme
|
|
26
|
-
# or
|
|
27
|
-
pnpm add @razzu/accent-theme
|
|
28
|
-
=======
|
|
29
18
|
npm install @razzusharma/accent-theme
|
|
30
19
|
# or
|
|
31
20
|
yarn add @razzusharma/accent-theme
|
|
32
21
|
# or
|
|
33
22
|
pnpm add @razzusharma/accent-theme
|
|
34
|
-
|
|
35
|
-
>>>>>>> a4f8ab5 (updating readme)
|
|
36
23
|
```
|
|
37
24
|
|
|
38
25
|
## Quick Start
|
|
@@ -40,12 +27,8 @@ pnpm add @razzusharma/accent-theme
|
|
|
40
27
|
### 1. Wrap your app with the provider
|
|
41
28
|
|
|
42
29
|
```tsx
|
|
43
|
-
<<<<<<< HEAD
|
|
44
|
-
import { AccentThemeProvider } from '@razzu/accent-theme';
|
|
45
|
-
|
|
46
|
-
=======
|
|
47
30
|
import { AccentThemeProvider } from '@razzusharma/accent-theme';
|
|
48
|
-
|
|
31
|
+
|
|
49
32
|
function App() {
|
|
50
33
|
return (
|
|
51
34
|
<AccentThemeProvider>
|
|
@@ -53,17 +36,12 @@ function App() {
|
|
|
53
36
|
</AccentThemeProvider>
|
|
54
37
|
);
|
|
55
38
|
}
|
|
56
|
-
|
|
57
39
|
```
|
|
58
40
|
|
|
59
41
|
### 2. Use the hook in your components
|
|
60
42
|
|
|
61
43
|
```tsx
|
|
62
|
-
<<<<<<< HEAD
|
|
63
|
-
import { useAccentTheme, useAccentColor } from '@razzu/accent-theme';
|
|
64
|
-
=======
|
|
65
44
|
import { useAccentTheme, useAccentColor } from '@razzusharma/accent-theme';
|
|
66
|
-
>>>>>>> a4f8ab5 (updating readme)
|
|
67
45
|
|
|
68
46
|
function MyComponent() {
|
|
69
47
|
const { accentColor, setAccentColor } = useAccentTheme();
|
|
@@ -78,17 +56,12 @@ function MyComponent() {
|
|
|
78
56
|
</div>
|
|
79
57
|
);
|
|
80
58
|
}
|
|
81
|
-
|
|
82
59
|
```
|
|
83
60
|
|
|
84
61
|
### 3. Use the built-in color picker
|
|
85
62
|
|
|
86
63
|
```tsx
|
|
87
|
-
<<<<<<< HEAD
|
|
88
|
-
import { AccentColorPicker } from '@razzu/accent-theme';
|
|
89
|
-
=======
|
|
90
64
|
import { AccentColorPicker } from '@razzusharma/accent-theme';
|
|
91
|
-
>>>>>>> a4f8ab5 (updating readme)
|
|
92
65
|
|
|
93
66
|
function Settings() {
|
|
94
67
|
return (
|
|
@@ -98,7 +71,6 @@ function Settings() {
|
|
|
98
71
|
</div>
|
|
99
72
|
);
|
|
100
73
|
}
|
|
101
|
-
|
|
102
74
|
```
|
|
103
75
|
|
|
104
76
|
## Configuration
|
|
@@ -115,11 +87,7 @@ function Settings() {
|
|
|
115
87
|
### Custom Colors
|
|
116
88
|
|
|
117
89
|
```tsx
|
|
118
|
-
<<<<<<< HEAD
|
|
119
|
-
import { AccentThemeProvider } from '@razzu/accent-theme';
|
|
120
|
-
=======
|
|
121
90
|
import { AccentThemeProvider } from '@razzusharma/accent-theme';
|
|
122
|
-
>>>>>>> a4f8ab5 (updating readme)
|
|
123
91
|
|
|
124
92
|
const customColors = {
|
|
125
93
|
coral: {
|
|
@@ -142,7 +110,6 @@ function App() {
|
|
|
142
110
|
</AccentThemeProvider>
|
|
143
111
|
);
|
|
144
112
|
}
|
|
145
|
-
|
|
146
113
|
```
|
|
147
114
|
|
|
148
115
|
## CSS Variables
|
|
@@ -231,8 +198,4 @@ module.exports = {
|
|
|
231
198
|
|
|
232
199
|
## License
|
|
233
200
|
|
|
234
|
-
<<<<<<< HEAD
|
|
235
|
-
MIT © razzu
|
|
236
|
-
=======
|
|
237
201
|
MIT © razzusharma
|
|
238
|
-
>>>>>>> a4f8ab5 (updating readme)
|