Skip to content

Commit 89dbaa3

Browse files
velitchkovelitchko
committed
Darkmode (and Darkest mode) themes
1 parent f1c5ec6 commit 89dbaa3

9 files changed

Lines changed: 96 additions & 92 deletions

File tree

‎app/globals.css‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,7 @@
11
@import "tailwindcss";
22

3-
:root {
4-
--background: #ffffff;
5-
--foreground: #000000;
6-
}
7-
8-
@theme inline {
9-
--color-background: var(--background);
10-
--color-foreground: var(--foreground);
11-
--font-sans: var(--font-inter);
12-
}
13-
14-
body {
15-
background: var(--background);
16-
color: var(--foreground);
17-
}
3+
@variant dark (.dark &);
4+
@variant darkest (.darkest &);
185

196
/* Scroll reveal animations */
207
.reveal {

‎app/layout.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import type { Metadata } from "next";
22
import { Inter } from "next/font/google";
33
import "./globals.css";
4-
import Header from "@/components/Header";
5-
import Footer from "@/components/Footer";
4+
import ClientLayout from "@/components/ClientLayout";
65

76
const inter = Inter({
87
subsets: ["latin"],
@@ -57,12 +56,8 @@ export default function RootLayout({
5756
}>) {
5857
return (
5958
<html lang="en" className="scroll-smooth">
60-
<body className={`${inter.variable} font-sans antialiased`}>
61-
<Header />
62-
<main>
63-
{children}
64-
</main>
65-
<Footer />
59+
<body className={`${inter.variable} font-sans antialiased bg-white dark:bg-[#36393f] darkest:bg-black text-black dark:text-white darkest:text-white`}>
60+
<ClientLayout>{children}</ClientLayout>
6661
</body>
6762
</html>
6863
);

‎app/page.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,35 +11,35 @@ export default function Home() {
1111
return (
1212
<>
1313
{/* Hero Section */}
14-
<section className="relative min-h-[85vh] flex items-center justify-center px-6 border-b border-black/10 overflow-hidden">
14+
<section className="relative min-h-[85vh] flex items-center justify-center px-6 border-b border-black/10 dark:border-[#202225] darkest:border-white/10 overflow-hidden">
1515
{/* Hero Image with Parallax */}
1616
<ParallaxHero />
1717

1818
<div className="relative z-10 max-w-4xl mx-auto text-center animate-fade-in">
19-
<h1 className="text-5xl md:text-6xl font-bold tracking-tight mb-4 animate-slide-up">
19+
<h1 className="text-5xl md:text-6xl font-bold tracking-tight mb-4 animate-slide-up text-black dark:text-white darkest:text-white">
2020
AustroVis
2121
</h1>
22-
<p className="text-lg md:text-xl text-black/70 mb-6 max-w-2xl mx-auto animate-slide-up" style={{ animationDelay: '0.1s' }}>
22+
<p className="text-lg md:text-xl text-black/70 dark:text-[#b9bbbe] darkest:text-white/70 mb-6 max-w-2xl mx-auto animate-slide-up" style={{ animationDelay: '0.1s' }}>
2323
A community of researchers, students, and practitioners interested in data visualization and visual analytics in Austria.
2424
</p>
2525
<div className="flex flex-col sm:flex-row gap-3 justify-center animate-slide-up" style={{ animationDelay: '0.2s' }}>
2626
<a
2727
href="/register"
28-
className="px-6 py-2.5 bg-black text-white font-medium rounded-md hover:bg-black/80 hover:scale-105 transition-all text-sm"
28+
className="px-6 py-2.5 bg-black dark:bg-white darkest:bg-white text-white dark:text-black darkest:text-black font-medium rounded-md hover:bg-black/80 dark:hover:bg-white/90 darkest:hover:bg-white/90 hover:scale-105 transition-all text-sm"
2929
>
3030
Register Now
3131
</a>
3232
<a
3333
href="#events"
34-
className="px-6 py-2.5 border border-black/20 font-medium rounded-md hover:border-black/40 hover:scale-105 transition-all text-sm"
34+
className="px-6 py-2.5 border border-black/20 dark:border-white/20 darkest:border-white/20 font-medium rounded-md hover:border-black/40 dark:hover:border-white/40 darkest:hover:border-white/40 hover:scale-105 transition-all text-sm text-black dark:text-white darkest:text-white"
3535
>
3636
View Events
3737
</a>
3838
<a
3939
href="https://discord.gg/rbkSzsxP47"
4040
target="_blank"
4141
rel="noopener noreferrer"
42-
className="px-6 py-2.5 border border-black/20 font-medium rounded-md hover:border-black/40 hover:scale-105 transition-all text-sm"
42+
className="px-6 py-2.5 border border-black/20 dark:border-white/20 darkest:border-white/20 font-medium rounded-md hover:border-black/40 dark:hover:border-white/40 darkest:hover:border-white/40 hover:scale-105 transition-all text-sm text-black dark:text-white darkest:text-white"
4343
>
4444
Join Discord
4545
</a>
@@ -51,11 +51,11 @@ export default function Home() {
5151
<section id="about" className="py-16 px-6">
5252
<ScrollReveal>
5353
<div className="max-w-4xl mx-auto text-center">
54-
<h2 className="text-3xl font-bold mb-3">About the AustroVis Workshop</h2>
55-
<p className="text-base text-black/70 mb-4">
54+
<h2 className="text-3xl font-bold mb-3 text-black dark:text-white darkest:text-white">About the AustroVis Workshop</h2>
55+
<p className="text-base text-black/70 dark:text-[#b9bbbe] darkest:text-white/70 mb-4">
5656
The workshop brings together the visualization community in Austria to share knowledge and build connections.
5757
</p>
58-
<p className="text-base text-black/70">
58+
<p className="text-base text-black/70 dark:text-[#b9bbbe] darkest:text-white/70">
5959
The AustroVis Workshop covers a wide range of topics in visualization, from fundamental visualization principles to advanced techniques in interactive visualization, visual analytics, and machine learning visualization.
6060
</p>
6161
</div>
@@ -66,7 +66,7 @@ export default function Home() {
6666
<section id="events" className="py-16 px-6">
6767
<div className="max-w-7xl mx-auto">
6868
<ScrollReveal>
69-
<h2 className="text-3xl font-bold mb-8">Upcoming Events</h2>
69+
<h2 className="text-3xl font-bold mb-8 text-black dark:text-white darkest:text-white">Upcoming Events</h2>
7070
</ScrollReveal>
7171
{upcomingEvents.length > 0 ? (
7272
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -78,7 +78,7 @@ export default function Home() {
7878
</div>
7979
) : (
8080
<ScrollReveal>
81-
<p className="text-black/60 text-lg">
81+
<p className="text-black/60 dark:text-[#b9bbbe] darkest:text-white/60 text-lg">
8282
No upcoming events scheduled at the moment. Stay tuned!
8383
</p>
8484
</ScrollReveal>
@@ -87,10 +87,10 @@ export default function Home() {
8787
</section>
8888

8989
{/* Past Events */}
90-
<section className="py-16 px-6 bg-black/2">
90+
<section className="py-16 px-6 bg-black/2 dark:bg-[#2f3136] darkest:bg-black/50">
9191
<div className="max-w-7xl mx-auto">
9292
<ScrollReveal>
93-
<h2 className="text-3xl font-bold mb-8">Past Events</h2>
93+
<h2 className="text-3xl font-bold mb-8 text-black dark:text-white darkest:text-white">Past Events</h2>
9494
</ScrollReveal>
9595
{pastEvents.length > 0 ? (
9696
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -102,7 +102,7 @@ export default function Home() {
102102
</div>
103103
) : (
104104
<ScrollReveal>
105-
<p className="text-black/60 text-lg">
105+
<p className="text-black/60 dark:text-[#b9bbbe] darkest:text-white/60 text-lg">
106106
No past events yet. Check back soon!
107107
</p>
108108
</ScrollReveal>

‎app/register/page.tsx‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -71,10 +71,10 @@ export default function RegisterPage() {
7171

7272
if (!nextEvent) {
7373
return (
74-
<main className="min-h-screen bg-white pt-32 pb-16 px-4">
74+
<main className="min-h-screen bg-white dark:bg-[#36393f] darkest:bg-black pt-32 pb-16 px-4">
7575
<div className="max-w-2xl mx-auto text-center">
76-
<h1 className="text-4xl font-bold text-black mb-4">Registration</h1>
77-
<p className="text-lg text-black/60">
76+
<h1 className="text-4xl font-bold text-black dark:text-white darkest:text-white mb-4">Registration</h1>
77+
<p className="text-lg text-black/60 dark:text-[#b9bbbe] darkest:text-white/60">
7878
No upcoming events are scheduled at the moment. Please check back later.
7979
</p>
8080
</div>
@@ -83,22 +83,22 @@ export default function RegisterPage() {
8383
}
8484

8585
return (
86-
<main className="min-h-screen bg-white pt-32 pb-16 px-4">
86+
<main className="min-h-screen bg-white dark:bg-[#36393f] darkest:bg-black pt-32 pb-16 px-4">
8787
<div className="max-w-2xl mx-auto">
8888
<div className="mb-8 text-center">
89-
<h1 className="text-4xl font-bold text-black mb-4">Register for the {nextEvent.title}</h1>
90-
<div className="bg-black/5 border border-black/10 rounded-lg p-6 mb-8">
91-
<p className="text-lg text-black mb-2">
89+
<h1 className="text-4xl font-bold text-black dark:text-white darkest:text-white mb-4">Register for the {nextEvent.title}</h1>
90+
<div className="bg-black/5 dark:bg-[#2f3136] darkest:bg-white/5 border border-black/10 dark:border-[#40444b] darkest:border-white/20 rounded-lg p-6 mb-8">
91+
<p className="text-lg text-black dark:text-white darkest:text-white mb-2">
9292
<span className="font-semibold">Date:</span> {nextEvent.date.toLocaleDateString('en-US', {
9393
year: 'numeric',
9494
month: 'long',
9595
day: 'numeric'
9696
})}
9797
</p>
98-
<p className="text-lg text-black mb-2">
98+
<p className="text-lg text-black dark:text-white darkest:text-white mb-2">
9999
<span className="font-semibold">Location:</span> {nextEvent.university}, {nextEvent.location}
100100
</p>
101-
<p className="text-black/70">{nextEvent.description}</p>
101+
<p className="text-black/70 dark:text-[#b9bbbe] darkest:text-white/70">{nextEvent.description}</p>
102102
</div>
103103
</div>
104104

@@ -109,22 +109,22 @@ export default function RegisterPage() {
109109
)}
110110

111111
{submitted ? (
112-
<div className="bg-green-50 border border-green-200 rounded-lg p-8 text-center">
113-
<h2 className="text-2xl font-bold text-green-900 mb-4">Thank You!</h2>
114-
<p className="text-green-800 mb-4">
112+
<div className="bg-green-50 dark:bg-green-900/20 darkest:bg-green-900/20 border border-green-200 dark:border-green-700 darkest:border-green-700 rounded-lg p-8 text-center">
113+
<h2 className="text-2xl font-bold text-green-900 dark:text-green-400 darkest:text-green-400 mb-4">Thank You!</h2>
114+
<p className="text-green-800 dark:text-green-300 darkest:text-green-300 mb-4">
115115
Your registration has been received. We&apos;ll get back to you soon with more details.
116116
</p>
117117
<button
118118
onClick={() => setSubmitted(false)}
119-
className="text-black hover:text-black/70 underline"
119+
className="text-black dark:text-white darkest:text-white hover:text-black/70 dark:hover:text-white/70 darkest:hover:text-white/70 underline"
120120
>
121121
Submit another registration
122122
</button>
123123
</div>
124124
) : (
125-
<form onSubmit={handleSubmit} className="border border-black/10 rounded-lg p-8">
125+
<form onSubmit={handleSubmit} className="border border-black/10 dark:border-[#40444b] darkest:border-white/20 rounded-lg p-8 bg-white dark:bg-[#2f3136] darkest:bg-black">
126126
<div className="mb-6">
127-
<label htmlFor="name" className="block text-sm font-semibold text-black mb-2">
127+
<label htmlFor="name" className="block text-sm font-semibold text-black dark:text-white darkest:text-white mb-2">
128128
Name (Presenter) <span className="text-red-500">*</span>
129129
</label>
130130
<input
@@ -134,13 +134,13 @@ export default function RegisterPage() {
134134
required
135135
value={formData.name}
136136
onChange={handleChange}
137-
className="w-full px-4 py-2 border border-black/20 rounded-lg focus:ring-2 focus:ring-black focus:border-black outline-none transition"
137+
className="w-full px-4 py-2 border border-black/20 dark:border-[#40444b] darkest:border-white/20 rounded-lg focus:ring-2 focus:ring-black dark:focus:ring-white darkest:focus:ring-white focus:border-black dark:focus:border-white darkest:focus:border-white outline-none transition bg-white dark:bg-[#1e1f22] darkest:bg-[#0a0a0a] text-black dark:text-white darkest:text-white placeholder:text-black/40 dark:placeholder:text-[#72767d] darkest:placeholder:text-white/40"
138138
placeholder="Your full name"
139139
/>
140140
</div>
141141

142142
<div className="mb-6">
143-
<label htmlFor="talkTitle" className="block text-sm font-semibold text-black mb-2">
143+
<label htmlFor="talkTitle" className="block text-sm font-semibold text-black dark:text-white darkest:text-white mb-2">
144144
Talk Title <span className="text-red-500">*</span>
145145
</label>
146146
<input
@@ -150,13 +150,13 @@ export default function RegisterPage() {
150150
required
151151
value={formData.talkTitle}
152152
onChange={handleChange}
153-
className="w-full px-4 py-2 border border-black/20 rounded-lg focus:ring-2 focus:ring-black focus:border-black outline-none transition"
153+
className="w-full px-4 py-2 border border-black/20 dark:border-[#40444b] darkest:border-white/20 rounded-lg focus:ring-2 focus:ring-black dark:focus:ring-white darkest:focus:ring-white focus:border-black dark:focus:border-white darkest:focus:border-white outline-none transition bg-white dark:bg-[#1e1f22] darkest:bg-[#0a0a0a] text-black dark:text-white darkest:text-white placeholder:text-black/40 dark:placeholder:text-[#72767d] darkest:placeholder:text-white/40"
154154
placeholder="Title of your presentation"
155155
/>
156156
</div>
157157

158158
<div className="mb-6">
159-
<label htmlFor="description" className="block text-sm font-semibold text-black mb-2">
159+
<label htmlFor="description" className="block text-sm font-semibold text-black dark:text-white darkest:text-white mb-2">
160160
Short Description <span className="text-red-500">*</span>
161161
</label>
162162
<textarea
@@ -166,22 +166,22 @@ export default function RegisterPage() {
166166
value={formData.description}
167167
onChange={handleChange}
168168
rows={4}
169-
className="w-full px-4 py-2 border border-black/20 rounded-lg focus:ring-2 focus:ring-black focus:border-black outline-none transition resize-none"
169+
className="w-full px-4 py-2 border border-black/20 dark:border-[#40444b] darkest:border-white/20 rounded-lg focus:ring-2 focus:ring-black dark:focus:ring-white darkest:focus:ring-white focus:border-black dark:focus:border-white darkest:focus:border-white outline-none transition resize-none bg-white dark:bg-[#1e1f22] darkest:bg-[#0a0a0a] text-black dark:text-white darkest:text-white placeholder:text-black/40 dark:placeholder:text-[#72767d] darkest:placeholder:text-white/40"
170170
placeholder="Brief description of your talk (200-300 words)"
171171
/>
172172
</div>
173173

174174
<div className="mb-8">
175-
<label htmlFor="expectations" className="block text-sm font-semibold text-black mb-2">
176-
What do you expect? <span className="text-black/40">(Optional)</span>
175+
<label htmlFor="expectations" className="block text-sm font-semibold text-black dark:text-white darkest:text-white mb-2">
176+
What do you expect? <span className="text-black/40 dark:text-white/40 darkest:text-white/40">(Optional)</span>
177177
</label>
178178
<textarea
179179
id="expectations"
180180
name="expectations"
181181
value={formData.expectations}
182182
onChange={handleChange}
183183
rows={3}
184-
className="w-full px-4 py-2 border border-black/20 rounded-lg focus:ring-2 focus:ring-black focus:border-black outline-none transition resize-none"
184+
className="w-full px-4 py-2 border border-black/20 dark:border-[#40444b] darkest:border-white/20 rounded-lg focus:ring-2 focus:ring-black dark:focus:ring-white darkest:focus:ring-white focus:border-black dark:focus:border-white darkest:focus:border-white outline-none transition resize-none bg-white dark:bg-[#1e1f22] darkest:bg-[#0a0a0a] text-black dark:text-white darkest:text-white placeholder:text-black/40 dark:placeholder:text-[#72767d] darkest:placeholder:text-white/40"
185185
placeholder="Share your expectations for the workshop..."
186186
/>
187187
</div>
@@ -190,13 +190,13 @@ export default function RegisterPage() {
190190
<button
191191
type="submit"
192192
disabled={isSubmitting}
193-
className="flex-1 bg-black text-white font-semibold py-3 px-6 rounded-lg hover:bg-black/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
193+
className="flex-1 bg-black dark:bg-white darkest:bg-white text-white dark:text-black darkest:text-black font-semibold py-3 px-6 rounded-lg hover:bg-black/80 dark:hover:bg-white/80 darkest:hover:bg-white/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
194194
>
195195
{isSubmitting ? 'Submitting...' : 'Submit Registration'}
196196
</button>
197197
<a
198198
href="/"
199-
className="flex-1 border border-black/20 text-black font-semibold py-3 px-6 rounded-lg hover:border-black/40 transition-colors text-center"
199+
className="flex-1 border border-black/20 dark:border-[#40444b] darkest:border-white/20 text-black dark:text-white darkest:text-white font-semibold py-3 px-6 rounded-lg hover:border-black/40 dark:hover:border-white/40 darkest:hover:border-white/40 transition-colors text-center"
200200
>
201201
Cancel
202202
</a>

‎components/ClientLayout.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
'use client';
2+
3+
import { ReactNode } from 'react';
4+
import Header from './Header';
5+
import Footer from './Footer';
6+
import ThemeToggle from './ThemeToggle';
7+
8+
export default function ClientLayout({ children }: { children: ReactNode }) {
9+
return (
10+
<>
11+
<Header />
12+
<main>
13+
{children}
14+
</main>
15+
<Footer />
16+
<ThemeToggle />
17+
</>
18+
);
19+
}

0 commit comments

Comments
 (0)