feat: implement dark mode support across components and update theme functions
This commit is contained in:
@@ -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">
|
||||
© {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"
|
||||
>
|
||||
|
Reference in New Issue
Block a user