Customizing Theme

Learn how to customize colors and visual styling in PROVESA Web

PROVESA Web features a powerful theme customization system that allows you to adjust the visual appearance of your site in real-time through the admin panel.

Theme System Overview

The theme customization system provides:

• Live Color Editing: Change colors and see updates in real-time
• Database Persistence: Theme settings saved to PostgreSQL
• CSS Variable Integration: Colors injected as CSS custom properties
• Global Application: Changes apply site-wide automatically
• Visual Preview: See color samples before applying

Accessing Theme Customization

1. Navigate to Admin Panel

   Log in and access /admin dashboard.

2. Open Personalization

   Click Personalización in the left sidebar (palette icon).

3. View Color Editor

   The theme customization interface displays all editable color options.

Color Options

Four primary color variables control the site appearance:

1. Primary Color (Color Primario)

Usage: Main brand color used throughout the site

Applied to:

• Admin sidebar active state
• Primary buttons and CTAs
• Links and interactive elements
• Icons and accents
• Admin panel highlights

Default: #0052A5 (Blue)

The primary color should be your main brand color and have good contrast with white text.

2. Secondary Color (Color Secundario)

Usage: Secondary brand color for action buttons

Applied to:

• Secondary call-to-action buttons
• Highlight elements
• Interactive components
• Badge backgrounds

Default: #455dd9 (Purple-Blue)

3. Accent Color (Color de Acento)

Usage: Used for alerts, warnings, and important notices

Applied to:

• Error messages and alerts
• Warning indicators
• Notification badges
• Important highlights
• Unread counters

Default: #E4002B (Red)

The accent color is typically used sparingly for elements that need immediate attention.

4. Background Color (Fondo de Landing)

Usage: Base background color for landing page sections

Applied to:

• Section backgrounds
• Page container backgrounds
• Content area bases

Default: #F8FAFC (Light Gray)

Changing Theme Colors

Using the Color Picker

1. Click Color Swatch

   Click on the large color square for the color you want to change.

2. Select Color

   Use the browser’s color picker to choose your desired color:

   • Use the color wheel/slider
   • Enter hex values manually
   • Adjust hue, saturation, lightness
3. Preview Changes

   The color updates in real-time in the preview area.

4. Apply Changes

   Click “Aplicar Cambios” to save the new color scheme.

Using Hex Values

You can also enter hex color codes directly:

Manual Entry

