feat(theme): add dark/light theme toggle, provider, API resilience an…

[nikhilkumarpanigrahi]

feat(theme): add dark/light theme toggle, provider, API resilience and apply semantic theming

Related Tickets & Documents

Fixes: #3078
[dark-mode-toggle-issue]

Description

This PR adds a complete dark mode / light mode theme toggle to the Keploy blog website, improving accessibility, readability, and user personalization. The implementation uses Next.js 15 + Tailwind CSS with next-themes for seamless theme switching and persistence. Additionally, API resilience improvements ensure robust handling of WordPress GraphQL endpoint configuration, and new developer tooling helps contributors validate endpoints before running builds.

Changes

Core Theme Implementation

• Theme Provider: Wrapped Next.js app with next-themes ThemeProvider in pages/_app.tsx using class-based strategy (attribute="class") for Tailwind dark mode support
• Theme Toggle Component: Created components/ui/theme-toggle.tsx — an accessible, animated sliding switch with Sun/Moon icons matching Keploy brand (orange #FF914D thumb in dark mode)
• Header Integration: Injected toggle into components/header.tsx for visibility in both desktop header controls and mobile navigation

Styling & CSS Variables

• Semantic Theming: Updated components/header.tsx to use bg-background and bg-card tokens instead of hard-coded bg-white
• CSS Variable Mapping: Added .dark overrides in styles/index.css that map common hard-coded Tailwind utilities (bg-white, text-black, border-gray-*) to CSS variables for backward compatibility
• Existing Config: Leveraged tailwind.config.js which already had darkMode: ['class'] enabled and :root / .dark CSS variables defined

Theme Persistence

• localStorage Integration: User theme preference stored in localStorage (next-themes default) and restored on page reload
• System Preference Fallback: Uses system theme on first visit (defaultTheme="system")

Developer Experience & API Resilience

• API Robustness: Enhanced lib/api.ts to validate response content-type, auto-retry with /graphql appended if URL returns HTML, and log helpful snippets on failures
• Endpoint Validator: Added scripts/verify-wp-endpoint.js — CLI tool to test WPGraphQL endpoints with auto-fallback to /graphql
• npm Script: Added npm run verify-endpoint to help contributors validate WORDPRESS_API_URL before dev/build
• Documentation: Updated README.md with endpoint verification instructions

Files Changed

• pages/_app.tsx — ThemeProvider wrapper
• components/ui/theme-toggle.tsx (new) — Animated toggle component
• components/header.tsx — Toggle injection in desktop & mobile header
• lib/api.ts — Response validation and /graphql auto-retry
• scripts/verify-wp-endpoint.js (new) — Endpoint validator CLI
• package.json — Added next-themes + verify-endpoint script
• styles/index.css — .dark CSS overrides
• README.md — Endpoint verification documentation
• PR_DESCRIPTION.md (new) — Comprehensive PR notes

Type of Change

• Chore (maintenance, refactoring, tooling updates)
• New feature (change that adds functionality)
• UI improvement (visual or design changes)
• Documentation update (changes to README, guides, etc.)

Testing

Manual Testing

1. Start dev server:

   $env:WORDPRESS_API_URL='https://wp.keploy.io/graphql'; npm run dev

[amaan-bhati]

Hey @nikhilkumarpanigrahi thanks for raising this pr, can you please add more context in the pr description or maybe share a screenshot/preview of the changes that you have made before i review them on my local?

[nikhilkumarpanigrahi]

hey @amaan-bhati i have made this and tested in local
the light and dark theme toggle is working properly
and updated the pr