Add darkmode

Yasamato · May 23, 2024 · 0275455 · 0275455
1 parent ad7a1d2
commit 0275455
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 19 deletions.
diff --git a/app/[lng]/conference/2023/page.tsx b/app/[lng]/conference/2023/page.tsx
@@ -274,7 +274,7 @@ export default function Conference2023({
   }
 
   return (
-    <article className="container py-8">
+    <article className="container flex flex-col gap-4 py-8">
       <h1 className="text-4xl">Ausblick Konferenz 2023</h1>
 
       <p>

diff --git a/app/[lng]/layout.tsx b/app/[lng]/layout.tsx
@@ -1,6 +1,7 @@
 import { languages } from "../i18n/settings";
 import BVSRFooter from "../../components/layout/BVSRFooter";
 import BVSRNavbar from "../../components/layout/BVSRNavbar";
+import { Flowbite, ThemeModeScript } from "flowbite-react";
 
 export async function generateStaticParams() {
   return languages.map((lng: string) => ({ lng }));
@@ -15,15 +16,20 @@ export default async function RootLayout({
 }) {
   return (
     <html lang={lng}>
-      <body className="flex flex-col bg-white">
-        <BVSRNavbar lng={lng} />
+      <head>
+        <ThemeModeScript />
+      </head>
+      <Flowbite>
+        <body className="flex min-h-screen flex-col bg-white text-gray-600 antialiased dark:bg-gray-900 dark:text-gray-400">
+          <BVSRNavbar lng={lng} />
 
-        <main className="flex grow flex-col items-center gap-16">
-          {children}
-        </main>
+          <main className="flex grow flex-col items-center gap-8 pb-16">
+            {children}
+          </main>
 
-        <BVSRFooter lng={lng} />
-      </body>
+          <BVSRFooter lng={lng} />
+        </body>
+      </Flowbite>
     </html>
   );
 }
diff --git a/components/layout/BVSRFooter.tsx b/components/layout/BVSRFooter.tsx
@@ -11,7 +11,7 @@ export default async function BVSRFooter({ lng }: { lng: string }) {
   const { t } = await useTranslation(lng, "footer");
 
   return (
-    <Footer container>
+    <Footer container className="rounded-none">
       <FooterCopyright by="BVSR e. V." year={2024} />
       <FooterLinkGroup>
         <FooterLink as={Link} href={"/" + lng + "/privacy-policy"}>

diff --git a/components/layout/BVSRNavbar.tsx b/components/layout/BVSRNavbar.tsx
@@ -11,14 +11,15 @@ import {
   NavbarCollapse,
   NavbarLink,
   Navbar,
+  DarkThemeToggle,
 } from "flowbite-react";
 
 export default async function BVSRNavbar({ lng }: { lng: string }) {
   const { t } = await useTranslation(lng, "navbar");
 
   return (
-    <Navbar fluid>
-      <div className="flex flex-col md:items-center md:gap-8 md:flex-row">
+    <Navbar fluid className="sticky top-0 z-10">
+      <div className="flex flex-col md:flex-row md:items-center md:gap-8">
         <NavbarBrand href="https://bvsr.space">
           <Image
             src={bvsrLogo}
@@ -30,7 +31,7 @@ export default async function BVSRNavbar({ lng }: { lng: string }) {
           </span>
         </NavbarBrand>
         <NavbarCollapse>
-          <div className="relative flex flex-col md:items-center md:gap-4 md:flex-row">
+          <div className="relative flex flex-col md:flex-row md:items-center md:gap-4">
             <Dropdown
               inline
               label={
@@ -65,7 +66,8 @@ export default async function BVSRNavbar({ lng }: { lng: string }) {
           </div>
         </NavbarCollapse>
       </div>
-      <div className="self-start md:self-center flex items-center gap-2">
+      <div className="flex items-center gap-2 self-start md:self-center">
+        <DarkThemeToggle />
         <Language lng={lng} />
         <NavbarToggle />
       </div>

diff --git a/components/members/MemberCard.tsx b/components/members/MemberCard.tsx
@@ -21,9 +21,13 @@ export default async function MemberCard({
   const { t } = await useTranslation(lng, "members");
 
   return (
-    <div className="space-between flex h-[440px] flex-col p-4 shadow">
-      <Link href={link} target={"_blank"}>
-        <div className="relative h-[160px] cursor-pointer">
+    <div className="space-between flex h-[440px] flex-col rounded-lg bg-[#eee] p-2 shadow dark:bg-gray-800">
+      <Link
+        href={link}
+        target={"_blank"}
+        className="cursor-pointer rounded-lg bg-white p-2"
+      >
+        <div className="relative h-[140px]">
           <Image src={img} fill={true} alt={name} className="object-contain" />
         </div>
       </Link>

diff --git a/components/members/SponsorCard.tsx b/components/members/SponsorCard.tsx
@@ -12,9 +12,11 @@ export default function SponsorCard({
   description,
 }: SponsorCardProps) {
   return (
-    <div className="space-between flex h-[440px] flex-col p-4 shadow">
-      <div className="relative h-[160px]">
-        <Image src={img} fill={true} alt={name} className="object-contain" />
+    <div className="space-between flex h-[440px] flex-col rounded-lg bg-[#eee] p-2 shadow dark:bg-gray-800">
+      <div className="rounded-lg bg-white p-2">
+        <div className="relative h-[140px]">
+          <Image src={img} fill={true} alt={name} className="object-contain" />
+        </div>
       </div>
 
       <div className="my-4">{name}</div>