@igorvaryvoda/sirv-upload-widget 0.1.3 → 0.1.4
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 +34 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,6 +10,7 @@ A React file upload widget for [Sirv CDN](https://sirv.com) with batch uploads,
|
|
|
10
10
|
- **Sirv file picker** to browse existing files
|
|
11
11
|
- **HEIC/HEIF conversion** for iPhone photos
|
|
12
12
|
- **Presigned URL support** for secure direct uploads
|
|
13
|
+
- **Dark mode** with automatic system preference detection
|
|
13
14
|
- **Customizable styling** via CSS variables
|
|
14
15
|
- **TypeScript** support with full type definitions
|
|
15
16
|
|
|
@@ -98,6 +99,7 @@ export default function UploadPage() {
|
|
|
98
99
|
| `onConflict` | `'overwrite' \| 'rename' \| 'skip' \| 'ask'` | `'rename'` | Filename conflict handling |
|
|
99
100
|
| `disabled` | `boolean` | `false` | Disable the widget |
|
|
100
101
|
| `compact` | `boolean` | `false` | Compact mode for smaller spaces |
|
|
102
|
+
| `theme` | `'auto' \| 'light' \| 'dark'` | `'auto'` | Color theme (auto follows system preference) |
|
|
101
103
|
| `labels` | `object` | - | Custom labels for i18n |
|
|
102
104
|
| `className` | `string` | - | Custom CSS class |
|
|
103
105
|
|
|
@@ -112,6 +114,25 @@ features?: {
|
|
|
112
114
|
}
|
|
113
115
|
```
|
|
114
116
|
|
|
117
|
+
## Dark Mode
|
|
118
|
+
|
|
119
|
+
The widget supports dark mode out of the box with three options:
|
|
120
|
+
|
|
121
|
+
```tsx
|
|
122
|
+
// Auto (default) - follows system preference
|
|
123
|
+
<SirvUploader theme="auto" ... />
|
|
124
|
+
|
|
125
|
+
// Force light mode
|
|
126
|
+
<SirvUploader theme="light" ... />
|
|
127
|
+
|
|
128
|
+
// Force dark mode
|
|
129
|
+
<SirvUploader theme="dark" ... />
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
Dark mode automatically activates when:
|
|
133
|
+
- `theme="auto"` (default) and the user's system prefers dark mode
|
|
134
|
+
- `theme="dark"` is explicitly set
|
|
135
|
+
|
|
115
136
|
## Styling
|
|
116
137
|
|
|
117
138
|
Customize the widget using CSS variables:
|
|
@@ -128,6 +149,19 @@ Customize the widget using CSS variables:
|
|
|
128
149
|
}
|
|
129
150
|
```
|
|
130
151
|
|
|
152
|
+
For dark mode customization, override the dark theme variables:
|
|
153
|
+
|
|
154
|
+
```css
|
|
155
|
+
@media (prefers-color-scheme: dark) {
|
|
156
|
+
.sirv-uploader {
|
|
157
|
+
--sirv-primary: #3b82f6;
|
|
158
|
+
--sirv-bg: #1e1e1e;
|
|
159
|
+
--sirv-text: #e5e5e5;
|
|
160
|
+
/* ... */
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
```
|
|
164
|
+
|
|
131
165
|
## Individual Components
|
|
132
166
|
|
|
133
167
|
For custom layouts, you can use the components individually:
|
package/package.json
CHANGED