Theme Customization - PROVESA Web

PROVESA Web features a dynamic theming system that allows administrators to customize the site’s color palette without touching code. All changes are applied globally across the public website in real-time.

Accessing Theme Settings

Navigate to Personalización in the admin sidebar to access theme customization.

The theme customization interface is located in src/lib/components/admin/PersonalizacionTab.svelte.

Color Palette

The theme system uses four primary color variables:

Primary Color

Main brand color used in buttons, navigation, and key UI elements

Secondary Color

Accent color for call-to-action buttons and highlights

Accent Color

Alert and notification color for badges, errors, and warnings

Background Color

Base background color for landing page sections

Theme Editor Interface

The customization panel (src/lib/components/admin/PersonalizacionTab.svelte) provides an intuitive color picker interface:

<div class="grid gap-6 md:grid-cols-2">
  <!-- Primary Color -->
  <div class="group space-y-3 rounded-3xl border border-slate-50 bg-[#F8FAFC] p-6">
    <div class="flex items-center justify-between">
      <label for="primary" class="text-sm font-bold text-slate-800">Color Primario</label>
      <div class="h-3 w-3 rounded-full bg-primary ring-4 ring-primary/10"></div>
    </div>
    <div class="flex items-center gap-4">
      <input
        type="color"
        id="primary"
        name="primary"
        bind:value={theme.primary}
        class="h-14 w-14 cursor-pointer rounded-xl"
      />
      <input
        type="text"
        bind:value={theme.primary}
        class="w-full rounded-xl font-mono text-xs font-bold"
      />
    </div>
    <p class="text-[10px] text-slate-400">Usado en botones principales y sidebar.</p>
  </div>
  <!-- Repeat for secondary, accent, background -->
</div>

Color Input Features

Visual Picker
Hex Input
Preview Indicator

Large color swatch (56×56px) provides visual feedback and opens the browser’s native color picker on click.

<input
  type="color"
  bind:value={theme.primary}
  class="h-14 w-14 cursor-pointer overflow-hidden rounded-xl border-none p-0 shadow-sm"
/>

Text field displays and accepts hex color codes for precise color entry:

<input
  type="text"
  bind:value={theme.primary}
  class="w-full rounded-xl border-slate-100 bg-white font-mono text-xs font-bold tracking-wider"
/>

Supports formats: #1565C0 or #156

Small circular preview in the top-right shows the current color with a subtle ring effect:

<div class="h-3 w-3 rounded-full bg-primary ring-4 ring-primary/10"></div>

Color Usage Guidelines

Primary Color

Where it’s used:

Admin sidebar background when tab is active
Main navigation elements
Primary action buttons
Links and interactive elements
Focus ring states

Recommendation: Choose a strong, professional color that represents your brand (e.g., corporate blue, forest green).

/* Applied as CSS variable */
--color-primary: #1565C0;

/* Used in components */
.active-nav {
  background-color: var(--color-primary);
  box-shadow: 0 10px 15px -3px rgba(0, 82, 165, 0.3);
}

Secondary Color

Where it’s used:

Call-to-action buttons on public site
Secondary UI accents
Decorative elements
Gradient backgrounds

Recommendation: Choose a complementary or analogous color to your primary. Often slightly brighter or more vibrant.

Accent Color

Where it’s used:

Error messages and alerts
Notification badges
Warning indicators
Delete buttons (hover state)
Unread counts

Recommendation: Choose a color that stands out (typically red, orange, or yellow) for drawing attention.

