Skip to content

Commit 8ec8fd7

Browse files
committed
Refactor theme management and customization in PagBank SDK
- Removed predefined themes from the library and transitioned to a fully customizable theme approach. - Updated README and STYLING_GUIDE to reflect new theme creation methods and examples. - Simplified theme application in example app, ensuring themes are applied on initialization. - Enhanced theme utility functions for better validation and merging of themes. - Cleaned up example components to focus on dynamic theme switching and customization. - Removed obsolete StyleExampleNew component to streamline codebase.
1 parent 777b37d commit 8ec8fd7

File tree

9 files changed

+341
-663
lines changed

9 files changed

+341
-663
lines changed

README.md

Lines changed: 23 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -191,12 +191,9 @@ Customize the appearance of PagBank SDK modal dialogs to match your app's design
191191
### ⚡ Quick Theme Setup
192192

193193
```typescript
194-
import { setStyleTheme, PlugPagThemes } from 'react-native-plugpag-nitro';
194+
import { setStyleTheme } from 'react-native-plugpag-nitro';
195195

196-
// Apply predefined dark theme (matches the modal above)
197-
await setStyleTheme(PlugPagThemes.DARK_THEME);
198-
199-
// Or create a custom theme
196+
// Create and apply a custom theme
200197
await setStyleTheme({
201198
headBackgroundColor: '#1A1A1D', // Header background
202199
headTextColor: '#FFFFFF', // Header text
@@ -207,31 +204,20 @@ await setStyleTheme({
207204
});
208205
```
209206

210-
### 🎯 Available Themes
211-
212-
| Theme | Description | Use Case |
213-
|-------|-------------|----------|
214-
| `DARK_THEME` | Dark theme matching modern apps | Apps with dark UI |
215-
| `LIGHT_THEME` | Clean light theme | Apps with light UI |
216-
| `PAGBANK_THEME` | Official PagBank colors | Brand consistency |
217-
| `HIGH_CONTRAST_THEME` | Accessibility-focused | Better accessibility |
218-
219207
### 🛠️ Custom Theme Creation
220208

221-
```typescript
222-
// Brand-based theme
223-
const customTheme = PlugPagThemes.createCustomTheme(
224-
'#00D4FF', // Your primary brand color
225-
'#1A1A1D', // Background color
226-
'#FFFFFF', // Text color
227-
true // Use dark theme as base
228-
);
209+
Create themes that match your app's design system:
229210

230-
// Monochromatic theme
231-
const monoTheme = PlugPagThemes.createMonochromaticTheme(
232-
'#7C3AED', // Base purple color
233-
true // Dark variant
234-
);
211+
```typescript
212+
// Create a custom brand-based theme
213+
const customTheme = {
214+
headBackgroundColor: '#00D4FF', // Your primary brand color
215+
headTextColor: '#FFFFFF', // White text on colored header
216+
contentTextColor: '#1A1A1D', // Dark text for body content
217+
positiveButtonBackground: '#00D4FF', // Consistent brand color
218+
negativeButtonBackground: '#EF4444', // Standard red for cancel
219+
lineColor: '#E5E7EB' // Light gray for borders
220+
};
235221

236222
await setStyleTheme(customTheme);
237223
```
@@ -284,7 +270,7 @@ if (errors.length === 0) {
284270

285271
// Merge themes
286272
const customizedTheme = ThemeUtils.mergeThemes(
287-
PlugPagThemes.DARK_THEME,
273+
baseTheme, // Your base theme
288274
{ positiveButtonBackground: '#FF6B6B' }
289275
);
290276

@@ -305,14 +291,21 @@ console.log(preview); // { headBackgroundColor: '#1A1A1D', ... }
305291

306292
```typescript
307293
import React, { useEffect } from 'react';
308-
import { setStyleTheme, PlugPagThemes } from 'react-native-plugpag-nitro';
294+
import { setStyleTheme } from 'react-native-plugpag-nitro';
309295

310296
export default function App() {
311297
useEffect(() => {
312298
// Apply theme matching your app's design
313299
const initializeTheme = async () => {
314300
try {
315-
await setStyleTheme(PlugPagThemes.DARK_THEME);
301+
const customTheme = {
302+
headBackgroundColor: '#1A1A1D',
303+
headTextColor: '#FFFFFF',
304+
positiveButtonBackground: '#22C55E',
305+
negativeButtonBackground: '#EF4444'
306+
};
307+
308+
await setStyleTheme(customTheme);
316309
console.log('Theme applied successfully');
317310
} catch (error) {
318311
console.error('Failed to apply theme:', error);

0 commit comments

Comments
 (0)