feat: add dark mode for website

components/Calendar.js

@@ -13,7 +13,7 @@ export default function Calendar({ className = '', size, text="text-left" }) {
   const eventsExist = eventsData.length > 0;
   return (
     <div
-      className={`rounded-md border border-gray-200 overflow-hidden bg-white p-4`}
+      className={`rounded-md border border-gray-200 overflow-hidden dark:bg-slate-700 bg-white p-4`}
     >
       <Heading level="h2" typeStyle="heading-md-semibold">
         {t("calendar.title")}

components/CaseStudyCard.js

@@ -10,15 +10,15 @@ export default function CaseStudyCard({
       <div className="pt-10 flex flex-wrap lg:grid lg:grid-cols-3 lg:gap-8 lg:text-center">
         {studies.map((study, index) => (
           <a key={index} href={`casestudies/${study.id}`}>
-            <div className="rounded-md border border-gray-200 overflow-hidden bg-white p-4 max-w-sm" data-testid="CaseStudyCard-main">
+            <div className="rounded-md border border-gray-200 dark:border-slate-700 dark:bg-slate-700 overflow-hidden bg-white p-4 max-w-sm" data-testid="CaseStudyCard-main">
               <span className="mr-2">                  
                   <img
                     className="m-auto h-16"
                     src={study.company.logo}
                     alt={study.company.name}
                   />
               </span>
-              <Paragraph typeStyle="body-md" className="my-4">
+              <Paragraph typeStyle="body-md" className="my-4 dark:text-gray-400">
                   { study.company.description }
               </Paragraph>
             </div>

components/DarkModeToggle.js

@@ -0,0 +1,33 @@
+import { useTheme } from 'next-themes';
+import { useState } from 'react';
+
+const DarkModeToggle = () => {
+  const { theme, setTheme } = useTheme();
+  const [isDarkMode, setIsDarkMode] = useState(theme === 'dark');
+  const [isClickable, setIsClickable] = useState(true);
+
+  const toggleDarkMode = () => {
+    if (!isClickable) return;
+
+    setIsClickable(false); 
+    const newTheme = isDarkMode ? 'light' : 'dark';
+    setTheme(newTheme);
+    setIsDarkMode(!isDarkMode);
+
+    setTimeout(() => {
+      setIsClickable(true);
+    }, 500); 
+  };
+
+  return (
+    <button onClick={toggleDarkMode} className="dark-mode-toggle" disabled={!isClickable}>
+      {isDarkMode ? (
+        <img src="/img/illustrations/sun.webp" alt="Dark Mode" width={27} height={27} />
+      ) : (
+        <img src="/img/illustrations/moon.webp" alt="Light Mode" width={27} height={27} />
+      )}
+    </button>
+  );
+};
+
+export default DarkModeToggle;

components/FinancialSummary/AsyncAPISummary.js

@@ -10,7 +10,7 @@ export default function AsyncAPISummary() {
                     <Heading level="h2" className="text-5xl text-center my-3 mx-3">
                         AsyncAPI Financial Summary
                     </Heading>
-                    <Paragraph typeStyle="body-md" className="my-1 max-w-4xl text-darkGunMetal">
+                    <Paragraph typeStyle="body-md" className="dark:text-gray-600 my-1 max-w-4xl text-darkGunMetal">
                         To help improve the current state of Event-Driven Architectures and their tooling, you can show your support for
                         the AsyncAPI Initiative by making a financial contribution. We offer three donation options: <strong>Open Collective, GitHub
                             Sponsors, and Linux Foundation Crowdfunding</strong>. Our expenses are managed through Open Collective and GitHub Sponsors,
@@ -31,7 +31,7 @@ export default function AsyncAPISummary() {
                 </Heading>
             </div>
             <div className="text-center my-4 text-base max-width text-darkGunMetal">
-                <Paragraph typeStyle="body-sm" className="my-4">
+                <Paragraph typeStyle="body-sm" className="dark:text-gray-600 my-4">
                     The easiest way to support AsyncAPI is by becoming a financial sponsor. While <br className="hidden lg:inline-block" />there are alternative options,
                     they may involve greater effort. Contribute <br className="hidden lg:inline-block" />monetarily using the following channels.
                 </Paragraph>

components/FinancialSummary/BarChartComponent.js

@@ -15,9 +15,9 @@ const CustomTooltip = ({ active, payload }) => {
     if (active && payload && payload.length) {
         const data = payload[0].payload;
         return (
-            <div className="bg-opacity-90 bg-white border border-gray-300 p-2 shadow-md rounded-md">
+            <div className="bg-opacity-90 dark:bg-gray-700 bg-white border border-gray-300 p-2 shadow-md rounded-md">
                 <p className="text-14 font-bold mb-1">{data.Category}</p>
-                <p className="text-12 text-gray-900">${data.Amount.toFixed(2)}</p>
+                <p className="text-12 text-gray-900 dark:text-gray-300">${data.Amount.toFixed(2)}</p>
                 <p>Click the bar to learn more</p>
             </div>
         );
@@ -46,7 +46,7 @@ const categories = getUniqueCategories();
 
 const Card = ({ month, data, links }) => {
     return (
-        <div className="bg-slate-100 shadow-lg rounded-lg p-4 flex flex-col h-56 overflow-hidden">
+        <div className="bg-slate-100 dark:bg-slate-700 shadow-lg rounded-lg p-4 flex flex-col h-56 overflow-hidden">
             <div className="text-lg font-semibold mb-4">{month}</div>
             <div className="flex flex-col overflow-x-auto overflow-y-auto">
                 {data.map((item, index) => (

components/FinancialSummary/ContactUs.js

@@ -12,7 +12,7 @@ export default function ContactUs() {
                     <Heading level="h1" typeStyle="heading-lg">Interested in getting in touch?</Heading>
                     <Paragraph typeStyle="body-md" className="my-2 max-w-4xl">
                         Feel free to contact us if you need more explanation. We are happy to hop on a call and help with
-                        onboarding to the project as a sponsor. Write email to <span><TextLink className="text-violet text-base font-semibold" href="mailto:[email protected]" target='_blank'>[email protected]</TextLink></span>
+                        onboarding to the project as a sponsor. Write email to <span><TextLink className="text-violet text-base font-semibold dark:hover:text-white" href="mailto:[email protected]" target='_blank'>[email protected]</TextLink></span>
                     </Paragraph>
                     </div>
                 </div>

components/FinancialSummary/ExpenseBreakdown.js

@@ -3,78 +3,78 @@ import Paragraph from '../typography/Paragraph'
 
 export default function ExpenseBreakdown() {
     return (
-        <div className="px-4 sm:px-6 lg:px-8 bg-[#EFFAFE]">
+        <div className="px-4 sm:px-6 lg:px-8 dark:bg-slate-700 bg-[#EFFAFE]">
             <div className="grid lg:grid-cols-9 lg:gap-8 lg:text-center mb-16">
                 <div className="col-start-2 col-span-7 my-12">
                     <div className="mx-2">
                         <Heading className="my-3 mx-3 text-center text-base">
                             Expense Breakdown
                         </Heading>
-                        <Paragraph typeStyle="body-md" className="my-3 max-w-4xl mx-auto text-center text-darkGunMetal">
+                        <Paragraph typeStyle="body-md" className="dark:text-gray-400 my-3 max-w-4xl mx-auto text-center text-darkGunMetal">
                             Funds from GitHub Sponsors are directly transferred to our AsyncAPI Open
                             Collective account. We maintain transparency in all expenses, and the TSC approves
                             anticipated expenses.
                         </Paragraph>
                     </div>
                     <div className="grid grid-cols-1 md:grid-cols-3 gap-10 mt-8 mx-3">
 
-                        <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center">
+                        <div className="dark:bg-slate-800 bg-white rounded-md shadow-md p-4 flex flex-col items-center">
                             <div className="text-darkGunMetal">
                                 <div className="flex flex-col items-center">
                                     <img src="/img/illustrations/MentorshipProgram.webp" alt="Mentorship Program" className="w-1/5 h-auto object-cover rounded-md m-1" />
-                                    <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal">Mentorship Program</h2>
+                                    <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal dark:text-white">Mentorship Program</h2>
                                 </div>
-                                <p className="text-base text-center text-darkGunMetal">Our AsyncAPI Mentorship program offers paid guidance to develop valuable features, investing in tools and motivated individuals for community benefit.</p>
+                                <p className="dark:text-gray-600 text-base text-center text-darkGunMetal">Our AsyncAPI Mentorship program offers paid guidance to develop valuable features, investing in tools and motivated individuals for community benefit.</p>
                             </div>
                         </div>
 
-                        <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center">
+                        <div className="dark:bg-slate-800 bg-white rounded-md shadow-md p-4 flex flex-col items-center">
                             <div className="text-darkGunMetal">
                                 <div className="flex flex-col items-center">
                                     <img src="/img/illustrations/BountyProgram.webp" alt="Bounty Program" className="w-1/5 h-auto object-cover rounded-md m-1" />
-                                    <h2 className="text-2xl text-center font-semibold my-2 text-darkGunMetal">Bounty Program</h2>
+                                    <h2 className="dark:text-white text-2xl text-center font-semibold my-2 text-darkGunMetal">Bounty Program</h2>
                                 </div>
-                                <p className="text-base text-center text-darkGunMetal">Rewarding contributors regardless of affiliation or volunteer status. Free mentoring and support for newcomers to build portfolios and unlock tech prospects.</p>
+                                <p className="dark:text-gray-600 text-base text-center text-darkGunMetal">Rewarding contributors regardless of affiliation or volunteer status. Free mentoring and support for newcomers to build portfolios and unlock tech prospects.</p>
                             </div>
                         </div>
 
-                        <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center">
+                        <div className="dark:bg-slate-800 bg-white rounded-md shadow-md p-4 flex flex-col items-center">
                             <div className="text-darkGunMetal">
                                 <div className="flex flex-col items-center">
                                     <img src="/img/illustrations/Events.webp" alt="Events" className="w-1/5 h-auto object-cover rounded-md m-1" />
-                                    <h2 className="text-2xl text-center font-semibold my-2 text-darkGunMetal">Events</h2>
+                                    <h2 className="dark:text-white text-2xl text-center font-semibold my-2 text-darkGunMetal">Events</h2>
                                 </div>
-                                <p className="text-base text-center text-darkGunMetal">Supporting AsyncAPI conferences incurs costs for services and travel arrangements. Your contributions facilitate event hosting and community growth.</p>
+                                <p className="dark:text-gray-600 text-base text-center text-darkGunMetal">Supporting AsyncAPI conferences incurs costs for services and travel arrangements. Your contributions facilitate event hosting and community growth.</p>
                             </div>
                         </div>
 
-                        <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center">
+                        <div className="dark:bg-slate-800 bg-white rounded-md shadow-md p-4 flex flex-col items-center">
                             <div className="text-darkGunMetal">
                                 <div className="flex flex-col items-center">
                                     <img src="/img/illustrations/SwagStore.webp" alt="Swag Store" className="w-1/5 h-auto object-cover rounded-md m-1" />
-                                    <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal">Swag Store</h2>
+                                    <h2 className="dark:text-white text-2xl font-semibold my-2 text-center text-darkGunMetal">Swag Store</h2>
                                 </div>
-                                <p className="text-base text-center text-darkGunMetal">Creating a swag store for seamless distribution to contributors, mentees, ambassadors, and community members. Store profits can fund complimentary swag expenses.</p>
+                                <p className="dark:text-gray-600 text-base text-center text-darkGunMetal">Creating a swag store for seamless distribution to contributors, mentees, ambassadors, and community members. Store profits can fund complimentary swag expenses.</p>
                             </div>
                         </div>
 
-                        <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center">
+                        <div className="dark:bg-slate-800 bg-white rounded-md shadow-md p-4 flex flex-col items-center">
                             <div className="text-darkGunMetal">
                                 <div className="flex flex-col items-center">
                                     <img src="/img/illustrations/Hiring.webp" alt="Hiring" className="w-1/5 h-auto object-cover rounded-md m-1" />
-                                    <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal">Hiring</h2>
+                                    <h2 className="dark:text-white text-2xl font-semibold my-2 text-center text-darkGunMetal">Hiring</h2>
                                 </div>
-                                <p className="text-base text-center text-darkGunMetal">To support our community, we require full time commitment. Open Collective helps us hire for AsyncAPI. <a style={{ textDecoration: "underline" }} href="https://www.linkedin.com/in/v-thulisile-sibanda/" target='_blank'>Thulie</a> joined us as a community manager, with plans to expand our team.</p>
+                                <p className="dark:text-gray-600 text-base text-center text-darkGunMetal">To support our community, we require full time commitment. Open Collective helps us hire for AsyncAPI. <a style={{ textDecoration: "underline" }} href="https://www.linkedin.com/in/v-thulisile-sibanda/" target='_blank'>Thulie</a> joined us as a community manager, with plans to expand our team.</p>
                             </div>
                         </div>
 
-                        <div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center">
+                        <div className="dark:bg-slate-800 bg-white rounded-md shadow-md p-4 flex flex-col items-center">
                             <div className="text-darkGunMetal">
                                 <div className="flex flex-col items-center">
                                     <img src="/img/illustrations/Services.webp" alt="Services" className="w-1/5 h-auto object-cover rounded-md m-1" />
-                                    <h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal">Services</h2>
+                                    <h2 className="dark:text-white text-2xl font-semibold my-2 text-center text-darkGunMetal">Services</h2>
                                 </div>
-                                <p className="text-base text-center text-darkGunMetal">Occasionally, we must pay for services such as Zoom or Descript, as they are not available through specific Open Source support programs.</p>
+                                <p className="dark:text-gray-600 text-base text-center text-darkGunMetal">Occasionally, we must pay for services such as Zoom or Descript, as they are not available through specific Open Source support programs.</p>
                             </div>
                         </div>