feat: implement AdminThemeToggle component with tests and integrate into admin pages

[Dubemtopsite]

This Pull Request addresses the lack of uniform Dark Mode support in the Admin Panel. It establishes standard client-side theme context across the entire repository (both standard Pages Router routes and modern App Router routes), solves Next.js hydration safety constraints, and provides a polished, high-fidelity dark visual aesthetic for all administrative control interfaces.

---

Key Features & Changes

1. Unified Theme Context

• src/pages/_app.tsx: Wrapped the Pages Router root tree with ThemeProvider so context hooks operate successfully across standard pages (useTheme, useThemeContext).

2. Hydration-Safe Controls

• src/components/admin/AdminThemeToggle.tsx: Added client-side mounting protection (useState + useEffect) to dynamically render the active theme button after page hydration. This ensures identical initial server rendering and avoids layout shifting or hydration mismatches.

3. Styled Administrative Pages (Pages Router)

• src/pages/admin/audit.tsx: Fully restyled for dark mode with curated slate tones, custom action badges, and integrated the AdminThemeToggle next to responsive header controls.
• src/pages/admin/monitoring.tsx: Reconstructed with dark compatibility. Metric details are presented alongside beautiful dynamic status progress bars that shift color (emerald, amber, red) based on real-time server health.

4. App Router Feature-Flags Integration

• src/app/pages/admin/feature-flags/page.tsx: Added the theme toggle button group directly into the sticky header next to the audit log button.

5. Automated Testing

• src/components/admin/__tests__/AdminThemeToggle.test.tsx: Implemented a targeted unit test suite that asserts:
  • Rendering of all three choices (Light, Dark, System) with proper accessibility labels.
  • Correct switching and applying of classes to document.documentElement upon user interactions.

---

Verification Outcomes

Targeted Unit Tests

Ran the Vitest runner targeting theme context interfaces:

pnpm run test src/components/admin/__tests__/AdminThemeToggle.test.tsx src/components/ui/__tests__/theme-toggle.test.tsx

Results:

• Test Files: 2 passed (2 total)
• Tests: 4 passed (4 total)

Code Quality Gates

• ESLint: Completed with 0 errors.
• Prettier: Applied standard styling cleanly to all new and modified files.

---

Issue References

Closes #510

[drips-wave]

@Dubemtopsite Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits