feat(ui): Dunkelmodus fuer Shop und Admin mit Umschalter
Rollen-Farben statt reiner Markenfarben, damit hell und dunkel aus einem Satz Klassen entstehen: - heading (Ueberschriften, Links, Rahmen): hell Waldgruen, dunkel Creme - surface (abgesetzte Flaeche): hell Creme, dunkel angehobenes Dunkelgruen - forest bleibt die dunkle Markenflaeche (Hero, Baender, Knoepfe, Admin-Leiste), cream der helle Text darauf - honey-deep als fester Honigton fuer Flaechen; honey-dark (Text) wird im Dunkelmodus heller und bleibt lesbar Codemod ueber src: text-/border-forest -> *-heading, bg-cream -> bg-surface, bg-honey-dark -> bg-honey-deep. Im hellen Modus haben die Rollen exakt die bisherigen Werte - das Erscheinungsbild bleibt gleich. Umschalter (components/theme-toggle.tsx) Automatisch -> Hell -> Dunkel in Kopfzeile, Mobilmenue und Admin-Leiste. Die Wahl liegt im Cookie "theme" (nur light/dark, geprueft in lib/theme.ts); der Server setzt data-theme schon beim Ausliefern, nichts blitzt hell auf. "Automatisch" folgt der Systemeinstellung. Gewaehlter und automatischer Dunkelblock in globals.css werden per Test auf Gleichheit geprueft. Logo, Biene und Select-Pfeil nutzen die Rollenfarben. In der Kopfzeile steht "Honig entdecken" zwischen 1280 und 1535 px nicht mehr doppelt neben "Shop" (sonst stiess die Navigation an), der Slogan erscheint erst ab 1680 px. Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>
This commit is contained in:
Nick SzaunigandClaude Opus 5.5 committed
1 parent
b77516b9f5
commit
6950657c91
95 files changed
+514
-272
No files matched your search
+10
-10
@@ -35,7 +35,7 @@ export default async function KontoPage() {
|
||||
<div className="mt-10 grid md:grid-cols-2 md:divide-x md:divide-ink/10 gap-12 md:gap-0">
|
||||
<div className="md:pr-12">
|
||||
<form action={loginAction} className="space-y-4">
|
||||
<h2 className="text-3xl text-forest">{t.account.login}</h2>
|
||||
<h2 className="text-3xl text-heading">{t.account.login}</h2>
|
||||
<Field name="email" label={t.account.emailLabel} type="email" required autoComplete="email" />
|
||||
<PasswordField name="password" label={t.account.passwordLabel} required autoComplete="current-password" />
|
||||
{/* Das Turnstile-Widget ist ein iframe mit FESTER Breite (rund
|
||||
@@ -50,7 +50,7 @@ export default async function KontoPage() {
|
||||
) : null}
|
||||
<div className="flex flex-wrap items-center gap-x-4 gap-y-2">
|
||||
<Button type="submit">{t.account.login}</Button>
|
||||
<Link href="/konto/passwort-vergessen" className="text-xs text-ink/65 hover:text-forest underline">
|
||||
<Link href="/konto/passwort-vergessen" className="text-xs text-ink/65 hover:text-heading underline">
|
||||
{t.account.forgotPassword}
|
||||
</Link>
|
||||
</div>
|
||||
@@ -72,7 +72,7 @@ export default async function KontoPage() {
|
||||
</div>
|
||||
<a
|
||||
href="/api/auth/entra/login"
|
||||
className="mt-6 inline-flex items-center justify-center gap-2 px-7 py-3 text-sm tracking-wide-caps transition-[color,background-color,border-color,transform] duration-300 active:scale-[0.97] bg-transparent text-forest border border-forest hover:bg-forest hover:text-cream"
|
||||
className="mt-6 inline-flex items-center justify-center gap-2 px-7 py-3 text-sm tracking-wide-caps transition-[color,background-color,border-color,transform] duration-300 active:scale-[0.97] bg-transparent text-heading border border-heading hover:bg-forest hover:text-cream"
|
||||
>
|
||||
{t.account.ssoButton}
|
||||
</a>
|
||||
@@ -81,7 +81,7 @@ export default async function KontoPage() {
|
||||
</div>
|
||||
|
||||
<form action={registerAction} className="space-y-4 md:pl-12">
|
||||
<h2 className="text-3xl text-forest">{t.account.register}</h2>
|
||||
<h2 className="text-3xl text-heading">{t.account.register}</h2>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Field name="firstName" label={t.account.firstNameLabel} required autoComplete="given-name" />
|
||||
<Field name="lastName" label={t.account.lastNameLabel} required autoComplete="family-name" />
|
||||
@@ -128,7 +128,7 @@ export default async function KontoPage() {
|
||||
{t.account.verifyEmailPrompt}
|
||||
</p>
|
||||
<form action={resendVerificationEmailAction}>
|
||||
<button type="submit" className="text-forest underline whitespace-nowrap">
|
||||
<button type="submit" className="text-heading underline whitespace-nowrap">
|
||||
{t.account.resendVerification}
|
||||
</button>
|
||||
</form>
|
||||
@@ -174,7 +174,7 @@ export default async function KontoPage() {
|
||||
|
||||
<div className="mt-10 border border-ink/10 p-6 flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<h2 className="text-2xl text-forest">{t.account.newsletterHeading}</h2>
|
||||
<h2 className="text-2xl text-heading">{t.account.newsletterHeading}</h2>
|
||||
<p className="mt-1 text-sm text-ink/70">
|
||||
{isSubscribed ? t.account.newsletterSubscribed : t.account.newsletterNotSubscribed}
|
||||
</p>
|
||||
@@ -188,7 +188,7 @@ export default async function KontoPage() {
|
||||
|
||||
<div className="mt-6 border border-ink/10 p-6 flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<h2 className="text-2xl text-forest">{t.account.logoutAllDevicesHeading}</h2>
|
||||
<h2 className="text-2xl text-heading">{t.account.logoutAllDevicesHeading}</h2>
|
||||
<p className="mt-1 text-sm text-ink/70">
|
||||
{t.account.logoutAllDevicesDescription}
|
||||
</p>
|
||||
@@ -206,10 +206,10 @@ export default async function KontoPage() {
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<h2 className="text-2xl text-forest mb-4">{t.account.privacy.heading}</h2>
|
||||
<h2 className="text-2xl text-heading mb-4">{t.account.privacy.heading}</h2>
|
||||
<div className="border border-ink/10 p-6 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
|
||||
<div>
|
||||
<h3 className="text-lg text-forest">{t.account.privacy.downloadDataHeading}</h3>
|
||||
<h3 className="text-lg text-heading">{t.account.privacy.downloadDataHeading}</h3>
|
||||
<p className="mt-1 text-sm text-ink/70">{t.account.privacy.downloadDataDescription}</p>
|
||||
</div>
|
||||
<LinkButton href="/api/konto/datenexport" variant="secondary" className="flex-shrink-0">
|
||||
@@ -266,7 +266,7 @@ function Field({
|
||||
type={type}
|
||||
required={required}
|
||||
autoComplete={autoComplete}
|
||||
className="mt-1 w-full border border-ink/20 bg-background px-4 py-3 focus:outline-none focus:border-forest"
|
||||
className="mt-1 w-full border border-ink/20 bg-background px-4 py-3 focus:outline-none focus:border-heading"
|
||||
/>
|
||||
</label>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user