52 lines
2.2 KiB
Markdown
52 lines
2.2 KiB
Markdown
# Light Mode — Design-Spec
|
|
|
|
## Überblick
|
|
|
|
Ergänzung eines Light Mode zur bestehenden MBO-Tech-IT-Webseite (Next.js 15 / Tailwind CSS v3). Die Seite war zuvor rein im Dark Mode. Der Light Mode wird über `next-themes` und Tailwinds `dark:`-Klassen-Strategie implementiert.
|
|
|
|
## Entscheidungen
|
|
|
|
- **Theme-Verwaltung:** `next-themes` mit `attribute="class"` und `defaultTheme="system"` — erkennt OS-Präferenz, speichert manuelle Auswahl in localStorage, kein Theme-Flash beim Laden
|
|
- **Tailwind-Strategie:** `darkMode: "class"` — Light = Default (kein Präfix), Dark = `dark:` Präfix
|
|
- **Toggle-Platzierung:** Ganz rechts im Header (nach dem "Jetzt anfragen" CTA), auch im mobilen Menü
|
|
- **Farbpalette:** Cool Blue-Gray (#f0f4f8 / #e8eef4)
|
|
|
|
## Farbmapping
|
|
|
|
| Token | Light | Dark |
|
|
|---|---|---|
|
|
| bg-primary | `#f0f4f8` | `#18212f` |
|
|
| bg-section | `#e8eef4` | `#111925` |
|
|
| bg-card | `#ffffff` | `gray-900` |
|
|
| bg-modal | `#dde4ed` | `#1a2535` |
|
|
| text-primary | `#1a202c` (slate-900) | `white` |
|
|
| text-secondary | `#4a5568` (slate-600) | `slate-400` |
|
|
| text-muted | `#718096` (slate-500) | `slate-500` |
|
|
| border | `#cbd5e0` (slate-200/300) | `gray-800` |
|
|
| accent-orange | `orange-500` | `orange-500` (unverändert) |
|
|
| accent-blue | `blue-600` | `blue-400` |
|
|
|
|
## Komponenten
|
|
|
|
- `components/Providers.tsx` — ThemeProvider Wrapper
|
|
- `components/ThemeToggle.tsx` — Sun/Moon Toggle mit `mounted`-Guard
|
|
- `tailwind.config.ts` — `darkMode: "class"` ergänzt
|
|
- `app/layout.tsx` — Providers-Wrapper, `suppressHydrationWarning`
|
|
- `app/globals.css` — Body/Scrollbar/bg-grid/legal-content/.btn-secondary im Light/Dark
|
|
- `app/page.tsx` — Hintergrundfarbe
|
|
- `app/pakete/page.tsx` — vollständig
|
|
- `components/Header.tsx` — ThemeToggle eingebunden
|
|
- `components/Hero.tsx`, `StatsBar.tsx`, `Footer.tsx` — Farbanpassungen
|
|
- `components/Services.tsx`, `PaperlessSection.tsx`, `DataSovereignty.tsx`, `About.tsx` — Farbanpassungen
|
|
- `components/Contact.tsx`, `Technologies.tsx`, `LegalLayout.tsx` — Farbanpassungen
|
|
|
|
## ThemeToggle Details
|
|
|
|
```tsx
|
|
"use client"
|
|
// useTheme() aus next-themes
|
|
// resolvedTheme (nicht theme) für korrekte system-default-Erkennung
|
|
// mounted-Guard verhindert SSR-Hydration-Mismatch
|
|
// SVG Sonne (im Dark Mode) / SVG Mond (im Light Mode)
|
|
```
|