// Unread badge in admin sidebar
{#if item.badge}
  <span class="bg-accent-red ml-auto rounded-full px-2 py-0.5 text-[10px] text-white">
    {item.badge}
  </span>
{/if}

Background Color

Where it’s used:

Main landing page background
Section backgrounds on public site
Base layer color

Recommendation: Keep this light and neutral (off-white, very light gray) for readability.

Saving Changes

Adjust Colors

Use the color pickers or hex inputs to adjust any of the four theme colors.

Click 'Aplicar Cambios'

The save button at the bottom right submits the form:

<button
  type="submit"
  disabled={isSaving}
  class="flex items-center gap-2 rounded-2xl bg-primary px-8 py-4 text-sm font-bold text-white"
>
  {isSaving ? 'Guardando...' : 'Aplicar Cambios'}
  {#if !isSaving}
    <span class="material-icons text-sm">save</span>
  {/if}
</button>

Server Processing

Form submits to ?/updateTheme action which updates the database.

Confirmation

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

{#if formResult?.success}
  <p in:slide={{ axis: 'x' }} class="flex items-center gap-1 text-sm font-bold text-green-600">
    <span class="material-icons text-sm">check_circle</span> Cambios guardados
  </p>
{/if}

Form Implementation

The theme form uses SvelteKit’s progressive enhancement:

<form
  method="POST"
  action="?/updateTheme"
  use:enhance={() => {
    isSaving = true;
    return async ({ update }) => {
      isSaving = false;
      await update();
    };
  }}
>
  <!-- Color inputs -->
</form>

Why use:enhance?

Progressive enhancement provides:

No full page reload: Form submits via fetch
Loading states: Button disables and shows “Guardando…”
Automatic data sync: Page data updates after successful submission
Graceful degradation: Works without JavaScript (full page reload)

Theme Synchronization

The theme state synchronizes with server data using Svelte 5’s reactive system:

let theme = $state({ primary: '', secondary: '', accent: '', background: '' });

// Sync when server returns data (initial load + post-save)
$effect(() => {
  theme = { ...data.theme };
});

This ensures:

Initial load shows current theme from database
After save, theme updates to reflect what was saved
Multiple tabs stay in sync (after refresh)

CSS Variable Application

Colors are applied as CSS custom properties in the root layout, making them available throughout the application:

<style>
  :root {
    --color-primary: {theme.primary};
    --color-secondary: {theme.secondary};
    --color-accent: {theme.accent};
    --color-background: {theme.background};
  }
</style>

Components reference these variables:

.primary-button {
  background-color: var(--color-primary);
}

.accent-badge {
  background-color: var(--color-accent);
}

Tailwind Integration

Colors are also available as Tailwind utility classes:

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

Used in components:

<button class="bg-primary text-white hover:bg-primary/90">
  Click me
</button>

<div class="bg-background border-accent">
  Content
</div>

Visual Design

The theme customization panel features a polished UI:

Card Layout

Each color is contained in a card with:

Rounded corners (rounded-3xl)
Light background (bg-[#F8FAFC])
Subtle border (border-slate-50)
Hover effect (shadow-lg on hover)

<div class="group space-y-3 rounded-3xl border border-slate-50 bg-[#F8FAFC] p-6 transition-all hover:bg-white hover:shadow-lg hover:shadow-slate-100">
  <!-- Color picker -->
</div>

Descriptive Labels

Each color includes:

Bold label
Usage description
Visual preview indicator

Example:

<p class="text-[10px] text-slate-400">Usado en botones principales y sidebar.</p>

Responsive Grid

2-column grid on medium+ screens, single column on mobile:

<div class="grid gap-6 md:grid-cols-2">
  <!-- Color cards -->
</div>

Best Practices

Contrast Ratio

Ensure sufficient contrast between text and background colors. Aim for WCAG AA compliance (4.5:1 for normal text).

Brand Consistency

Use colors from your brand guidelines. The theme system ensures consistency across all pages.

Test on Public Site

After saving, visit the public homepage to see your changes in context.

Document Choices

Keep a record of your hex codes for brand documentation and future reference.

Color Picker Tips

Copy-paste hex codes directly into the text input for precise color matching from brand guidelines or design tools.

Use the browser picker for visual exploration and fine-tuning. Most modern browsers include HSL/RGB sliders.

Preview indicator in the top-right of each card shows the color with opacity rings for quick visual reference.

Database Storage

Theme colors are stored in the database and loaded on each page request, ensuring:

Persistence across sessions
Consistency across all users
Ability to revert by updating database directly if needed

Future Enhancements

Potential theme system expansions:

Color presets: Save and load complete color schemes
Dark mode: Separate palette for dark theme
Advanced colors: Additional accent colors, gradient stops
Font customization: Typography settings
Live preview: See changes without saving
Color accessibility checker: Built-in contrast validation

​Accessing Theme Settings

​Color Palette

Primary Color

Secondary Color

Accent Color

Background Color

​Theme Editor Interface

​Color Input Features

​Color Usage Guidelines

​Primary Color

​Secondary Color

​Accent Color

​Background Color

​Saving Changes

​Form Implementation

​Theme Synchronization

​CSS Variable Application

​Tailwind Integration

​Visual Design

​Best Practices

Contrast Ratio

Brand Consistency

Test on Public Site

Document Choices

​Color Picker Tips

​Database Storage

​Future Enhancements

Accessing Theme Settings

Color Palette

Theme Editor Interface

Color Input Features

Color Usage Guidelines

Primary Color

Secondary Color

Accent Color

Background Color

Saving Changes

Form Implementation

Theme Synchronization

CSS Variable Application

Tailwind Integration

Visual Design

Best Practices

Color Picker Tips

Database Storage

Future Enhancements