Skip to content

Commit d45bc83

Browse files
kh-ub-aybkh-ub-ayb
authored
Added dark mode feature to Sugar Labs website. (#453)
* dark mode * improved dark mode functionality * fixed the issues in dark mode
1 parent 1088f7c commit d45bc83

Some content is hidden

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

47 files changed

+790
-645
lines changed

‎src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const App = () => {
2323
}, []);
2424

2525
return (
26-
<div className="min-h-screen flex flex-col">
26+
<div className="min-h-screen flex flex-col bg-white dark:bg-gray-900">
2727
<RouterProvider router={router} />
2828
</div>
2929
);

‎src/components/AboutUs/GoalsSection.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,21 @@ import { FC } from 'react';
44

55
const GoalsSection: FC = () => {
66
return (
7-
<section id="goals" className="w-full py-24 bg-white">
7+
<section id="goals" className="w-full py-24 bg-white dark:bg-gray-900">
88
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
99
{/* Section header */}
1010
<div className="text-center mb-16">
1111
<motion.h2
12-
className="text-3xl font-semibold text-slate-800 sm:text-4xl mb-4 tracking-tight"
12+
className="text-3xl font-semibold text-slate-800 dark:text-slate-200 sm:text-4xl mb-4 tracking-tight"
1313
initial={animations.flowContainer.initial}
1414
whileInView={animations.flowContainer.whileInView}
1515
viewport={{ once: true }}
1616
transition={{ duration: 0.6 }}
1717
>
18-
<span className="text-blue-900 font-medium">
18+
<span className="text-blue-900 dark:text-blue-400 font-medium">
1919
{sectionContent.title.main}
2020
</span>{' '}
21-
<span className="text-red-600 font-medium">
21+
<span className="text-red-600 dark:text-red-400 font-medium">
2222
{sectionContent.title.highlight}
2323
</span>
2424
</motion.h2>
@@ -32,7 +32,7 @@ const GoalsSection: FC = () => {
3232
/>
3333

3434
<motion.p
35-
className="text-base sm:text-lg text-slate-600 max-w-3xl mx-auto"
35+
className="text-base sm:text-lg text-slate-600 dark:text-slate-300 max-w-3xl mx-auto"
3636
initial={animations.flowContainer.initial}
3737
whileInView={animations.flowContainer.whileInView}
3838
viewport={{ once: true }}
@@ -47,7 +47,7 @@ const GoalsSection: FC = () => {
4747
{goals.map((goal, i) => (
4848
<motion.div
4949
key={i}
50-
className="bg-white rounded-lg shadow-sm p-6 border border-slate-100 transition-all duration-300
50+
className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-slate-100 dark:border-gray-700 transition-all duration-300
5151
hover:shadow-md group relative overflow-hidden"
5252
initial={animations.goalItem.initial}
5353
whileInView={{ opacity: 1, x: 0 }}
@@ -66,20 +66,20 @@ const GoalsSection: FC = () => {
6666
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-rose-400 flex items-center justify-center text-white font-semibold text-sm">
6767
{i + 1}
6868
</div>
69-
<div className="h-px flex-grow bg-slate-100 ml-3"></div>
69+
<div className="h-px flex-grow bg-slate-100 dark:bg-gray-700 ml-3"></div>
7070
</div>
7171

7272
{/* Goal content */}
73-
<h4 className="font-semibold text-slate-800 text-lg mb-3">
73+
<h4 className="font-semibold text-slate-800 dark:text-slate-200 text-lg mb-3">
7474
{goal.title}
7575
</h4>
76-
<p className="text-slate-600 leading-relaxed">
76+
<p className="text-slate-600 dark:text-slate-300 leading-relaxed">
7777
{goal.description}
7878
</p>
7979

8080
{/* Category tag */}
8181
{goal.category && (
82-
<div className="mt-4 inline-block px-3 py-1 bg-slate-50 text-xs font-medium text-slate-600 rounded-full">
82+
<div className="mt-4 inline-block px-3 py-1 bg-slate-50 dark:bg-gray-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full">
8383
{goal.category}
8484
</div>
8585
)}

‎src/components/AboutUs/MissionSection.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,24 @@ import { content } from '@/constants/aboutUs/mission';
33

44
const MissionSection = () => {
55
return (
6-
<section id={content.sectionId} className="w-full py-24 bg-white">
6+
<section
7+
id={content.sectionId}
8+
className="w-full py-24 bg-white dark:bg-gray-900"
9+
>
710
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
811
{/* Section header */}
912
<div className="text-center mb-16">
1013
<motion.h2
11-
className="text-3xl font-semibold text-slate-800 sm:text-4xl mb-4 tracking-tight"
14+
className="text-3xl font-semibold text-slate-800 dark:text-slate-200 sm:text-4xl mb-4 tracking-tight"
1215
initial={{ opacity: 0, y: 20 }}
1316
whileInView={{ opacity: 1, y: 0 }}
1417
viewport={{ once: true }}
1518
transition={{ duration: 0.6 }}
1619
>
17-
<span className="text-blue-900 font-medium">
20+
<span className="text-blue-900 dark:text-blue-400 font-medium">
1821
{content.title.prefix}
1922
</span>{' '}
20-
<span className="text-red-600 font-medium">
23+
<span className="text-red-600 dark:text-red-400 font-medium">
2124
{content.title.highlighted}
2225
</span>
2326
</motion.h2>
@@ -54,7 +57,7 @@ const MissionSection = () => {
5457

5558
{/* Text content */}
5659
<motion.div
57-
className="w-full lg:w-1/2 order-1 lg:order-2 text-slate-700"
60+
className="w-full lg:w-1/2 order-1 lg:order-2 text-slate-700 dark:text-slate-300"
5861
initial={{ opacity: 0, x: 20 }}
5962
whileInView={{ opacity: 1, x: 0 }}
6063
viewport={{ once: true }}

‎src/components/AboutUs/PrinciplesSection.tsx‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,24 @@ import { principles, principlesContent } from '@/constants/aboutUs/principles';
33

44
const PrinciplesSection = () => {
55
return (
6-
<section id={principlesContent.sectionId} className="w-full py-24 bg-white">
6+
<section
7+
id={principlesContent.sectionId}
8+
className="w-full py-24 bg-white dark:bg-gray-900"
9+
>
710
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
811
{/* Section header */}
912
<div className="text-center mb-16">
1013
<motion.h2
11-
className="text-3xl font-semibold text-slate-800 sm:text-4xl mb-4 tracking-tight"
14+
className="text-3xl font-semibold text-slate-800 dark:text-slate-200 sm:text-4xl mb-4 tracking-tight"
1215
initial={{ opacity: 0, y: 20 }}
1316
whileInView={{ opacity: 1, y: 0 }}
1417
viewport={{ once: true }}
1518
transition={{ duration: 0.6 }}
1619
>
17-
<span className="text-blue-900 font-medium">
20+
<span className="text-blue-900 dark:text-blue-400 font-medium">
1821
{principlesContent.title.prefix}
1922
</span>{' '}
20-
<span className="text-red-600 font-medium">
23+
<span className="text-red-600 dark:text-red-400 font-medium">
2124
{principlesContent.title.highlight}
2225
</span>
2326
</motion.h2>
@@ -39,8 +42,8 @@ const PrinciplesSection = () => {
3942
viewport={{ once: true }}
4043
transition={{ duration: 0.8 }}
4144
>
42-
<div className="bg-slate-50 p-8 rounded-lg shadow-md border-l-2 border-indigo-700">
43-
<p className="text-base sm:text-lg text-slate-700 leading-relaxed">
45+
<div className="bg-slate-50 dark:bg-slate-800 p-8 rounded-lg shadow-md border-l-2 border-indigo-700 dark:border-indigo-500">
46+
<p className="text-base sm:text-lg text-slate-700 dark:text-slate-300 leading-relaxed">
4447
{principlesContent.description}
4548
</p>
4649
</div>
@@ -83,7 +86,7 @@ const PrinciplesSection = () => {
8386
viewport={{ once: true }}
8487
transition={{ duration: 0.6, delay: 0.1 * index }}
8588
>
86-
<div className="bg-white rounded-lg shadow-md overflow-hidden h-full flex flex-col border border-slate-200 transition-all duration-300 hover:shadow-lg hover:translate-y-[-4px]">
89+
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden h-full flex flex-col border border-slate-200 dark:border-gray-700 transition-all duration-300 hover:shadow-lg hover:translate-y-[-4px]">
8790
<div className="h-48 overflow-hidden relative">
8891
<img
8992
src={principle.image}
@@ -92,11 +95,11 @@ const PrinciplesSection = () => {
9295
/>
9396
</div>
9497

95-
<div className="p-6 flex flex-col flex-grow bg-gradient-to-b from-white to-slate-50">
96-
<h3 className="text-lg font-semibold text-slate-800 mb-3 pb-2 border-b border-slate-200">
98+
<div className="p-6 flex flex-col flex-grow bg-gradient-to-b from-white to-slate-50 dark:from-gray-800 dark:to-gray-800/50">
99+
<h3 className="text-lg font-semibold text-slate-800 dark:text-slate-200 mb-3 pb-2 border-b border-slate-200 dark:border-gray-700">
97100
{principle.title}
98101
</h3>
99-
<p className="text-slate-700 text-base">
102+
<p className="text-slate-700 dark:text-slate-300 text-base">
100103
{principle.description}
101104
</p>
102105
</div>

‎src/components/AboutUs/ProjectSection.tsx‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,24 @@ const ProjectsSection = () => {
1111
: projects.slice(0, initialProjectCount);
1212

1313
return (
14-
<section id={projectsContent.sectionId} className="w-full py-24">
14+
<section
15+
id={projectsContent.sectionId}
16+
className="w-full py-24 dark:bg-gray-900"
17+
>
1518
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
1619
{/* Section header */}
1720
<div className="text-center mb-16">
1821
<motion.h2
19-
className="text-3xl font-semibold text-slate-800 sm:text-4xl mb-4 tracking-tight"
22+
className="text-3xl font-semibold text-slate-800 dark:text-slate-200 sm:text-4xl mb-4 tracking-tight"
2023
initial={{ opacity: 0, y: 20 }}
2124
whileInView={{ opacity: 1, y: 0 }}
2225
viewport={{ once: true }}
2326
transition={{ duration: 0.6 }}
2427
>
25-
<span className="text-blue-900 font-medium">
28+
<span className="text-blue-900 dark:text-blue-400 font-medium">
2629
{projectsContent.title.prefix}
2730
</span>{' '}
28-
<span className="text-red-600 font-medium">
31+
<span className="text-red-600 dark:text-red-400 font-medium">
2932
{projectsContent.title.highlight}
3033
</span>
3134
</motion.h2>
@@ -40,7 +43,7 @@ const ProjectsSection = () => {
4043

4144
{projectsContent.description && (
4245
<motion.p
43-
className="text-base sm:text-lg text-slate-600 max-w-3xl mx-auto"
46+
className="text-base sm:text-lg text-slate-600 dark:text-slate-300 max-w-3xl mx-auto"
4447
initial={{ opacity: 0, y: 20 }}
4548
whileInView={{ opacity: 1, y: 0 }}
4649
viewport={{ once: true }}
@@ -62,14 +65,14 @@ const ProjectsSection = () => {
6265
transition={{ duration: 0.6, delay: 0.1 * i }}
6366
className="h-full"
6467
>
65-
<div className="bg-white rounded-lg shadow-md overflow-hidden h-full flex flex-col border border-slate-100 transition-all duration-300 hover:shadow-lg hover:translate-y-[-4px]">
68+
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden h-full flex flex-col border border-slate-100 dark:border-gray-700 transition-all duration-300 hover:shadow-lg hover:translate-y-[-4px]">
6669
<div className="relative">
6770
<div className="absolute top-0 right-0 z-10">
6871
<div className="bg-blue-600 text-white text-xs py-1 px-3 font-medium">
6972
Project {i + 1}
7073
</div>
7174
</div>
72-
<div className="w-full h-48 bg-slate-50 flex items-center justify-center p-6">
75+
<div className="w-full h-48 bg-slate-50 dark:bg-gray-700 flex items-center justify-center p-6">
7376
<img
7477
src={project.imageUrl}
7578
alt={project.title}
@@ -79,11 +82,11 @@ const ProjectsSection = () => {
7982
</div>
8083

8184
<div className="p-6 flex flex-col flex-grow">
82-
<h3 className="text-lg font-semibold text-slate-800 mb-3 pb-2 border-b border-slate-100">
85+
<h3 className="text-lg font-semibold text-slate-800 dark:text-slate-200 mb-3 pb-2 border-b border-slate-100 dark:border-gray-700">
8386
{project.title}
8487
</h3>
8588

86-
<p className="text-slate-600 mb-6 flex-grow text-base">
89+
<p className="text-slate-600 dark:text-slate-300 mb-6 flex-grow text-base">
8790
{project.description}
8891
</p>
8992

@@ -92,7 +95,7 @@ const ProjectsSection = () => {
9295
{project.tags.map((tag, tagIndex) => (
9396
<span
9497
key={tagIndex}
95-
className="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium"
98+
className="px-2 py-1 bg-slate-100 dark:bg-gray-700 text-slate-700 dark:text-slate-300 rounded-full text-xs font-medium"
9699
>
97100
{tag}
98101
</span>
@@ -104,7 +107,7 @@ const ProjectsSection = () => {
104107
{project.link && (
105108
<a
106109
href={project.link}
107-
className="text-blue-600 hover:text-red-600 font-medium text-sm flex items-center gap-1 mt-auto transition-colors duration-300 group"
110+
className="text-blue-600 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-400 font-medium text-sm flex items-center gap-1 mt-auto transition-colors duration-300 group"
108111
>
109112
{projectsContent.ctaText || 'Learn More'}
110113
<svg
@@ -128,7 +131,7 @@ const ProjectsSection = () => {
128131
href={project.exlink}
129132
target="_blank"
130133
rel="noopener noreferrer"
131-
className="text-blue-600 hover:text-red-600 font-medium text-sm flex items-center gap-1 mt-auto transition-colors duration-300 group"
134+
className="text-blue-600 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-400 font-medium text-sm flex items-center gap-1 mt-auto transition-colors duration-300 group"
132135
>
133136
{projectsContent.ctaText || 'Visit Website'}
134137
<svg
@@ -149,7 +152,7 @@ const ProjectsSection = () => {
149152

150153
{!project.link && !project.exlink && (
151154
<button
152-
className="text-blue-600 hover:text-red-600 font-medium text-sm flex items-center gap-1 mt-auto transition-colors duration-300 group"
155+
className="text-blue-600 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-400 font-medium text-sm flex items-center gap-1 mt-auto transition-colors duration-300 group"
153156
onClick={() => (window.location.href = '#projects')}
154157
>
155158
{projectsContent.ctaText || 'Learn More'}
@@ -186,7 +189,7 @@ const ProjectsSection = () => {
186189
{!showAllProjects ? (
187190
<button
188191
onClick={() => setShowAllProjects(true)}
189-
className="px-8 py-3 bg-blue-600 hover:bg-red-600 cursor-pointer text-white rounded-lg shadow-sm font-medium transition-all duration-300 inline-flex items-center gap-2"
192+
className="px-8 py-3 bg-blue-600 hover:bg-red-600 dark:bg-blue-600 dark:hover:bg-red-700 cursor-pointer text-white rounded-lg shadow-sm font-medium transition-all duration-300 inline-flex items-center gap-2"
190193
>
191194
Show more
192195
<svg

0 commit comments

Comments
 (0)