Skip to content

Added dark mode feature to Sugar Labs website. #453

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 5, 2025
Merged

Added dark mode feature to Sugar Labs website. #453

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e8c2cec
dark mode
kh-ub-ayb Oct 1, 2025
23e303b
improved dark mode functionality
kh-ub-ayb Oct 3, 2025
03cc73f
fixed the issues in dark mode
kh-ub-ayb Oct 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const App = () => {
}, []);

return (
<div className="min-h-screen flex flex-col">
<div className="min-h-screen flex flex-col bg-white dark:bg-gray-900">
<RouterProvider router={router} />
</div>
);
Expand Down
20 changes: 10 additions & 10 deletions src/components/AboutUs/GoalsSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,21 @@ import { FC } from 'react';

const GoalsSection: FC = () => {
return (
<section id="goals" className="w-full py-24 bg-white">
<section id="goals" className="w-full py-24 bg-white dark:bg-gray-900">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
{/* Section header */}
<div className="text-center mb-16">
<motion.h2
className="text-3xl font-semibold text-slate-800 sm:text-4xl mb-4 tracking-tight"
className="text-3xl font-semibold text-slate-800 dark:text-slate-200 sm:text-4xl mb-4 tracking-tight"
initial={animations.flowContainer.initial}
whileInView={animations.flowContainer.whileInView}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
>
<span className="text-blue-900 font-medium">
<span className="text-blue-900 dark:text-blue-400 font-medium">
{sectionContent.title.main}
</span>{' '}
<span className="text-red-600 font-medium">
<span className="text-red-600 dark:text-red-400 font-medium">
{sectionContent.title.highlight}
</span>
</motion.h2>
Expand All @@ -32,7 +32,7 @@ const GoalsSection: FC = () => {
/>

<motion.p
className="text-base sm:text-lg text-slate-600 max-w-3xl mx-auto"
className="text-base sm:text-lg text-slate-600 dark:text-slate-300 max-w-3xl mx-auto"
initial={animations.flowContainer.initial}
whileInView={animations.flowContainer.whileInView}
viewport={{ once: true }}
Expand All @@ -47,7 +47,7 @@ const GoalsSection: FC = () => {
{goals.map((goal, i) => (
<motion.div
key={i}
className="bg-white rounded-lg shadow-sm p-6 border border-slate-100 transition-all duration-300
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
hover:shadow-md group relative overflow-hidden"
initial={animations.goalItem.initial}
whileInView={{ opacity: 1, x: 0 }}
Expand All @@ -66,20 +66,20 @@ const GoalsSection: FC = () => {
<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">
{i + 1}
</div>
<div className="h-px flex-grow bg-slate-100 ml-3"></div>
<div className="h-px flex-grow bg-slate-100 dark:bg-gray-700 ml-3"></div>
</div>

{/* Goal content */}
<h4 className="font-semibold text-slate-800 text-lg mb-3">
<h4 className="font-semibold text-slate-800 dark:text-slate-200 text-lg mb-3">
{goal.title}
</h4>
<p className="text-slate-600 leading-relaxed">
<p className="text-slate-600 dark:text-slate-300 leading-relaxed">
{goal.description}
</p>

{/* Category tag */}
{goal.category && (
<div className="mt-4 inline-block px-3 py-1 bg-slate-50 text-xs font-medium text-slate-600 rounded-full">
<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">
{goal.category}
</div>
)}
Expand Down
13 changes: 8 additions & 5 deletions src/components/AboutUs/MissionSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,24 @@ import { content } from '@/constants/aboutUs/mission';

const MissionSection = () => {
return (
<section id={content.sectionId} className="w-full py-24 bg-white">
<section
id={content.sectionId}
className="w-full py-24 bg-white dark:bg-gray-900"
>
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
{/* Section header */}
<div className="text-center mb-16">
<motion.h2
className="text-3xl font-semibold text-slate-800 sm:text-4xl mb-4 tracking-tight"
className="text-3xl font-semibold text-slate-800 dark:text-slate-200 sm:text-4xl mb-4 tracking-tight"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
>
<span className="text-blue-900 font-medium">
<span className="text-blue-900 dark:text-blue-400 font-medium">
{content.title.prefix}
</span>{' '}
<span className="text-red-600 font-medium">
<span className="text-red-600 dark:text-red-400 font-medium">
{content.title.highlighted}
</span>
</motion.h2>
Expand Down Expand Up @@ -54,7 +57,7 @@ const MissionSection = () => {

{/* Text content */}
<motion.div
className="w-full lg:w-1/2 order-1 lg:order-2 text-slate-700"
className="w-full lg:w-1/2 order-1 lg:order-2 text-slate-700 dark:text-slate-300"
initial={{ opacity: 0, x: 20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
Expand Down
23 changes: 13 additions & 10 deletions src/components/AboutUs/PrinciplesSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,24 @@ import { principles, principlesContent } from '@/constants/aboutUs/principles';

const PrinciplesSection = () => {
return (
<section id={principlesContent.sectionId} className="w-full py-24 bg-white">
<section
id={principlesContent.sectionId}
className="w-full py-24 bg-white dark:bg-gray-900"
>
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
{/* Section header */}
<div className="text-center mb-16">
<motion.h2
className="text-3xl font-semibold text-slate-800 sm:text-4xl mb-4 tracking-tight"
className="text-3xl font-semibold text-slate-800 dark:text-slate-200 sm:text-4xl mb-4 tracking-tight"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
>
<span className="text-blue-900 font-medium">
<span className="text-blue-900 dark:text-blue-400 font-medium">
{principlesContent.title.prefix}
</span>{' '}
<span className="text-red-600 font-medium">
<span className="text-red-600 dark:text-red-400 font-medium">
{principlesContent.title.highlight}
</span>
</motion.h2>
Expand All @@ -39,8 +42,8 @@ const PrinciplesSection = () => {
viewport={{ once: true }}
transition={{ duration: 0.8 }}
>
<div className="bg-slate-50 p-8 rounded-lg shadow-md border-l-2 border-indigo-700">
<p className="text-base sm:text-lg text-slate-700 leading-relaxed">
<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">
<p className="text-base sm:text-lg text-slate-700 dark:text-slate-300 leading-relaxed">
{principlesContent.description}
</p>
</div>
Expand Down Expand Up @@ -83,7 +86,7 @@ const PrinciplesSection = () => {
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.1 * index }}
>
<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]">
<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]">
<div className="h-48 overflow-hidden relative">
<img
src={principle.image}
Expand All @@ -92,11 +95,11 @@ const PrinciplesSection = () => {
/>
</div>

<div className="p-6 flex flex-col flex-grow bg-gradient-to-b from-white to-slate-50">
<h3 className="text-lg font-semibold text-slate-800 mb-3 pb-2 border-b border-slate-200">
<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">
<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">
{principle.title}
</h3>
<p className="text-slate-700 text-base">
<p className="text-slate-700 dark:text-slate-300 text-base">
{principle.description}
</p>
</div>
Expand Down
31 changes: 17 additions & 14 deletions src/components/AboutUs/ProjectSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,24 @@ const ProjectsSection = () => {
: projects.slice(0, initialProjectCount);

return (
<section id={projectsContent.sectionId} className="w-full py-24">
<section
id={projectsContent.sectionId}
className="w-full py-24 dark:bg-gray-900"
>
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
{/* Section header */}
<div className="text-center mb-16">
<motion.h2
className="text-3xl font-semibold text-slate-800 sm:text-4xl mb-4 tracking-tight"
className="text-3xl font-semibold text-slate-800 dark:text-slate-200 sm:text-4xl mb-4 tracking-tight"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
>
<span className="text-blue-900 font-medium">
<span className="text-blue-900 dark:text-blue-400 font-medium">
{projectsContent.title.prefix}
</span>{' '}
<span className="text-red-600 font-medium">
<span className="text-red-600 dark:text-red-400 font-medium">
{projectsContent.title.highlight}
</span>
</motion.h2>
Expand All @@ -40,7 +43,7 @@ const ProjectsSection = () => {

{projectsContent.description && (
<motion.p
className="text-base sm:text-lg text-slate-600 max-w-3xl mx-auto"
className="text-base sm:text-lg text-slate-600 dark:text-slate-300 max-w-3xl mx-auto"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
Expand All @@ -62,14 +65,14 @@ const ProjectsSection = () => {
transition={{ duration: 0.6, delay: 0.1 * i }}
className="h-full"
>
<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]">
<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]">
<div className="relative">
<div className="absolute top-0 right-0 z-10">
<div className="bg-blue-600 text-white text-xs py-1 px-3 font-medium">
Project {i + 1}
</div>
</div>
<div className="w-full h-48 bg-slate-50 flex items-center justify-center p-6">
<div className="w-full h-48 bg-slate-50 dark:bg-gray-700 flex items-center justify-center p-6">
<img
src={project.imageUrl}
alt={project.title}
Expand All @@ -79,11 +82,11 @@ const ProjectsSection = () => {
</div>

<div className="p-6 flex flex-col flex-grow">
<h3 className="text-lg font-semibold text-slate-800 mb-3 pb-2 border-b border-slate-100">
<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">
{project.title}
</h3>

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

Expand All @@ -92,7 +95,7 @@ const ProjectsSection = () => {
{project.tags.map((tag, tagIndex) => (
<span
key={tagIndex}
className="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium"
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"
>
{tag}
</span>
Expand All @@ -104,7 +107,7 @@ const ProjectsSection = () => {
{project.link && (
<a
href={project.link}
className="text-blue-600 hover:text-red-600 font-medium text-sm flex items-center gap-1 mt-auto transition-colors duration-300 group"
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"
>
{projectsContent.ctaText || 'Learn More'}
<svg
Expand All @@ -128,7 +131,7 @@ const ProjectsSection = () => {
href={project.exlink}
target="_blank"
rel="noopener noreferrer"
className="text-blue-600 hover:text-red-600 font-medium text-sm flex items-center gap-1 mt-auto transition-colors duration-300 group"
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"
>
{projectsContent.ctaText || 'Visit Website'}
<svg
Expand All @@ -149,7 +152,7 @@ const ProjectsSection = () => {

{!project.link && !project.exlink && (
<button
className="text-blue-600 hover:text-red-600 font-medium text-sm flex items-center gap-1 mt-auto transition-colors duration-300 group"
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"
onClick={() => (window.location.href = '#projects')}
>
{projectsContent.ctaText || 'Learn More'}
Expand Down Expand Up @@ -186,7 +189,7 @@ const ProjectsSection = () => {
{!showAllProjects ? (
<button
onClick={() => setShowAllProjects(true)}
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"
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"
>
Show more
<svg
Expand Down
Loading