feat: implement dark mode support across components and update theme functions

This commit is contained in:
2025-07-24 12:35:02 +02:00
parent 6ff96fbe87
commit 06dd1fc80e
8 changed files with 81 additions and 81 deletions

View File

@@ -1,6 +1,6 @@
import React from "react";
import Header from "../components/Header";
import Cookies from "js-cookie"; // Add this import
import Cookies from "js-cookie";
import Sidebar from "../components/Sidebar";
type LayoutProps = {
@@ -8,10 +8,10 @@ type LayoutProps = {
};
const Layout: React.FC<LayoutProps> = ({ children }) => {
const isLoggedIn = !!Cookies.get("name"); // Check login status
const isLoggedIn = !!Cookies.get("name");
return (
<div className="flex flex-col min-h-screen bg-gradient-to-br from-blue-50 via-blue-100 to-blue-200">
<div className="flex flex-col min-h-screen bg-gradient-to-br from-blue-50 via-blue-100 to-blue-200 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900">
<Header />
<div className="flex flex-1">
{isLoggedIn && (
@@ -19,22 +19,22 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
{/* Sidebar */}
<Sidebar />
{/* Main content */}
<main className="flex-1 p-10 bg-white/80 rounded-l-3xl shadow-2xl m-6 overflow-auto">
<main className="flex-1 p-10 bg-white/80 dark:bg-gray-900/80 rounded-l-3xl shadow-2xl m-6 overflow-auto text-black dark:text-white">
{children}
</main>
</>
)}
</div>
<footer className="bg-gradient-to-r from-blue-800 via-blue-900 to-blue-800 text-blue-100 py-6 px-5 text-center rounded-t-3xl shadow-xl mt-8 tracking-wide border-t border-blue-700">
<footer className="bg-gradient-to-r from-blue-800 via-blue-900 to-blue-800 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900 text-blue-100 dark:text-gray-400 py-6 px-5 text-center rounded-t-3xl shadow-xl mt-8 tracking-wide border-t border-blue-700 dark:border-gray-800">
<div className="flex flex-col items-center gap-2">
<span className="font-bold text-lg tracking-widest drop-shadow">
Bikelane Web
</span>
<span className="text-xs text-blue-200">
<span className="text-xs text-blue-200 dark:text-gray-500">
&copy; {new Date().getFullYear()}
<a
href="https://git.the1s.de/theis.gaedigk/bikelane"
className="underline hover:text-blue-300 transition"
className="underline hover:text-blue-300 dark:hover:text-white transition"
target="_blank"
rel="noopener noreferrer"
>