feat!: dark Theme Rollout

.gitignore

@@ -25,3 +25,5 @@ config/tools-ignored.json
 deno.lock
 cypress/videos
 cypress/screenshots
+next-env.d.ts
+*.tsbuildinfo

components/Accordion/AccordionItem.tsx

@@ -39,9 +39,9 @@ export default function AccordionItem({ itemIndex, title, content, isActive, set
   }, [isActive]);
 
   return (
-    <div className='my-2 flex size-full flex-col gap-1 border border-gray-200 bg-white px-2'>
+    <div className='my-2 flex size-full flex-col gap-1 border-none px-2'>
       <button className='flex h-8 w-full items-center justify-between rounded-sm py-2' onClick={handleClick}>
-        <div className='font-body font-semibold text-gray-800 antialiased'>{title}</div>
+        <div className='font-body font-semibold text-gray-700 antialiased dark:text-white text-gray-700'>{title}</div>
         <div>
           {isActive ? (
             <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
@@ -72,7 +72,7 @@ export default function AccordionItem({ itemIndex, title, content, isActive, set
       >
         <div
           ref={contentRef}
-          className='rounded-sm border-t border-gray-200 py-2 font-body font-regular text-gray-700 antialiased'
+          className='rounded-sm border-none py-2 font-body font-regular text-gray-700 antialiased dark:text-white text-gray-700'
         >
           {content}
         </div>

components/Calendar.tsx

@@ -37,11 +37,15 @@ export default function Calendar({ className = '', size }: ICalendarProps) {
   return (
     <div
       className={twMerge(
-        'overflow-hidden rounded-md border border-gray-200 bg-white p-4 h-full flex flex-col gap-2',
+        'overflow-hidden rounded-md border border-gray-200 bg-white dark:bg-dark-background dark:border-border p-4 h-full flex  flex-col gap-2',
         className
       )}
     >
-      <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.mdSemibold}>
+      <Heading
+        level={HeadingLevel.h2}
+        typeStyle={HeadingTypeStyle.mdSemibold}
+        className='dark:text-dark-heading text-gray-900'
+      >
         {t('calendar.title')}
       </Heading>
       <ul>
@@ -52,8 +56,10 @@ export default function Calendar({ className = '', size }: ICalendarProps) {
                 <span className='flex-1 self-center text-center'>{dayjs(event.date).format('D')}</span>
               </div>
               <div className='grow text-left sm:mt-0 sm:pl-6'>
-                <h2 className='title-font font-medium text-gray-900 hover:text-gray-500'>{event.title}</h2>
-                <p className='text-gray-600'>
+                <h2 className='title-font font-medium text-gray-900 dark:text-white hover:text-gray-500 dark:hover:text-gray-300'>
+                  {event.title}
+                </h2>
+                <p className='text-gray-600 dark:text-gray-300'>
                   {dayjs(event.date).format('LLLL')} UTC
                   {dayjs(event.date).format('Z')}
                 </p>
@@ -63,7 +69,9 @@ export default function Calendar({ className = '', size }: ICalendarProps) {
         ))}
       </ul>
       <div className='h-full content-center'>
-        {!eventsExist && <div className='font-bold text-gray-700 lg:pb-8'>{t('calendar.noMeetingsMessage')}</div>}
+        {!eventsExist && (
+          <div className='font-bold text-gray-700 dark:text-gray-300 lg:pb-8'>{t('calendar.noMeetingsMessage')}</div>
+        )}
         <div className='sm:pt-0 md:pt-2 lg:pb-8 lg:pt-0' data-testid='Calendar-button'>
           <GoogleCalendarButton href={CALENDAR_URL} text={t('calendar.viewCalendarBtn')} />
         </div>

components/CaseStudyCard.tsx

@@ -1,16 +1,18 @@
+import Link from 'next/link';
 import React from 'react';
 
-import type { ICaseStudies } from '@/types/post';
+import type { ICaseStudies, ICaseStudy } from '@/types/post';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
+import Button from './buttons/Button';
 import Paragraph from './typography/Paragraph';
 
 interface ICaseStudyCardProps {
   studies?: ICaseStudies;
 }
 
 /**
- * @description A component that displays a list of case studies in a card format
+ * @description Displays case studies in a card grid layout
  * @param {ICaseStudies} props.studies - The list of case studies to display
  */
 export default function CaseStudyCard({ studies = [] }: ICaseStudyCardProps) {
@@ -19,21 +21,26 @@ export default function CaseStudyCard({ studies = [] }: ICaseStudyCardProps) {
   }
 
   return (
-    <div className='flex flex-wrap justify-center gap-3 pt-10 lg:gap-8 lg:text-center'>
-      {studies.map((study, index) => (
-        <a key={index} className='lg:w-[30%]' href={`casestudies/${study.id}`}>
-          <div
-            className='h-full min-h-[300px] max-w-sm overflow-hidden rounded-md border border-gray-200 bg-white p-4'
-            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={ParagraphTypeStyle.md} className='my-4'>
+    <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8'>
+      {studies.map((study: ICaseStudy) => (
+        <Link key={study.id} href={`/casestudies/${study.id}`} className='group block h-full'>
+          <div className='h-full bg-white dark:bg-dark-background border border-gray-200 dark:border-gray-700 rounded-2xl p-6 transition-all duration-300 hover:shadow-xl hover:-translate-y-1'>
+            <div className='flex items-center justify-center h-20 mb-6'>
+              <img src={study.company.logo} alt={study.company.name} className='max-h-16 max-w-full object-contain' />
+            </div>
+
+            <Paragraph typeStyle={ParagraphTypeStyle.md} className='text-gray-600 dark:text-gray-400 mb-6 line-clamp-4'>
               {study.company.description}
             </Paragraph>
+
+            <div className='mt-auto'>
+              <Button
+                text='Read case study →'
+                className='w-full bg-primary-500 hover:bg-primary-600 text-white group-hover:bg-primary-600 transition-colors'
+              />
+            </div>
           </div>
-        </a>
+        </Link>
       ))}
     </div>
   );

components/CaseTOC.tsx

@@ -95,7 +95,7 @@ function TOCItem({ item, index, currSelected, closeMenu }: TOCItemProps) {
       <nav className='relative block max-w-max'>
         <a
           className={twMerge(
-            'font-normal mb-1 flex items-center font-sans text-sm text-gray-900 antialiased transition duration-100 ease-in-out hover:underline',
+            'font-normal mb-1 flex items-center font-sans text-sm dark:text-white text-gray-900 antialiased transition duration-100 ease-in-out hover:underline',
             active && 'font-bold text-primary-500'
           )}
           href={`#${item.slug}`}
@@ -168,8 +168,8 @@ export default function CaseTOC({ className, cssBreakingPoint = 'xl', toc }: Cas
               open && 'mb-4'
             } flex-1 text-primary-500 font-medium uppercase tracking-wide text-sm font-sans antialiased ${
               cssBreakingPoint === 'xl'
-                ? 'xl:mb-4 xl:text-xs xl:text-gray-900 xl:font-bold'
-                : 'lg:mb-4 lg:text-xs lg:text-gray-900 lg:font-bold'
+                ? 'xl:mb-4 xl:text-xs xl:text-gray-900 dark:text-gray-300 xl:font-bold'
+                : 'lg:mb-4 lg:text-xs lg:text-gray-900 dark:text-gray-300 lg:font-bold'
             }`
           )}
         >

components/DarkModeToggle.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+// SVG Icons as components
+const SunIcon = ({ className = 'w-5 h-5' }) => (
+  <svg
+    className={className}
+    fill='none'
+    stroke='white'
+    strokeWidth='2'
+    viewBox='0 0 24 24'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <circle cx='12' cy='12' r='5' />
+    <path d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42' />
+  </svg>
+);
+
+const MoonIcon = ({ className = 'w-5 h-5' }) => (
+  <svg
+    className={`stroke-current text-opacity-85 text-zinc-600 ${className}`}
+    fill='none'
+    strokeWidth='2'
+    viewBox='0 0 24 24'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' />
+  </svg>
+);
+
+/**
+ * A modern toggle button component that switches between light and dark mode.
+ * Remembers the selected mode using localStorage with smooth animations.
+ */
+export default function DarkModeToggle() {
+  const [isDark, setIsDark] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    // Load preference on mount
+    const storedTheme = localStorage.getItem('theme');
+    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; // NOSONAR
+
+    const shouldUseDark = storedTheme === 'dark' || (!storedTheme && systemPrefersDark);
+
+    document.documentElement.classList.toggle('dark', shouldUseDark);
+    setIsDark(shouldUseDark);
+  }, []);
+
+  const toggleDarkMode = () => {
+    const newTheme = !isDark;
+
+    document.documentElement.classList.toggle('dark', newTheme);
+    localStorage.setItem('theme', newTheme ? 'dark' : 'light');
+    setIsDark(newTheme);
+  };
+
+  // Prevent hydration mismatch
+  if (!mounted) {
+    return <div className='w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-800 animate-pulse' />;
+  }
+
+  return (
+    <button
+      onClick={toggleDarkMode}
+      className='relative p-2 mx-2 text-zinc-800 dark:text-zinc-800 hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-primary-500 rounded-lg transition-all duration-300 group'
+      aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+    >
+      {/* Icon container with smooth rotation */}
+      <div className='relative w-5 h-5 transition-transform duration-300 group-hover:scale-110'>
+        {isDark ? (
+          <SunIcon className='w-5 h-5 transition-all duration-300 rotate-0 group-hover:rotate-12' />
+        ) : (
+          <MoonIcon className='w-5 h-5 transition-all duration-300 rotate-0 group-hover:-rotate-12' />
+        )}
+      </div>
+
+      {/* Tooltip */}
+      <div className='absolute -bottom-10 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap'>
+        {isDark ? 'Light mode' : 'Dark mode'}
+      </div>
+    </button>
+  );
+}

components/Feedback.tsx

@@ -95,31 +95,35 @@ export default function Feedback({ className }: IFeedbackProps) {
   }
 
   return (
-    <div className={`flex flex-col rounded-md border border-gray-200 p-4 shadow-md ${className}`}>
+    <div
+      className={`flex flex-col rounded-md border dark:bg-dark-card dark:border-border border-gray-200 p-4 shadow-md ${className}`}
+    >
       <div className='flex flex-row'>
-        <img src='/img/illustrations/icons/icon.svg' className='my-auto sm:size-14 lg:w-16' alt='' aria-hidden='true' />
+        <img src='/img/illustrations/icons/icon.svg' className='my-auto sm:size-14 lg:w-14' alt='' aria-hidden='true' />
         <div className='ml-4 flex flex-col'>
-          <div className='text-xl'>Was this helpful?</div>
-          <div className='text-sm text-gray-500'>Help us improve the docs by adding your contribution.</div>
+          <div className='text-xl dark:text-dark-heading'>Was this helpful?</div>
+          <div className='text-sm dark:text-dark-text text-gray-500'>
+            Help us improve the docs by adding your contribution.
+          </div>
         </div>
       </div>
       <form onSubmit={handleSubmit}>
         <div className='my-4 flex flex-col'>
           <textarea
-            className='inline-block h-20 w-full rounded-md border bg-gray-50 px-2 py-1 align-top text-sm text-gray-700 focus:border-0'
+            className='inline-block h-20 w-full rounded-md border dark:border-border dark:bg-dark-footer bg-gray-50 px-2 py-1 align-top text-sm text-gray-700 focus:border-0'
             placeholder='Write your suggestions here'
             onChange={(e) => setFeedback(e.target.value)}
             required
           />
           <div className='mt-4 block text-sm lg:flex lg:flex-row'>
             <button
-              className='w-full rounded bg-primary-500 py-2 text-white shadow-md transition-all duration-500 ease-in-out hover:shadow-lg lg:w-6/12'
+              className='w-full rounded bg-primary-500 dark:border border-primary-500 dark:hover:bg-transparent py-2 text-white shadow-md transition-all duration-300 ease-in-out hover:shadow-lg lg:w-6/12'
               type='submit'
             >
               Submit feedback
             </button>
-            <div className='my-2 w-full text-center font-medium lg:my-auto lg:w-1/12'>OR</div>
-            <GitHubIssue />
+            <div className='my-2 w-full text-center dark:text-dark-text font-medium lg:my-auto lg:w-1/12'>OR</div>
+            <GitHubIssue className='bg-secondary-500 dark:border dark:border-secondary-500 dark:hover:bg-transparent' />
           </div>
         </div>
       </form>

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'
           />