fix(finance): dark mode theme for finance page

components/FinancialSummary/AsyncAPISummary.tsx

@@ -18,7 +18,7 @@ export default function AsyncAPISummary() {
           <Heading level={HeadingLevel.h2} className='m-3 text-center text-5xl'>
             AsyncAPI Financial Summary
           </Heading>
-          <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-1 max-w-4xl text-darkGunMetal'>
+          <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-1 max-w-4xl text-darkGunMetal dark:text-dark-text'>
             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
@@ -39,7 +39,7 @@ export default function AsyncAPISummary() {
           Ways to Support Us?
         </Heading>
       </div>
-      <div className='max-width my-4 text-center text-base text-darkGunMetal'>
+      <div className='max-width my-4 text-center text-base text-darkGunMetal dark:text-dark-text'>
         <Paragraph typeStyle={ParagraphTypeStyle.sm} className='my-4'>
           The easiest way to support AsyncAPI is by becoming a financial sponsor. While{' '}
           <br className='hidden lg:inline-block' />
@@ -69,7 +69,7 @@ export default function AsyncAPISummary() {
         </a>
         <a href='https://github.com/sponsors/asyncapi' target='_blank'>
           <img
-            className='mx-4 inline size-10 transition-transform hover:scale-110 active:scale-90'
+            className='mx-4 inline size-10 transition-transform hover:scale-110 active:scale-90 dark:invert'
             src='/img/logos/github-black.svg'
             alt='Github'
           />

components/FinancialSummary/BarChartComponent.tsx

@@ -17,6 +17,7 @@ export default function BarChartComponent() {
   const [selectedCategory, setSelectedCategory] = useState<string>('All Categories');
   const [selectedMonth, setSelectedMonth] = useState<string>('All Months');
   const [windowWidth, setWindowWidth] = useState<number>(0);
+  const [isMounted, setIsMounted] = useState<boolean>(false);
 
   /*
     TODO: Uncomment the block below to enable previous-years data (2023) and "All Years" selection.
@@ -94,6 +95,7 @@ export default function BarChartComponent() {
 
   // Effect hook to update windowWidth state on resize
   useEffect(() => {
+    setIsMounted(true);
     const handleResize = () => {
       setWindowWidth(window.innerWidth);
     };
@@ -149,21 +151,23 @@ export default function BarChartComponent() {
 
   return (
     <div className='mt-8 flex items-center justify-center sm:px-6 lg:px-8'>
-      <div className='w-full px-4 text-center lg:w-2/3'>
+      <div className='w-full px-4 text-center lg:w-2/3 dark:text-dark-text'>
         <div className='mb-5'>
-          <h1 id='budget-analysis' className='my-2 mb-4 text-3xl font-semibold'>
+          <h1 id='budget-analysis' className='my-2 mb-4 text-3xl font-semibold dark:text-white'>
             Budget Analysis
           </h1>
           <p>Gain insights into the allocation of funds across different categories through our Budget Analysis</p>
           <div className='my-4 flex flex-col justify-between md:m-8 md:flex-row md:items-center md:justify-between'>
             <div className='my-2'>
               <p className='text-center sm:text-left'>Expenses</p>
-              <p className='mt-1 text-center text-xl font-semibold sm:text-left'>${totalAmount.toFixed(2)}</p>
+              <p className='mt-1 text-center text-xl font-semibold sm:text-left dark:text-white'>
+                ${totalAmount.toFixed(2)}
+              </p>
             </div>
             <div className='space-x-4 md:flex'>
               <div className='mx-auto'>
                 <select
-                  className='m-1 w-full rounded-md border border-gray-600 bg-white p-2 text-xs font-semibold text-violet sm:w-auto md:w-48'
+                  className='m-1 w-full rounded-md border border-gray-600 bg-white dark:bg-dark-card dark:text-white p-2 text-xs font-semibold text-violet sm:w-auto md:w-48'
                   value={selectedCategory}
                   onChange={(e) => setSelectedCategory(e.target.value)}
                 >
@@ -206,40 +210,42 @@ export default function BarChartComponent() {
             </div>
           </div>
         </div>
-        <div className='flex justify-center'>
-          <BarChart width={barWidth} height={barHeight} data={chartData}>
-            <CartesianGrid strokeDasharray='3 3' />
-            <YAxis tickFormatter={(value) => `$${value}`} />
-            <Tooltip content={<CustomTooltip />} />
-            <Legend />
-            <Bar
-              dataKey='Amount'
-              fill='#7B5DD3FF'
-              onClick={(data) => {
-                const category = data.payload.Category;
-
-                // Active behavior: use the static 2024 ExpensesLinkData (code 2)
-                const matchedLinkObject: ExpensesLinkItem | undefined = ExpensesLinkData.find(
-                  (obj) => obj.category === category
-                );
-
-                if (matchedLinkObject) {
-                  window.open(matchedLinkObject.link, '_blank');
-                }
-
-                // // --- if previous-years support is enabled: Uncomment code given below
-                // // const matchedLinkObject: ExpensesLinkItem | undefined = currentExpensesLinkData.find(
-                // //   (obj: ExpensesLinkItem) => obj.category === category
-                // // );
-                // //
-                // // if (matchedLinkObject) {
-                // //   window.open(matchedLinkObject.link, '_blank');
-                // // }
-              }}
-            />
-          </BarChart>
+        <div className='flex justify-center dark:text-dark-text'>
+          {isMounted && windowWidth >= 900 && (
+            <BarChart width={barWidth} height={barHeight} data={chartData}>
+              <CartesianGrid strokeDasharray='3 3' stroke='currentColor' className='opacity-30' />
+              <YAxis tickFormatter={(value) => `$${value}`} stroke='currentColor' />
+              <Tooltip content={<CustomTooltip />} />
+              <Legend wrapperStyle={{ color: 'inherit' }} />
+              <Bar
+                dataKey='Amount'
+                fill='#7B5DD3FF'
+                onClick={(data) => {
+                  const category = data.payload.Category;
+
+                  // Active behavior: use the static 2024 ExpensesLinkData (code 2)
+                  const matchedLinkObject: ExpensesLinkItem | undefined = ExpensesLinkData.find(
+                    (obj) => obj.category === category
+                  );
+
+                  if (matchedLinkObject) {
+                    window.open(matchedLinkObject.link, '_blank', 'noopener,noreferrer');
+                  }
+
+                  // // --- if previous-years support is enabled: Uncomment code given below
+                  // // const matchedLinkObject: ExpensesLinkItem | undefined = currentExpensesLinkData.find(
+                  // //   (obj: ExpensesLinkItem) => obj.category === category
+                  // // );
+                  // //
+                  // // if (matchedLinkObject) {
+                  // //   window.open(matchedLinkObject.link, '_blank');
+                  // // }
+                }}
+              />
+            </BarChart>
+          )}
         </div>
-        {windowWidth && windowWidth < 900 ? <ExpensesCard /> : null}
+        {isMounted && windowWidth < 900 ? <ExpensesCard /> : null}
       </div>
     </div>
   );

components/FinancialSummary/Card.tsx

@@ -26,7 +26,7 @@ export default function Card({ month, data }: { month: keyof Expenses; data: Exp
   }
 
   return (
-    <div className='flex h-56 flex-col overflow-hidden rounded-lg bg-slate-100 p-4 shadow-lg'>
+    <div className='flex h-56 flex-col overflow-hidden rounded-lg bg-slate-100 dark:bg-dark-card dark:text-white p-4 shadow-lg'>
       <div className='mb-4 text-lg font-semibold'>{month}</div>
       <div className='flex flex-col overflow-auto'>
         {data.map((item, index) => (

components/FinancialSummary/CustomTooltip.tsx

@@ -15,9 +15,9 @@ export default function CustomTooltip({ active, payload }: CustomTooltipProps) {
     const data = payload[0].payload;
 
     return (
-      <div className='bg-opacity-90/90 rounded-md border border-gray-300 bg-white p-2 shadow-md'>
+      <div className='rounded-md border border-gray-300 bg-white/90 p-2 shadow-md dark:border-gray-600 dark:bg-dark-card'>
         <p className='text-14 mb-1 font-bold'>{data.Category}</p>
-        <p className='text-12 text-gray-900'>${data.Amount.toFixed(2)}</p>
+        <p className='text-12 text-gray-900 dark:text-dark-text'>${data.Amount.toFixed(2)}</p>
         <p>Click the bar to learn more</p>
       </div>
     );

components/FinancialSummary/ExpenseBreakdown.tsx

@@ -11,14 +11,14 @@ import Paragraph from '../typography/Paragraph';
  */
 export default function ExpenseBreakdown() {
   return (
-    <div className='bg-[#EFFAFE] px-4 sm:px-6 lg:px-8'>
+    <div className='bg-[#EFFAFE] dark:bg-dark-background px-4 sm:px-6 lg:px-8'>
       <div className='mb-16 grid lg:grid-cols-9 lg:gap-8 lg:text-center'>
         <div className='col-span-7 col-start-2 my-12'>
           <div className='mx-2'>
             <Heading className='m-3 text-center text-base'>Expense Breakdown</Heading>
             <Paragraph
               typeStyle={ParagraphTypeStyle.md}
-              className='mx-auto my-3 max-w-4xl text-center text-darkGunMetal'
+              className='mx-auto my-3 max-w-4xl text-center text-darkGunMetal dark:text-dark-text'
             >
               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.
@@ -28,19 +28,21 @@ export default function ExpenseBreakdown() {
             {expenseData.map((expense, index) => (
               <div
                 key={index}
-                className='flex flex-col items-center rounded-md bg-white p-4 shadow-md transition-transform hover:scale-105 active:scale-90'
+                className='flex flex-col items-center rounded-md bg-white dark:bg-dark-card p-4 shadow-md transition-transform hover:scale-105 active:scale-90'
               >
                 <a href={expense.link} target='_blank' rel='noopener noreferrer'>
-                  <div className='text-darkGunMetal'>
+                  <div className='text-darkGunMetal dark:text-dark-text'>
                     <div className='flex flex-col items-center'>
                       <img
                         src={expense.imageUrl}
                         alt={expense.title}
                         className='m-1 h-auto w-1/5 rounded-md object-cover'
                       />
-                      <h2 className='my-2 text-center text-2xl font-semibold text-darkGunMetal'>{expense.title}</h2>
+                      <h2 className='my-2 text-center text-2xl font-semibold text-darkGunMetal dark:text-white'>
+                        {expense.title}
+                      </h2>
                     </div>
-                    <p className='text-center text-base text-darkGunMetal'>{expense.description}</p>
+                    <p className='text-center text-base text-darkGunMetal dark:text-dark-text'>{expense.description}</p>
                   </div>
                 </a>
               </div>

components/FinancialSummary/OtherFormsComponent.tsx

@@ -11,25 +11,29 @@ import Paragraph from '../typography/Paragraph';
  */
 export default function OtherFormsComponent() {
   return (
-    <div className='bg-[#F5F5F5] px-4 sm:px-6 lg:px-8'>
+    <div className='bg-[#F5F5F5] dark:bg-dark-background px-4 sm:px-6 lg:px-8'>
       <div className='grid lg:grid-cols-9 lg:gap-8 lg:text-center'>
         <div className='col-span-7 col-start-2 my-12'>
           <div className='mx-2'>
             <Heading className='mx-3 mb-5 mt-10 text-center text-base'>Other Forms Of Financial Support</Heading>
             <Paragraph
               typeStyle={ParagraphTypeStyle.md}
-              className='mx-auto mb-3 max-w-4xl text-center text-darkGunMetal'
+              className='mx-auto mb-3 max-w-4xl text-center text-darkGunMetal dark:text-dark-text'
             >
-              You can also support AsyncAPI initiative by getting<br className='hidden lg:inline-block'></br> involved
-              through employment, providing services and<br className='hidden lg:inline-block'></br> organizing events
+              You can also support AsyncAPI initiative by getting
+              <br className='hidden lg:inline-block'></br> involved through employment, providing services and
+              <br className='hidden lg:inline-block'></br> organizing events
             </Paragraph>
           </div>
           <div className='mx-3 mt-8 grid grid-cols-1 gap-10 md:grid-cols-3'>
-            {otherFormsData.map((form, index) => (
-              <div key={index} className='flex flex-col items-center rounded-md bg-white p-4 text-center shadow-md'>
+            {otherFormsData.map((form) => (
+              <div
+                key={form.title}
+                className='flex flex-col items-center rounded-md bg-white dark:bg-dark-card p-4 text-center shadow-md'
+              >
                 <img src={form.imageUrl} alt={form.title} className='m-2 h-auto w-1/3 object-cover' />
-                <h2 className='my-2 text-2xl font-semibold'>{form.title}</h2>
-                <p className='mx-2 mt-1 text-base text-darkGunMetal'>{form.description}</p>
+                <h2 className='my-2 text-2xl font-semibold text-gray-900 dark:text-white'>{form.title}</h2>
+                <p className='mx-2 mt-1 text-base text-darkGunMetal dark:text-dark-text'>{form.description}</p>
               </div>
             ))}
           </div>

components/FinancialSummary/SponsorshipTiers.tsx

@@ -12,14 +12,17 @@ import Paragraph from '../typography/Paragraph';
  */
 export default function SponsorshipTiers() {
   return (
-    <div className='mt-16 grid bg-purple-100 px-4 sm:px-6 lg:grid-cols-9 lg:gap-8 lg:px-8 lg:text-center'>
+    <div className='mt-16 grid bg-purple-100 dark:bg-dark-card px-4 sm:px-6 lg:grid-cols-9 lg:gap-8 lg:px-8 lg:text-center'>
       <div className='col-span-7 col-start-2 my-12'>
         <div id='sponsorship' className='mx-2'>
           <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg} className='my-3 text-base'>
             Sponsorship Tiers
           </Heading>
 
-          <Paragraph typeStyle={ParagraphTypeStyle.md} className='mx-auto my-3 max-w-4xl text-base text-darkGunMetal'>
+          <Paragraph
+            typeStyle={ParagraphTypeStyle.md}
+            className='mx-auto my-3 max-w-4xl text-base text-darkGunMetal dark:text-dark-text'
+          >
             AsyncAPI offers various sponsorship tiers, each with its own set <br className='hidden lg:inline-block' />
             of benefits and privileges. These tiers include Bronze, Silver,
             <br className='hidden lg:inline-block' />
@@ -41,13 +44,13 @@ export default function SponsorshipTiers() {
               <tbody className='font-normal text-sm'>
                 {sponsorshipTiers.map((tier, index) => (
                   <tr key={index}>
-                    <td className='border border-gray-500 p-2 text-left text-darkGunMetal md:px-10 md:py-2 md:text-base'>
+                    <td className='border border-gray-500 p-2 text-left text-darkGunMetal dark:text-dark-text md:px-10 md:py-2 md:text-base'>
                       {tier.tier}
                     </td>
-                    <td className='border border-gray-500 p-2 text-darkGunMetal md:px-10 md:py-2 md:text-base'>
+                    <td className='border border-gray-500 p-2 text-darkGunMetal dark:text-dark-text md:px-10 md:py-2 md:text-base'>
                       {tier.amount}
                     </td>
-                    <td className='border border-gray-500 p-2 text-left text-darkGunMetal md:px-10 md:py-2 md:text-base'>
+                    <td className='border border-gray-500 p-2 text-left text-darkGunMetal dark:text-dark-text md:px-10 md:py-2 md:text-base'>
                       {tier.benefits}
                     </td>
                   </tr>

components/FinancialSummary/SuccessStories.tsx

@@ -7,23 +7,23 @@ import { successStories } from '../data/successStoriesData';
  */
 export default function SuccessStories() {
   return (
-    <div className='bg-purple-100 px-4 sm:px-6 lg:px-8'>
+    <div className='bg-purple-100 dark:bg-dark-card px-4 sm:px-6 lg:px-8'>
       <div className='my-16 grid lg:grid-cols-9 lg:gap-8 lg:text-center'>
         <div className='col-span-7 col-start-2 my-12'>
           <div className='mx-2'>
-            <h1 id='success-stories' className='m-3 text-center text-4xl font-bold'>
+            <h1 id='success-stories' className='m-3 text-center text-4xl font-bold text-gray-900 dark:text-white'>
               Success Stories
             </h1>
-            <p className='mx-auto my-3 max-w-4xl text-center text-lg text-darkGunMetal'>
+            <p className='mx-auto my-3 max-w-4xl text-center text-lg text-darkGunMetal dark:text-dark-text'>
               Thanks to financial support we can already see many
               <br className='hidden lg:inline-block' /> success stories in the project.
             </p>
           </div>
           <div className='mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3'>
             {successStories.map((story, index) => (
               <div key={index} className='m-4 p-2'>
-                <h1 className='mb-2 text-2xl font-semibold'>{story.title}</h1>
-                <p className='text-base text-darkGunMetal'>{story.description}</p>
+                <h1 className='mb-2 text-2xl font-semibold text-gray-900 dark:text-white'>{story.title}</h1>
+                <p className='text-base text-darkGunMetal dark:text-dark-text'>{story.description}</p>
               </div>
             ))}
           </div>

pages/finance.tsx

@@ -55,5 +55,9 @@ export default function FinancialSummary() {
 
   const shouldUseContainer = windowWidth > 1700;
 
-  return <div>{shouldUseContainer ? <Container wide>{renderComponents()}</Container> : renderComponents()}</div>;
+  return (
+    <div className='dark:bg-dark-background'>
+      {shouldUseContainer ? <Container wide>{renderComponents()}</Container> : renderComponents()}
+    </div>
+  );
 }