From 89dbaa3ff731d500ce21589b3ed411740b94a1cc Mon Sep 17 00:00:00 2001 From: velitchko Date: Fri, 12 Dec 2025 10:57:53 +0100 Subject: [PATCH] Darkmode (and Darkest mode) themes --- app/globals.css | 17 ++--------- app/layout.tsx | 11 ++------ app/page.tsx | 28 +++++++++--------- app/register/page.tsx | 50 ++++++++++++++++----------------- components/ClientLayout.tsx | 19 +++++++++++++ components/EventCard.tsx | 24 ++++++++-------- components/Footer.tsx | 20 +++++++------ components/Header.tsx | 15 +++++----- components/NewsletterSignup.tsx | 4 +-- 9 files changed, 96 insertions(+), 92 deletions(-) create mode 100644 components/ClientLayout.tsx diff --git a/app/globals.css b/app/globals.css index 8465217..8898ca5 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,20 +1,7 @@ @import "tailwindcss"; -:root { - --background: #ffffff; - --foreground: #000000; -} - -@theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); - --font-sans: var(--font-inter); -} - -body { - background: var(--background); - color: var(--foreground); -} +@variant dark (.dark &); +@variant darkest (.darkest &); /* Scroll reveal animations */ .reveal { diff --git a/app/layout.tsx b/app/layout.tsx index 0251919..0c5c9e2 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,8 +1,7 @@ import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "./globals.css"; -import Header from "@/components/Header"; -import Footer from "@/components/Footer"; +import ClientLayout from "@/components/ClientLayout"; const inter = Inter({ subsets: ["latin"], @@ -57,12 +56,8 @@ export default function RootLayout({ }>) { return ( - -
-
- {children} -
-