Skip to content

Commit a972305

Browse files
kalidiagnekalidiagne
authored
feat: add dark mode #422 (#466)
* feat: add dark mode #422
1 parent 1866c24 commit a972305

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+465
-310
lines changed

‎app/(pages)/about/page.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ export default async function AboutPage() {
1616

1717
return (
1818
<div className="flex flex-col">
19-
<div className="w-full bg-page-header-gradient">
19+
<div className="w-full bg-page-header-gradient dark:bg-transparent-gradient">
2020
<AppContent className="flex flex-col gap-4 py-10 w-full max-w-[978px] mx-auto">
2121
<Label.PageTitle label={LABELS.ABOUT_PAGE.TITLE} />
22-
<h6 className="font-sans text-base font-normal text-tuatara-950 md:text-[18px] md:leading-[27px] md:max-w-[700px]">
22+
<h6 className="font-sans text-base font-normal text-primary md:text-[18px] md:leading-[27px] md:max-w-[700px]">
2323
{LABELS.ABOUT_PAGE.DESCRIPTION}
2424
</h6>
2525
<Link
@@ -42,7 +42,7 @@ export default async function AboutPage() {
4242
</Link>
4343
</AppContent>
4444
</div>
45-
<Divider.Section className="bg-white">
45+
<Divider.Section className="bg-background">
4646
<div className="flex justify-center">
4747
<AppContent className="container flex w-full max-w-[978px] flex-col gap-8 py-10 md:py-16">
4848
<Label.Section

‎app/(pages)/blog/[slug]/page.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ export default function BlogArticle({ params }: any) {
8383
: undefined,
8484
}}
8585
/>
86-
<div className="flex items-start justify-center z-0 bg-cover border-tuatara-300 border-b w-full">
86+
<div className="flex items-start justify-center z-0 bg-cover border-tuatara-300 border-b w-full dark:border-anakiwa-800">
8787
<AppContent className="flex flex-col gap-8 py-10 max-w-[978px]">
8888
<Label.PageTitle
8989
label={post?.title}
@@ -135,7 +135,7 @@ export default function BlogArticle({ params }: any) {
135135
<span
136136
className={cn(
137137
"text-sm italic",
138-
imageAsCover ? "text-white" : "text-tuatara-950"
138+
imageAsCover ? "text-white" : "text-primary"
139139
)}
140140
>
141141
Tags:

‎app/(pages)/blog/tags/[tag]/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ const BlogTagPage = async ({ params }: BlogTagPageProps) => {
8383
<AppContent className="flex flex-col gap-10 pb-10 lg:py-10 lg:max-w-[978px]">
8484
<div className="flex flex-col gap-4 py-10 w-full">
8585
<Link
86-
className="flex items-center gap-2 text-tuatara-950/80 hover:text-tuatara-950 mr-auto"
86+
className="flex items-center gap-2 text-primary/80 hover:text-primary mr-auto"
8787
href="/blog"
8888
>
8989
<Icons.arrowLeft />

‎app/(pages)/blog/tags/page.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const BlogTagsPage = async () => {
3636
<AppContent className="flex flex-col gap-6 py-10 lg:max-w-[978px]">
3737
<div className="flex flex-col gap-4 py-10 w-full">
3838
<Link
39-
className="flex items-center gap-2 text-tuatara-950/80 hover:text-tuatara-950 mr-auto"
39+
className="flex items-center gap-2 text-primary/80 hover:text-primary mr-auto"
4040
href="/blog"
4141
>
4242
<Icons.arrowLeft />
@@ -53,7 +53,7 @@ const BlogTagsPage = async () => {
5353
<Link
5454
href={`/blog/tags/${tag.id}`}
5555
key={tag.id}
56-
className="text-neutral-950 border-b-[2px] border-b-anakiwa-500 text-sm font-medium w-fit hover:text-anakiwa-500 duration-200"
56+
className="text-primary border-b-[2px] border-b-anakiwa-500 text-sm font-medium w-fit hover:text-anakiwa-500 duration-200"
5757
>
5858
{tag.name}
5959
</Link>

‎app/(pages)/devcon-7/sections/Devcon7Booths.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,10 @@ export const Devcon7Booths = () => {
3333
<span className="text-anakiwa-500 text-xs font-sans leading-5 tracking-[2.5px] uppercase font-bold">
3434
BOOTH
3535
</span>
36-
<span className="text-[22px] leading-[24px] text-tuatara-950 font-display font-bold">
36+
<span className="text-[22px] leading-[24px] text-primary font-display font-bold">
3737
{booth?.title}
3838
</span>
39-
<span className="text-xs text-tuatara-950 font-sans font-normal">
39+
<span className="text-xs text-primary font-sans font-normal">
4040
{booth?.description}
4141
{booth?.learMore && (
4242
<Link

‎app/(pages)/devcon-7/sections/Devcon7Section.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const EventCard = ({ event = {}, speakers = [], location = "" }: any) => {
3232
)}
3333
>
3434
<div className="flex flex-col gap-1 order-3 lg:order-1">
35-
<span className="text-sm text-tuatara-950 font-bold font-sans leading-5">
35+
<span className="text-sm text-primary font-bold font-sans leading-5">
3636
{event?.date}
3737
</span>
3838
<div className="grid grid-cols-[1fr_16px] lg:grid-cols-1">
@@ -70,7 +70,7 @@ const EventCard = ({ event = {}, speakers = [], location = "" }: any) => {
7070
<Link
7171
href={event?.url ?? "#"}
7272
target="_blank"
73-
className="text-[22px] inline-flex leading-[24px] text-tuatara-950 underline font-display hover:text-anakiwa-500 font-bold duration-200"
73+
className="text-[22px] inline-flex leading-[24px] text-primary underline font-display hover:text-anakiwa-500 font-bold duration-200"
7474
>
7575
{event?.title}
7676
</Link>
@@ -105,7 +105,7 @@ const EventCard = ({ event = {}, speakers = [], location = "" }: any) => {
105105
"lg:transition-none lg:overflow-visible"
106106
)}
107107
>
108-
<span className="text-base leading-6 text-tuatara-950 font-sans font-normal">
108+
<span className="text-base leading-6 text-primary font-sans font-normal">
109109
{event?.description}
110110
</span>
111111
<div className="pt-2 flex lg:!hidden">

‎app/(pages)/programs/index.tsx

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ type ProgramDetailProps = {
2828

2929
const SectionTitle = ({ label }: { label: string }) => {
3030
return (
31-
<span className="text-center font-display text-[32px] font-bold text-tuatara-950">
31+
<span className="text-center font-display text-[32px] font-bold text-primary">
3232
{label}
3333
</span>
3434
)
@@ -44,7 +44,7 @@ const AccordionLabel = ({
4444
return (
4545
<span
4646
className={twMerge(
47-
"mx-auto text-center text-base font-bold uppercase tracking-[3.36px] text-tuatara-950",
47+
"mx-auto text-center text-base font-bold uppercase tracking-[3.36px] text-primary",
4848
className
4949
)}
5050
>
@@ -62,28 +62,30 @@ const ProgramDetail = ({
6262
}: ProgramDetailProps) => {
6363
return (
6464
<div className="flex flex-col gap-4 text-center">
65-
<span className="font-display text-lg font-bold leading-none text-black">
65+
<span className="font-display text-lg font-bold leading-none text-primary">
6666
{region} <br />
6767
{title}
6868
</span>
6969

7070
{deadline && (
71-
<span className="font-sans text-xs font-normal italic text-tuatara-500">
71+
<span className="font-sans text-xs font-normal italic text-tuatara-500 dark:text-whit">
7272
Application Deadline: {deadline}
7373
</span>
7474
)}
7575

7676
{location && (
7777
<div className="mx-auto flex items-center gap-2">
7878
<Icons.location />
79-
<span className="font-sans text-xs font-normal text-black">
79+
<span className="font-sans text-xs font-normal text-primary">
8080
{location}
8181
</span>
8282
</div>
8383
)}
8484
<div className="mx-auto flex items-center gap-2">
8585
<Icons.calendar />
86-
<span className="font-sans text-xs font-normal text-black">{date}</span>
86+
<span className="font-sans text-xs font-normal text-primary">
87+
{date}
88+
</span>
8789
</div>
8890
</div>
8991
)
@@ -154,7 +156,7 @@ export const ProgramPageContent = () => {
154156

155157
return (
156158
<Divider.Section className="flex flex-col">
157-
<div className="bg-second-gradient">
159+
<div className="bg-second-gradient dark:bg-transparent-gradient">
158160
<PageHeader
159161
title={LABELS.PROGRAMS_PAGE.TITLE}
160162
subtitle={LABELS.PROGRAMS_PAGE.DESCRIPTION}
@@ -173,13 +175,13 @@ export const ProgramPageContent = () => {
173175
<div className="sticky right-0 top-0 z-10 mx-auto flex w-full max-w-screen-3xl">
174176
<div
175177
id="sidebar"
176-
className="relative ml-auto hidden bg-white p-2 lg:block"
178+
className="relative ml-auto hidden bg-background p-2 lg:block"
177179
>
178180
<div className="absolute right-0 mt-[80px] flex flex-col gap-4 lg:w-[220px] xl:w-[320px] xl:px-8">
179-
<h6 className="font-display text-lg font-bold text-tuatara-700">
181+
<h6 className="font-display text-lg font-bold text-secondary">
180182
{LABELS.COMMON.ON_THIS_PAGE}
181183
</h6>
182-
<ul className="text-normal font-sans text-black">
184+
<ul className="text-normal font-sans text-primary">
183185
{ProgramSections.map((id: string) => {
184186
const label = getSectionTitle(id)
185187

@@ -262,7 +264,7 @@ export const ProgramPageContent = () => {
262264
return (
263265
<span
264266
key={index}
265-
className="font-sans text-base text-tuatara-950"
267+
className="font-sans text-base text-primary"
266268
>
267269
{description}
268270
</span>
@@ -304,7 +306,7 @@ export const ProgramPageContent = () => {
304306
value: index.toString(),
305307
children: (
306308
<span
307-
className="font-sans text-sm font-normal text-black"
309+
className="font-sans text-sm font-normal text-primary"
308310
dangerouslySetInnerHTML={{
309311
__html: answer?.toString() ?? "",
310312
}}
@@ -362,7 +364,7 @@ export const ProgramPageContent = () => {
362364
return (
363365
<span
364366
key={index}
365-
className="font-sans text-base text-tuatara-950"
367+
className="font-sans text-base text-primary"
366368
>
367369
{description}
368370
</span>
@@ -376,7 +378,7 @@ export const ProgramPageContent = () => {
376378
<div className="flex flex-col gap-8 pb-10 md:pb-16">
377379
<div id="howToApply" className="flex flex-col gap-8">
378380
<div>
379-
<span className="text-base font-medium text-tuatara-950">
381+
<span className="text-base font-medium text-primary">
380382
{LABELS.PROGRAMS_PAGE.HOW_TO_APPLY.OPEN_TASKS.TITLE}
381383
</span>
382384
<ul className="list-decimal">
@@ -388,7 +390,7 @@ export const ProgramPageContent = () => {
388390
className="ml-8 list-item items-center"
389391
>
390392
<div
391-
className="text-tuatara-950"
393+
className="text-primary"
392394
dangerouslySetInnerHTML={{
393395
__html: task,
394396
}}
@@ -400,7 +402,7 @@ export const ProgramPageContent = () => {
400402
</ul>
401403
</div>
402404
<div>
403-
<span className="text-base font-medium text-tuatara-950">
405+
<span className="text-base font-medium text-primary">
404406
{
405407
LABELS.PROGRAMS_PAGE.HOW_TO_APPLY.SUBMIT_IDEA
406408
.TITLE
@@ -426,7 +428,7 @@ export const ProgramPageContent = () => {
426428
)}
427429
</ul>
428430
</div>
429-
<span className="text-base text-tuatara-950">
431+
<span className="text-base text-primary">
430432
{LABELS.PROGRAMS_PAGE.HOW_TO_APPLY.DESCRIPTION}
431433
</span>
432434
</div>
@@ -445,7 +447,7 @@ export const ProgramPageContent = () => {
445447
label,
446448
value: index.toString(),
447449
children: (
448-
<span className="flex flex-col gap-3 text-base text-tuatara-950">
450+
<span className="flex flex-col gap-3 text-base text-primary">
449451
{typeof answer === "string"
450452
? answer
451453
: answer.map((item, index) => {

‎app/(pages)/projects/page.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@ export const metadata: Metadata = {
1717
export default async function ProjectsPage() {
1818
return (
1919
<div className="flex flex-col">
20-
<div className="w-full bg-page-header-gradient">
20+
<div className="w-full bg-page-header-gradient dark:bg-transparent-gradient">
2121
<AppContent className="flex flex-col gap-4 py-10 w-full">
2222
<Label.PageTitle label={LABELS.PROJECTS_PAGE.TITLE} />
23-
<h6 className="font-sans text-base font-normal text-tuatara-950 md:text-[18px] md:leading-[27px] md:max-w-[700px]">
23+
<h6 className="font-sans text-base font-normal text-primary md:text-[18px] md:leading-[27px] md:max-w-[700px]">
2424
{LABELS.PROJECTS_PAGE.SUBTITLE}
2525
</h6>
2626
</AppContent>

‎app/(pages)/projects/sections/ProjectContent.tsx

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -20,41 +20,46 @@ import { ProjectTeamMembers } from "@/components/project/project-team"
2020
import { ProjectBlogArticles } from "@/components/blog/project-blog-articles"
2121
import { ProjectYouTubeVideos } from "@/components/sections/ProjectYouTubeVideos"
2222
import { useProjects } from "@/app/providers/ProjectsProvider"
23+
import { Button } from "@/components/ui/button"
24+
25+
const markdownContentClassName =
26+
"text-neutral-700 text-[22px] leading-6 font-bold pt-10 pb-4 dark:text-tuatara-100"
2327

2428
const markdownComponents = {
2529
h1: ({ ...props }) =>
2630
createMarkdownElement("h1", {
27-
className: "text-neutral-700 text-[22px] leading-6 font-bold pt-10 pb-4",
31+
className: markdownContentClassName,
2832
...props,
2933
}),
3034
h2: ({ ...props }) =>
3135
createMarkdownElement("h2", {
32-
className: "text-neutral-700 text-[22px] leading-6 font-bold pt-10 pb-4",
36+
className: markdownContentClassName,
3337
...props,
3438
}),
3539
h3: ({ ...props }) =>
3640
createMarkdownElement("h3", {
37-
className: "text-neutral-700 text-[22px] leading-6 font-bold pt-10 pb-4",
41+
className: markdownContentClassName,
3842
...props,
3943
}),
4044
h4: ({ ...props }) =>
4145
createMarkdownElement("h4", {
42-
className: "text-neutral-700 text-[22px] leading-6 font-bold pt-10 pb-4",
46+
className: markdownContentClassName,
4347
...props,
4448
}),
4549
h5: ({ ...props }) =>
4650
createMarkdownElement("h5", {
47-
className: "text-neutral-700 text-[22px] leading-6 font-bold pt-10 pb-4",
51+
className: markdownContentClassName,
4852
...props,
4953
}),
5054
h6: ({ ...props }) =>
5155
createMarkdownElement("h6", {
52-
className: "text-neutral-700 text-[22px] leading-6 font-bold pt-10 pb-4",
56+
className: markdownContentClassName,
5357
...props,
5458
}),
5559
p: ({ ...props }) =>
5660
createMarkdownElement("p", {
57-
className: "py-2 leading-[150%] text-base text-slate-600",
61+
className:
62+
"py-2 leading-[150%] text-base text-slate-600 dark:text-tuatara-100",
5863
...props,
5964
}),
6065
}
@@ -81,10 +86,8 @@ export const ProjectContent = ({ id }: { id: string }) => {
8186
return null
8287
}
8388

84-
console.log(" rest", project)
85-
8689
return (
87-
<section className="bg-project-page-gradient">
90+
<section className="bg-project-page-gradient dark:bg-transparent-gradient">
8891
<div className="flex flex-col">
8992
<Divider.Section className="flex flex-col items-center">
9093
<AppContent className="flex flex-col gap-12 py-16">
@@ -109,7 +112,7 @@ export const ProjectContent = ({ id }: { id: string }) => {
109112
<div className="flex flex-col">
110113
<div className="flex flex-col gap-6 text-left">
111114
<Link
112-
className="flex items-center gap-2 text-tuatara-950/80 hover:text-tuatara-950 mr-auto"
115+
className="flex items-center gap-2 text-primary/80 hover:text-primary mr-auto"
113116
href="/projects"
114117
>
115118
<Icons.arrowLeft />
@@ -142,7 +145,7 @@ export const ProjectContent = ({ id }: { id: string }) => {
142145
>
143146
<div className="flex items-center gap-2">
144147
{ProjectLinkIconMap?.[key]}
145-
<p className="capitalize duration-200 text-slate-600 group-hover:text-orange">
148+
<p className="capitalize duration-200 text-slate-600 group-hover:text-orange dark:text-white dark:group-hover:text-orange">
146149
{key}
147150
</p>
148151
</div>
@@ -203,10 +206,10 @@ export const ProjectContent = ({ id }: { id: string }) => {
203206
target="_blank"
204207
rel="noreferrer"
205208
passHref
206-
className="inline-flex items-center self-start gap-2 px-4 py-2 duration-200 bg-white border-2 rounded-md group border-tuatara-950 hover:bg-tuatara-950 hover:text-white"
209+
className="inline-flex items-center self-start gap-2 px-4 py-2 duration-200 bg-white border-2 rounded-md group border-tuatara-950 hover:bg-tuatara-950 hover:text-white dark:bg-black dark:border-anakiwa-800 dark:border dark:hover:bg-anakiwa-400"
207210
>
208211
<Icons.edit />
209-
<span className="text-sm duration-200 text-tuatara-950 group-hover:text-white">
212+
<span className="text-sm duration-200 text-primary group-hover:text-white">
210213
{LABELS.COMMON.EDIT_THIS_PAGE}
211214
</span>
212215
</Link>

‎app/(pages)/research/page.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ export const metadata: Metadata = {
1313
const ResearchPage = async () => {
1414
return (
1515
<div className="flex flex-col gap-10 lg:gap-32 pb-[128px] ">
16-
<div className="w-full bg-page-header-gradient">
16+
<div className="w-full bg-page-header-gradient dark:bg-transparent-gradient">
1717
<AppContent className="flex flex-col gap-4 py-10 w-full">
1818
<Label.PageTitle label={LABELS.RESEARCH_PAGE.TITLE} />
19-
<h6 className="font-sans text-base font-normal text-tuatara-950 md:text-[18px] md:leading-[27px] md:max-w-[700px]">
19+
<h6 className="font-sans text-base font-normal text-primary md:text-[18px] md:leading-[27px] md:max-w-[700px]">
2020
{LABELS.RESEARCH_PAGE.SUBTITLE}
2121
</h6>
2222
</AppContent>

0 commit comments

Comments
 (0)