2.2 KiB

Raw Blame History

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

"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)

2.2 KiB Raw Blame History