managarten/uload/docs/features/profile-background.md
Till-JS c712a2504a feat: integrate uload and picture, unify package naming
- Add uload project with apps/web structure
  - Reorganize from flat to monorepo structure
  - Remove PocketBase binary and local data
  - Update to pnpm and @uload/web namespace

- Add picture project to monorepo
  - Remove embedded git repository

- Unify all package names to @{project}/{app} schema:
  - @maerchenzauber/* (was @storyteller/*)
  - @manacore/* (was manacore-*, manacore)
  - @manadeck/* (was web, backend, manadeck)
  - @memoro/* (was memoro-web, landing, memoro)
  - @picture/* (already unified)
  - @uload/web

- Add convenient dev scripts for all apps:
  - pnpm dev:{project}:web
  - pnpm dev:{project}:landing
  - pnpm dev:{project}:mobile
  - pnpm dev:{project}:backend

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-25 04:00:36 +01:00

1.6 KiB

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>