diff --git a/public/assets/Icons/chat.svg b/public/assets/Icons/chat.svg index 148ef230..98e0bd9c 100644 --- a/public/assets/Icons/chat.svg +++ b/public/assets/Icons/chat.svg @@ -1,4 +1,4 @@ - + \ No newline at end of file diff --git a/public/assets/Icons/email.svg b/public/assets/Icons/email.svg index 134b5a9c..89f0fe05 100644 --- a/public/assets/Icons/email.svg +++ b/public/assets/Icons/email.svg @@ -1,4 +1,4 @@ - + \ No newline at end of file diff --git a/public/assets/Icons/mail.svg b/public/assets/Icons/mail.svg index 6e4c46ce..965ae213 100644 --- a/public/assets/Icons/mail.svg +++ b/public/assets/Icons/mail.svg @@ -1,4 +1,4 @@ - + \ No newline at end of file diff --git a/public/assets/Icons/phone.svg b/public/assets/Icons/phone.svg index ee63a23a..40659002 100644 --- a/public/assets/Icons/phone.svg +++ b/public/assets/Icons/phone.svg @@ -1,4 +1,4 @@ - + \ No newline at end of file diff --git a/public/assets/Images/contact-us.png b/public/assets/Images/contact-us.png deleted file mode 100644 index 5f3da03f..00000000 Binary files a/public/assets/Images/contact-us.png and /dev/null differ diff --git a/public/assets/Images/dark-mode.webp b/public/assets/Images/dark-mode.webp new file mode 100644 index 00000000..bccbb48b Binary files /dev/null and b/public/assets/Images/dark-mode.webp differ diff --git a/public/assets/social/facebook.svg b/public/assets/social/facebook.svg index f66767e4..58dda3f1 100644 --- a/public/assets/social/facebook.svg +++ b/public/assets/social/facebook.svg @@ -1 +1,3 @@ -Facebook \ No newline at end of file + + + \ No newline at end of file diff --git a/public/assets/social/linkedin.svg b/public/assets/social/linkedin.svg index 0656a000..05db453f 100644 --- a/public/assets/social/linkedin.svg +++ b/public/assets/social/linkedin.svg @@ -1,14 +1,3 @@ - - - - + + \ No newline at end of file diff --git a/public/assets/social/mastodon.svg b/public/assets/social/mastodon.svg index 5e3b7e13..9202f4ef 100644 --- a/public/assets/social/mastodon.svg +++ b/public/assets/social/mastodon.svg @@ -1 +1,3 @@ -Mastodon \ No newline at end of file + + + \ No newline at end of file diff --git a/public/assets/social/medium.svg b/public/assets/social/medium.svg index 875b4e56..c00f9435 100644 --- a/public/assets/social/medium.svg +++ b/public/assets/social/medium.svg @@ -1 +1,3 @@ -Medium \ No newline at end of file + + + \ No newline at end of file diff --git a/public/assets/social/youtube.svg b/public/assets/social/youtube.svg index 0492366a..e1aceb76 100644 --- a/public/assets/social/youtube.svg +++ b/public/assets/social/youtube.svg @@ -1 +1,3 @@ -YouTube \ No newline at end of file + + + \ No newline at end of file diff --git a/src/constants/MarkdownFiles/authors/syed-khubayb-ur-rahman.md b/src/constants/MarkdownFiles/authors/syed-khubayb-ur-rahman.md new file mode 100644 index 00000000..d562b4db --- /dev/null +++ b/src/constants/MarkdownFiles/authors/syed-khubayb-ur-rahman.md @@ -0,0 +1,11 @@ +--- +name: "Syed Khubayb Ur Rahman" +slug: "syed-khubayb-ur-rahman" +title: "Contributor" +organization: "SugarLabs" +description: "Contributor at Sugar Labs" +avatar: "https://avatars.githubusercontent.com/u/193499370?v=4" + +--- + + diff --git a/src/constants/MarkdownFiles/posts/2025-10-06-adding-dark-mode-to-sugar-labs.md b/src/constants/MarkdownFiles/posts/2025-10-06-adding-dark-mode-to-sugar-labs.md new file mode 100644 index 00000000..718c5d5e --- /dev/null +++ b/src/constants/MarkdownFiles/posts/2025-10-06-adding-dark-mode-to-sugar-labs.md @@ -0,0 +1,60 @@ +--- +title: "Adding dark mode to  the main Sugar Labs website" +excerpt: "New developer Syed Khubayb Ur Rahman shares how he implemented dark mode, what issues he faced and how he debugged them." +category: "DEVELOPER NEWS" +date: "2025-10-04" +slug: "adding-dark-mode-to-sugar-labs" +author: "@/constants/MarkdownFiles/authors/syed-khubayb-ur-rahman.md" +tags: "dark-mode,accessibility,frontend,Sugar Labs" +image: "assets/Images/dark-mode.webp" +--- + + + + + +# Adding dark mode to a Sugar Labs Website + + +## Introduction +Sugar Labs builds free/libre/open-source (FLO) tools that make learning playful and accessible. I recently contributed dark mode to a Sugar Labs web project. This post outlines the problem I encountered, how I debugged and fixed it, and the key lessons I learned so others can ship accessible theming with confidence. +Repository: [https://github.com/sugarlabs/www-v2](https://github.com/sugarlabs/www-v2) + + +## The Problem +The main Sugar Labs website originally lacked a dark mode option, which made browsing less comfortable in low-light conditions. +Without dark mode, the bright interface could cause eye strain and reduce accessibility for users with light sensitivity. + + +- **Goal:** Deliver a robust dark mode that respects system preference, including a manual toggle with persistence, and  maintaining accessible contrast across the interface. + + +Implementing the dark mode required careful planning to ensure consistency and accessibility. I began by auditing the color system, identifying issues with hardcoded values, and setting up a structure that would support scalable theming. The steps below summarize my debugging process and how each challenge was resolved. + + +## Debugging and Solution +- **Color audit and mapping:** I inventoried all color usages, identified hardcoded values, and grouped them into semantic tokens (background, text, muted, accent, surface). This created a maintainable foundation for theming. +- **Single source of truth:** I centralized color decisions via tokens instead of scattering values across files and components. This reduced duplication and made changes less error‑prone. +- **Preference‑aware default:** The implementation respects the user’s system setting via the `prefers-color-scheme` media query when no explicit preference is stored. This provides a sensible baseline experience that aligns with OS‑level accessibility choices. +- **Manual toggle with persistence:** A simple theme switch allows users to override the system default. The selected theme is persisted (e.g., using `localStorage`) so their preference remains consistent across sessions. +- **Component‑wide updates:** I refactored buttons, inputs, cards, alerts, focus rings, and states (hover, active, disabled) to use tokens. Each state was validated for contrast in both themes. +- **Icons and media adjustments:** I standardized icons to adapt to the active theme and introduced subtle borders/surfaces to preserve structure on dark backgrounds. +- **Accessibility validation:** I checked contrast ratios, improved focus visibility, and tested keyboard navigation and zoom to ensure inclusive design. +- **Cross‑browser and performance checks:** I verified behavior across major browsers and optimized the switch to be instantaneous by relying on theme variables rather than heavy DOM updates. + + +## Challenges and Takeaways +- **Third‑party components:** Some libraries hardcoded their colors. Carefully scoped overrides and mapping external variables to our tokens aligned them with the overall theme. +- **Brand color tuning:** The primary accent required adjustments for dark backgrounds. Preserving hue while tweaking lightness/saturation retained brand identity and improved legibility. +- **Legacy inline styles:** Inline color rules resisted theming. Moving values into tokens eliminated one‑off overrides and simplified maintenance. +- **Documentation as leverage:** I documented the token system and theme architecture. Clear guidelines made it easier for future contributors to build consistently. +- **Accessibility‑first mindset:** Dark mode is not color inversion. Designing for contrast, depth, and hierarchy from the start avoids costly rework later. + + +## Impact and Conclusion +- **Impact on users:** Reduced eye strain, improved readability, and a cohesive experience especially valuable for users with light sensitivity. +- **Impact on the project:** A unified token system speeds up future development, theming, and contributor onboarding. +- **Community value:** The approach respects user preferences, provides control, and centers accessibility principles aligned with Sugar Labs’ mission. + + +By sharing my experience, I hope to inspire others to contribute to Sugar Labs and make a positive impact on the community. I started by defining semantic tokens, honoring system preferences, and prioritizing accessibility. Through this process, I was able to deliver a dark mode that feels natural, inclusive, and maintainable. \ No newline at end of file diff --git a/src/pages/About/ContactUs.tsx b/src/pages/About/ContactUs.tsx index b1ba7ab0..94333e4a 100644 --- a/src/pages/About/ContactUs.tsx +++ b/src/pages/About/ContactUs.tsx @@ -1,276 +1,303 @@ +import React from 'react'; +import { motion } from 'framer-motion'; +import { socialLinks } from '@/constants/Footer'; import Header from '@/sections/Header'; import Footer from '@/sections/Footer'; -import { socialLinks } from '@/constants/Footer'; import { Link } from 'react-router-dom'; -import { motion } from 'framer-motion'; -import { ReactNode } from 'react'; import { + fadeIn, slideInLeft, slideInRight, slideInBottom, - cardFadeIn, - fadeIn, - headerReveal, + bounce, + staggerContainer, + subtleRise, + dividerVariants, } from '@/styles/Animations'; -interface CardProps { - icon: string; - title: string; - content: ReactNode; -} - -const Card: React.FC = ({ icon, title, content }) => ( - - {/* Gradient bar at top */} -
- -
- {`${title} -
-

- {title} -

-
- {content} -
- -); - -const ContactUs = () => { +const ContactUs: React.FC = () => { return ( -
+ <>
-
+
{/* Hero Section */} -
+
+ +
+ +
- - Contact Us + + Contact Sugar Labs + - We'd love to hear from you. Reach out to our team and join our - global community dedicated to bringing learning opportunities to - children worldwide. + We'd love to hear from you. Here's how you can reach our team of + educational innovators. - - - Contact Us Illustration -
-
- {/* Contact Methods */} - - - - Get In{' '} - - Touch - - -
- + {/* Main Content */} +
+
+ {/* Contact Information Card */} - - Sugar Labs
- 2028 E Ben White Blvd
- STE 240 PMB 1271
- AUSTIN, TX 78741
- USA - - } - /> +
+ + + How to Reach Us + - - +1 (617) 702-4088 - - } - /> + + {/* Mail Address */} + + Sugar Labs +
+ 2028 E Ben White Blvd STE 240 PMB 1271 +
+ AUSTIN, TX 78741 +
+ USA + + } + /> - - info@sugarlabs.org - - } - /> - - + {/* Phone */} + + +1 (617) 702-4088 + + } + /> - {/* Social Links */} - - - - Connect{' '} - - With Our Community - + {/* Email */} + + info@sugarlabs.org + + } + /> -
- - Join our global community of educators, developers, and learners - who are passionate about bringing educational software to children - around the world. - + {/* Matrix Chat */} + + Go to Matrix Chat + + } + /> + +
+ + {/* Social Connect Card */} - {socialLinks.map((social) => ( - + -
- -
- - {social.name} - - - ))} - - + + Connect With The Community + + + + Join our global community of educators, developers, and + learners who are passionate about bringing educational + software to children around the world. + - {/* Matrix Chat */} - -
-
-
-
- Chat Icon -
-
-
-

- Join Our Matrix Chat -

-

- Connect with our community in real-time. Get help, share - ideas, and collaborate with fellow educators and developers. -

-
-
- - Join Chat → - -
+ + {socialLinks.map((social, index) => ( + +
+ +
+ + {social.name} + + + ))} +
-
- -
-
+ + +

+ Follow Our Progress +

+

+ Stay updated with our latest developments and educational + initiatives. +

+ + +
+ +