From 97acf2cb66dfab54c674b0166d92c0799de928b3 Mon Sep 17 00:00:00 2001 From: Kerim Atilgan Date: Sun, 27 Sep 2026 13:35:55 +0200 Subject: [PATCH] Farbschema wie VVL-Tool, Dark Mode und lila Textmarkierung MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Farbwerte (hell/dunkel), IBM Plex Sans und Textmarkierung aus dem VVL-Tool übernommen - Umschalter Hell/Dunkel in der Kopfzeile, Wahl wird gemerkt (Standard: Systemeinstellung) - Kopfleiste folgt dem Farbschema des jeweiligen Tools Co-Authored-By: Claude Opus 5.5 (1M context) --- frontend/index.html | 3 +- frontend/src/App.tsx | 85 ++++++++------- frontend/src/icons.tsx | 2 + frontend/src/main.tsx | 4 + frontend/src/styles.css | 100 +++++++++++++++--- frontend/src/useTheme.ts | 24 +++++ package-lock.json | 9 ++ package.json | 1 + public/theme-init.js | 7 ++ .../authentik-setup.cpython-313.pyc | Bin 0 -> 17406 bytes topbar/src/topbar.ts | 54 +++++++--- 11 files changed, 221 insertions(+), 68 deletions(-) create mode 100644 frontend/src/useTheme.ts create mode 100644 public/theme-init.js create mode 100644 scripts/__pycache__/authentik-setup.cpython-313.pyc diff --git a/frontend/index.html b/frontend/index.html index 736504b..4099128 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,7 +3,8 @@ - + + Handy-Insel Portal diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 1c81a2a..9030cd3 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,6 +1,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'; import { api, type App as PortalApp, type Links, type News, type NewsInput, type User } from './api'; import { Icon } from './icons'; +import { useTheme } from './useTheme'; function greeting(date = new Date()): string { const h = date.getHours(); @@ -25,14 +26,14 @@ export function App() { }); }, []); - if (!me) return
Lade Portal …
; + if (!me) return
Lade Portal …
; return (
-

+

{greeting()},
{me.user.firstName}. @@ -49,6 +50,7 @@ export function App() { function Header({ user, links }: { user: User; links: Links }) { const [open, setOpen] = useState(false); + const { theme, toggle } = useTheme(); const ref = useRef(null); useEffect(() => { @@ -65,19 +67,28 @@ function Header({ user, links }: { user: User; links: Links }) { }, [open]); return ( -
+
- - + + Handy-Insel -
+
+ @@ -231,15 +242,15 @@ function NewsPanel({ canEdit }: { canEdit: boolean }) { setEditing(null)} onSave={save} /> )} - {error &&

{error}

} - {news && !news.length && !editing &&

Es gibt noch keine Neuigkeiten.

} + {error &&

{error}

} + {news && !news.length && !editing &&

Es gibt noch keine Neuigkeiten.

}
    {news?.map((item) => ( -
  • +
  • -

    - {item.pinned && } +

    + {item.pinned && } {item.title}

    {canEdit && ( @@ -249,10 +260,10 @@ function NewsPanel({ canEdit }: { canEdit: boolean }) {

    )}
-
+
{dateFmt.format(new Date(item.createdAt))} · {item.author}
- {item.body &&

{item.body}

} + {item.body &&

{item.body}

} ))} @@ -267,7 +278,7 @@ function IconButton({ label, icon, onClick }: { label: string; icon: 'pencil' | onClick={onClick} title={label} aria-label={label} - className="grid h-7 w-7 place-items-center rounded-md text-slate-500 hover:bg-slate-100 hover:text-ink" + className="grid h-7 w-7 place-items-center rounded-md text-fg-3 hover:bg-surface-3 hover:text-fg" > @@ -301,24 +312,24 @@ function NewsForm({ } } - const field = 'w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm focus:border-brand-500 focus:outline-none'; + const field = 'w-full rounded-md border border-line-2 bg-surface px-3 py-2 text-sm focus:border-accent focus:outline-none'; return ( -
+ setTitle(e.target.value)} maxLength={200} required autoFocus />