1. Locate the hex input field below each color picker
2. Click to edit the current value
3. Enter your hex code (e.g., #FF5733)
4. Press Enter or click outside to apply

Common Formats

Supported color formats:

• 6-digit hex: #FF5733
• 3-digit hex: #F73 (shorthand)
• With transparency: #FF5733CC

Always include the # symbol before hex codes.

Color Theory Best Practices

Choosing Effective Colors

Brand Consistency

• Use colors from your existing brand guidelines
• Maintain consistency with logo colors
• Consider psychological impact of colors
• Test colors across different devices and screens

Contrast and Accessibility

• Ensure sufficient contrast for text readability
• Test with WCAG contrast checker tools
• Aim for 4.5:1 contrast ratio minimum
• Consider colorblind users (avoid red/green reliance)
• Use tools like WebAIM Contrast Checker

Color Harmony

Complementary: Colors opposite on color wheel

• Example: Blue (#0052A5) + Orange (#FF8C00)

Analogous: Colors next to each other

• Example: Blue (#0052A5) + Teal (#0088A5)

Triadic: Three colors evenly spaced

• Example: Blue, Red, Yellow

Use tools like Adobe Color to create harmonious palettes.

Recommended Color Combinations

Professional Blue

• Primary: #1565C0 (Deep Blue)
• Secondary: #42A5F5 (Light Blue)
• Accent: #F57C00 (Orange)
• Background: #FAFAFA (Off-White)

Modern Green

• Primary: #2E7D32 (Forest Green)
• Secondary: #66BB6A (Light Green)
• Accent: #D32F2F (Red)
• Background: #F1F8E9 (Light Green)

Elegant Purple

• Primary: #6A1B9A (Deep Purple)
• Secondary: #AB47BC (Light Purple)
• Accent: #FFA000 (Amber)
• Background: #F3E5F5 (Pale Purple)

Corporate Gray

• Primary: #424242 (Dark Gray)
• Secondary: #757575 (Medium Gray)
• Accent: #2196F3 (Blue)
• Background: #FAFAFA (Off-White)

How Theme Colors Work

CSS Custom Properties

Theme colors are injected as CSS variables in the <head> of every page:

<style>
  :root {
    --color-primary: #0052A5;
    --color-secondary: #455dd9;
    --color-accent: #E4002B;
    --color-background: #F8FAFC;
  }
</style>

Tailwind Integration

Colors are available in Tailwind CSS classes:

• bg-primary - Background using primary color
• text-primary - Text using primary color
• border-primary - Border using primary color
• ring-primary - Ring/outline using primary color

Same patterns apply for secondary, accent, and background.

Database Storage

Theme settings are stored in the theme table:

Column	Type	Description
id	integer	Unique identifier
primary	text	Primary color hex
secondary	text	Secondary color hex
accent	text	Accent color hex
background	text	Background color hex
updatedAt	timestamp	Last update time

Previewing Changes

The admin panel provides visual feedback:

Color Preview Indicators

Each color option shows:

1. Color Dot: Small circle displaying current color
2. Hex Input: Editable hex value field
3. Color Picker: Large clickable swatch
4. Usage Description: Where the color is applied

Real-Time Updates

When editing colors:

• Input changes update immediately in local state
• Preview shows color as you adjust
• Final save applies globally

Changes are only visible in your session until you click “Aplicar Cambios”.

Saving and Applying Changes

1. Make Color Adjustments

   Use color pickers or hex inputs to select your desired colors.

2. Review Preview

   Check the preview indicators to confirm your selections.

3. Click Apply Changes

   Click the “Aplicar Cambios” button at the bottom of the form.

4. Wait for Confirmation

   A success message appears: “Cambios guardados” with a green checkmark.

5. Verify Public Site

   Visit your public site to see the new colors applied.

Save Process

When you click “Aplicar Cambios”:

1. Form submits to ?/updateTheme action
2. Server validates color values
3. Database updates with new colors
4. Page reloads with updated theme
5. CSS variables regenerate with new values

Reverting Changes

If you want to undo theme changes:

Before Saving

• Simply reload the page to discard unsaved changes
• Or click a different sidebar item without saving

After Saving

1. Note Current Colors

   Take note of the colors you want to revert to.

2. Re-enter Original Values

   Use the color pickers or hex inputs to enter the previous colors.

3. Apply Changes

   Click “Aplicar Cambios” to restore the previous theme.

Keep a record of your original theme colors before making changes, so you can easily revert if needed.

Default Theme Colors

To restore the original PROVESA theme:

Primary:    #0052A5
Secondary:  #455dd9  
Accent:     #E4002B
Background: #F8FAFC

Advanced Customization

Custom CSS Variables

For developers, you can add additional CSS variables:

1. Update the theme table schema to include new color fields
2. Modify the theme injection logic in src/routes/+layout.server.js
3. Add new color pickers in PersonalizacionTab.svelte
4. Update Tailwind config to recognize new colors

Tailwind Configuration

Extend Tailwind to use theme colors in tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
        secondary: 'var(--color-secondary)',
        accent: 'var(--color-accent)',
      }
    }
  }
}

Testing Your Theme

Browser Testing

Test your theme across browsers:

• Chrome/Edge (Chromium)
• Firefox
• Safari (if on Mac)
• Mobile browsers (iOS Safari, Chrome Mobile)

Colors may render slightly differently across browsers.

Device Testing

View on different devices:

• Desktop (1920x1080, 1366x768)
• Tablet (768x1024, 1024x768)
• Mobile (375x667, 414x896)

Use browser DevTools device emulation for quick testing.

Accessibility Testing

Check accessibility:

• Use browser contrast checker DevTools
• Test with screen readers
• Verify color isn’t the only information indicator
• Check color-blind simulation tools

Troubleshooting

Colors not applying after save

Solutions:

• Hard refresh the page (Ctrl+F5 or Cmd+Shift+R)
• Clear browser cache
• Check browser console for errors
• Verify database was updated (use Drizzle Studio)

Colors look different on mobile

Reasons:

• Mobile browsers may render colors differently
• Screen brightness and color temperature affect appearance
• Night mode or color filters may be enabled

Solutions:

• Test on actual devices when possible
• Adjust colors slightly to compensate
• Use web-safe colors when critical

Low contrast warning

Issue: Text hard to read on colored backgrounds

Solutions:

• Use darker shades for text colors
• Lighten background colors
• Add text shadows or outlines
• Test with Contrast Checker

Best Practices Summary

1. Test Before Committing: Try colors in the editor before applying
2. Consider Accessibility: Ensure sufficient contrast ratios
3. Brand Consistency: Align with existing brand guidelines
4. Document Changes: Keep a record of color choices
5. Mobile Testing: Verify appearance on small screens
6. User Feedback: Gather opinions on color changes

Next Steps

Managing Content

Learn to update site content and images

Deployment

Deploy your customized site to production