mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-15 22:59:40 +02:00
d36b321d9d
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)
60 lines
1.6 KiB
Markdown
60 lines
1.6 KiB
Markdown
# 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
|
|
|
|
```html
|
|
<div class="min-h-screen transition-colors duration-300" style="background: #dbeafe">
|
|
<!-- Profile content -->
|
|
</div>
|
|
```
|