Theme Customization
Relevant source files
The following files were used as context for generating this wiki page:
The Theme Customization system provides a robust framework for managing the visual appearance of the wedding invitation application. It enables users to switch between predefined aesthetic presets or granularly control colors, typography, border styles, and animation intensities. This system ensures a consistent brand identity across both the administrative dashboard and the public invitation page.
The architecture relies on a centralized React Context that synchronizes state with CSS custom properties (variables), allowing real-time visual updates across the application without full-page reloads.
Sources: src/context/ThemeContext.jsx, src/components/admin/ThemeEditor.jsx
Core Architecture
The system follows a "Provider-Consumer" pattern where the ThemeProvider manages the global theme state and distributes it via the useTheme hook. The state is persisted in localStorage to maintain user preferences across sessions.
Data Flow and Persistence
When a user modifies a theme setting in the ThemeEditor, the change flows through the ThemeContext and is immediately applied to the DOM root.
The ThemeProvider uses a useEffect hook to map the JavaScript theme object to CSS variables defined in the document root.
Sources: src/context/ThemeContext.jsx:167-195, src/components/admin/ThemeEditor.jsx:119-128
Theme Definitions and Presets
The system includes several built-in presets that define a complete visual identity, including color palettes, font pairings, and UI characteristics.
Preset Themes
| Preset Key | Name | Primary Color | Secondary Color | Default Style |
|---|---|---|---|---|
classic | Clásico Dorado | #D4AF37 | #FFF8E7 | Rounded / Normal Anim |
romantic | Rosa Romántico | #E91E63 | #FFF0F5 | Rounded / Normal Anim |
elegant | Negro Elegante | #000000 | #F5F5F5 | Soft / Subtle Anim |
nature | Verde Natural | #2E7D32 | #F1F8E9 | Rounded / Normal Anim |
ocean | Azul Océano | #1976D2 | #E3F2FD | Rounded / Normal Anim |
sunset | Atardecer | #FF5722 | #FFF3E0 | Rounded / Dynamic Anim |
Sources: src/context/ThemeContext.jsx:6-107
Typography and Styling Options
The theme engine supports dynamic font loading and structural UI adjustments like border radius and animation speed.
Font Management
The application supports distinct fonts for headings and body text. The ThemeProvider monitors these values and dynamically injects Google Font <link> tags into the document head to ensure assets are only loaded when needed.
Sources: src/context/ThemeContext.jsx:198-212
Visual Constraints
| Property | Options | CSS / Value Mapping |
|---|---|---|
| Border Radius | none, minimal, soft, rounded, pill | 0, 0.25rem, 0.5rem, 1rem, 9999px |
| Animation Intensity | none, subtle, normal, dynamic | 0ms, 300ms, 500ms, 800ms |
Sources: src/context/ThemeContext.jsx:136-150
Implementation Details
CSS Variable Integration
Tailwind CSS is configured to use these dynamic variables. This allows the use of utility classes like bg-theme-primary or rounded-theme while the actual values remain dynamic.
// tailwind.config.js
theme: {
extend: {
colors: {
theme: {
primary: 'var(--color-primary)',
background: 'var(--color-background)',
text: 'var(--color-text)',
}
},
borderRadius: {
'theme': 'var(--border-radius)',
}
}
}
Sources: tailwind.config.js:15-26, src/index.css:10-22
Component Usage
Public-facing components like the Hero section consume the theme to apply specific styles, such as gradients that transition into the theme's secondary background color.
// src/components/invitation/Hero.jsx
<div
className="absolute inset-0"
style={{
background: `linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.2), ${theme.secondary}e6)`
}}
/>
Sources: src/components/invitation/Hero.jsx:36-40
Administration Interface
The ThemeEditor component provides the UI for these customizations, organized into four main tabs:
- Temas (Presets): Quick selection of predefined themes.
- Colores (Colors): Hex color pickers for primary, accent, background, and text colors.
- Fuentes (Fonts): Selectors for heading and body typography with live previews.
- Estilo (Style): Visual selectors for border rounding and animation behavior.
Sources: src/components/admin/ThemeEditor.jsx:132-145, src/components/admin/ContentEditor.jsx:631
Summary
The Theme Customization system acts as a bridge between administrative settings and the user-facing invitation. By utilizing React Context for state and CSS Variables for styling, the project achieves a high degree of flexibility and performance, allowing for a fully personalized wedding invitation experience.