Public Theme Wrappers

Public Theme Wrappers

Component Files:

• src/components/shared/PublicThemeWrapper.tsx
• src/components/shared/DarkThemeWrapper.tsx

Last Updated: December 22, 2025 Status: ✅ Implemented

Overview

Theme wrapper components that apply static themes to public-facing pages. These bypass the user's theme preferences to ensure consistent branding and UX for external visitors.

PublicThemeWrapper

Forces the organic light theme on all public pages. Applied synchronously on module load to prevent flash of wrong theme.

Usage

import { PublicThemeWrapper } from './components/shared/PublicThemeWrapper';

<PublicThemeWrapper>
  <YourPublicPage />
</PublicThemeWrapper>

Applied Settings

| Attribute | Value |

|-----------|-------|

| `class` | `light` (removes `dark`) |

| `data-theme` | `organic` |

| `data-mode` | `light` |

| `data-text-size` | `normal` |

Pages Using PublicThemeWrapper

• PublicDonationPage - Donor landing pages
• PublicEventLoader - Public event pages
• ChecklistPortal - Volunteer checklist portal

DarkThemeWrapper

Forces the navy dark theme for pages that need a theatre/cinematic effect.

Usage

import { DarkThemeWrapper } from './components/shared/DarkThemeWrapper';

<DarkThemeWrapper>
  <YourDarkPage />
</DarkThemeWrapper>

Applied Settings

| Attribute | Value |

|-----------|-------|

| `class` | `dark` (removes `light`) |

| `data-theme` | `navy` |

| `data-mode` | `dark` |

| `data-text-size` | `normal` |

Pages Using DarkThemeWrapper

• VideoBlastEmbed (/vb/:publicUrl/embed) - Video playback with theatre effect

Implementation Details

Both wrappers apply theme settings in two ways:

1. On module load - Theme is applied immediately when the module is imported, before any React renders 2. On component mount - Theme is re-applied when the component mounts, in case the module was already loaded with a different theme active

This dual approach prevents any flash of incorrect theme, even if the user previously had dark mode enabled in the authenticated app.

Route Configuration

Themes are applied in main.tsx:

// Public pages with light theme
<Route path="/events/:orgIdPrefix/:orgSlug/:eventSlug" element={
  <PublicThemeWrapper>
    <PublicEventLoader />
  </PublicThemeWrapper>
} />

// VideoBlast donation landing page (light theme)
<Route path="/vb/:publicUrl" element={
  <PublicThemeWrapper>
    <VideoBlastLandingPage />
  </PublicThemeWrapper>
} />

// Optional theatre-style embed route
<Route path="/vb/:publicUrl/embed" element={
  <DarkThemeWrapper>
    <VideoBlastEmbed />
  </DarkThemeWrapper>
} />

And in App.tsx for donation routes:

if (isPublicDonationRoute()) {
  return (
    <PublicThemeWrapper>
      <PublicDonationPage />
    </PublicThemeWrapper>
  );
}

Related Documentation

• 08-DONOR-LANDING-PAGE.md - Public donation page
• 03-VIDEOBLAST-MANAGER.md - VideoBlast feature

Synced from IFMmvp-Frontend documentation: pages/components/23-PUBLIC-THEME-WRAPPERS.md