Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: dark mode Modale

Browse Source
This commit is contained in:
ISA
2025-09-08 15:33:26 +02:00
parent fefff9419d
commit af21b180f1
23 changed files with 209 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/header/Header.tsx
View File

@@ -145,7 +145,7 @@ function Header() {
}, []);
return (
<header className="bg-[var(--color-surface)] dark:bg-[var(--color-surface)]/90 backdrop-blur flex justify-between items-center w-full h-[13vh] laptop:h-[10vh] relative text-[var(--color-fg)] dark:text-[var(--color-fg)] shadow-sm border-b border-[var(--color-border)]">
<header className="bg-[var(--color-surface)] dark:bg-[var(--color-surface)]/90 backdrop-blur flex justify-between items-center w-full h-[13vh] laptop:h-[10vh] relative text-[var(--color-fg)] dark:text-[var(--color-fg)] shadow-sm border-b border-[var(--color-border)]">
<div
className="absolute transform -translate-y-1/2
left-[8%] sm:left-[8%] md:left-[8%] lg:left-[8%] xl:left-[6%] 2xl:left-[2%] laptop:left-[4%] laptop:
@@ -195,9 +195,15 @@ function Header() {
title={isDark ? "Light Mode" : "Dark Mode"}
>
{isDark ? (
<Icon icon="mdi:weather-night" className="text-xl text-yellow-300" />
<Icon
icon="mdi:weather-night"
className="text-xl text-yellow-300"
/>
) : (
<Icon icon="mdi:white-balance-sunny" className="text-xl text-yellow-500" />
<Icon
icon="mdi:white-balance-sunny"
className="text-xl text-yellow-500"
/>
)}
</button>
</div>
@@ -218,7 +224,7 @@ function Header() {
{/* Warnhinweis, wenn der Admin angemeldet ist */}
{isAdminLoggedIn && (
<div className="absolute top-0 left-1/2 transform -translate-x-1/2 w-full xl:w-1/4 2xl:w-1/4 h-8 bg-[var(--color-warning)] text-center py-2 text-black font-bold tracking-wide">
<div className="absolute top-0 left-1/2 transform -translate-x-1/2 w-full xl:w-1/4 2xl:w-1/4 h-8 bg-[var(--color-warning)] text-center py-2 text-black font-bold tracking-wide">
Admin-Modus aktiv
</div>
)}