mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-15 15:59:40 +02:00

Wuesteon d36b321d9d style: auto-format codebase with Prettier

Applied formatting to 1487+ files using pnpm format:write
  - TypeScript/JavaScript files
  - Svelte components
  - Astro pages
  - JSON configs
  - Markdown docs

  13 files still need manual review (Astro JSX comments)

2025-11-27 18:33:16 +01:00

1.6 KiB

Raw Blame History

Profile Background Color Feature

Übersicht

Nutzer können jetzt die Hintergrundfarbe ihrer Profilseite anpassen.

So funktioniert's

1. Einstellung ändern

Gehe zu Settings (/settings)
Scrolle zum Abschnitt Profile Appearance
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>

1.6 KiB Raw Blame History