managarten/apps/uload/docs/features/profile-background.md

Profile Background Color Feature

Übersicht

Nutzer können jetzt die Hintergrundfarbe ihrer Profilseite anpassen.

So funktioniert's

1. Einstellung ändern

1. Gehe zu Settings (/settings)
2. Scrolle zum Abschnitt Profile Appearance
3. Wähle eine Farbe aus:
   • Color Picker: Klicke auf das Farbfeld für eine individuelle Farbe
   • Presets: Wähle aus vordefinierten Farben (Light Gray, Light Blue, Light Green, etc.)

2. Vorschau

Die gewählte Farbe wird sofort auf deiner Profilseite (/p/[username]) angezeigt.

Verfügbare Preset-Farben

• Light Gray (Standard): #f9fafb
• Light Blue: #dbeafe
• Light Green: #dcfce7
• Light Yellow: #fef3c7
• Light Pink: #fce7f3
• Light Purple: #e9d5ff
• Dark Gray: #1f2937
• Dark Blue: #0f172a
• Black: #000000

Technische Details

Datenbank

• Neues Feld: profileBackground (String) in der users Collection
• Standard: #f9fafb (Light Gray)

Implementation

• Settings-Seite: Color Picker + Preset-Auswahl
• Profile-Seite: Dynamisches CSS mit inline style Attribut
• Für dunkle Farben wird ein leichter Gradient angewendet

Dateien geändert

• /src/routes/(app)/settings/+page.server.ts - Server-Action für Speicherung
• /src/routes/(app)/settings/+page.svelte - UI für Farbauswahl
• /src/routes/p/[username]/+page.server.ts - Lade Hintergrundfarbe
• /src/routes/p/[username]/+page.svelte - Zeige Hintergrundfarbe
• /src/lib/pocketbase.ts - User Type aktualisiert

Beispiel

<div 
  class="min-h-screen transition-colors duration-300"
  style="background: #dbeafe"
>
  <!-- Profile content -->
</div>