Light mode breadcrumb text color mismatch causing inconsistent UI

frontend/__tests__/unit/components/PageLayout.test.tsx

@@ -65,4 +65,37 @@ describe('PageLayout', () => {
       expect(screen.getByText('OWASP ZAP')).toBeInTheDocument()
     })
   })
+
+  describe('breadcrumbClassName', () => {
+    test('applies default breadcrumb class when breadcrumbClassName is not passed', async () => {
+      ;(usePathname as jest.Mock).mockReturnValue('/projects/zap')
+
+      renderWithProvider(
+        <PageLayout title="OWASP ZAP">
+          <div>Content</div>
+        </PageLayout>
+      )
+
+      await screen.findByRole('navigation', { name: 'breadcrumb' })
+      const breadcrumbNav = screen.getByRole('navigation', { name: 'breadcrumb' })
+      const wrapper = breadcrumbNav.parentElement?.parentElement
+      expect(wrapper).toHaveClass('bg-white')
+      expect(wrapper).toHaveClass('dark:bg-[#212529]')
+    })
+
+    test('applies custom breadcrumb class when breadcrumbClassName is passed', async () => {
+      ;(usePathname as jest.Mock).mockReturnValue('/projects/zap')
+
+      renderWithProvider(
+        <PageLayout title="OWASP ZAP" breadcrumbClassName="custom-bg">
+          <div>Content</div>
+        </PageLayout>
+      )
+
+      await screen.findByRole('navigation', { name: 'breadcrumb' })
+      const breadcrumbNav = screen.getByRole('navigation', { name: 'breadcrumb' })
+      const wrapper = breadcrumbNav.parentElement?.parentElement
+      expect(wrapper).toHaveClass('custom-bg')
+    })
+  })
 })

frontend/src/app/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useQuery } from '@apollo/client/react'
+import { BreadcrumbStyleProvider } from 'contexts/BreadcrumbContext'
 import capitalize from 'lodash/capitalize'
 import { useParams } from 'next/navigation'
 import { useEffect } from 'react'
@@ -69,17 +70,19 @@ const ModuleDetailsPage = () => {
   ]
 
   return (
-    <DetailsCard
-      admins={admins ?? undefined}
-      details={moduleDetails}
-      domains={programModule.domains ?? undefined}
-      mentors={programModule.mentors}
-      pullRequests={(programModule.recentPullRequests as unknown as PullRequest[]) ?? []}
-      summary={programModule.description}
-      tags={programModule.tags ?? undefined}
-      title={programModule.name}
-      type="module"
-    />
+    <BreadcrumbStyleProvider className="bg-white dark:bg-[#212529]">
+      <DetailsCard
+        admins={admins ?? undefined}
+        details={moduleDetails}
+        domains={programModule.domains ?? undefined}
+        mentors={programModule.mentors}
+        pullRequests={(programModule.recentPullRequests as unknown as PullRequest[]) ?? []}
+        summary={programModule.description}
+        tags={programModule.tags ?? undefined}
+        title={programModule.name}
+        type="module"
+      />
+    </BreadcrumbStyleProvider>
   )
 }
 

frontend/src/app/mentorship/programs/[programKey]/page.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useQuery } from '@apollo/client/react'
+import { BreadcrumbStyleProvider } from 'contexts/BreadcrumbContext'
 import { useParams } from 'next/navigation'
 import { useEffect } from 'react'
 import { ErrorDisplay, handleAppError } from 'app/global-error'
@@ -66,19 +67,22 @@ const ProgramDetailsPage = () => {
   ]
 
   return (
-    <DetailsCard
-      admins={program.admins ?? undefined}
-      details={programDetails}
-      domains={program.domains ?? undefined}
-      modules={modules}
-      recentMilestones={
-        (program.recentMilestones as unknown as import('types/milestone').Milestone[]) ?? undefined
-      }
-      summary={program.description}
-      tags={program.tags ?? undefined}
-      title={program.name}
-      type="program"
-    />
+    <BreadcrumbStyleProvider className="bg-white dark:bg-[#212529]">
+      <DetailsCard
+        admins={program.admins ?? undefined}
+        details={programDetails}
+        domains={program.domains ?? undefined}
+        modules={modules}
+        recentMilestones={
+          (program.recentMilestones as unknown as import('types/milestone').Milestone[]) ??
+          undefined
+        }
+        summary={program.description}
+        tags={program.tags ?? undefined}
+        title={program.name}
+        type="program"
+      />
+    </BreadcrumbStyleProvider>
   )
 }