Fixed the darktheme related issue.

[Richajaishwal0]

Description

Implemented comprehensive dark theme support across the entire website to ensure consistent visual experience and proper readability in dark mode. The changes address various components and pages that were not properly styled for dark theme, providing a cohesive dark mode experience throughout the site.

This implementation standardizes dark theme colors and ensures all UI components, documentation pages, and interactive elements display correctly in both light and dark modes.

Fixes #269

Type of Change

• New feature (e.g., new page, component, or functionality)
• Bug fix (non-breaking change that fixes an issue)
• UI/UX improvement (design, layout, or styling updates)
• Performance optimization (e.g., code splitting, caching)
• Documentation update (README, contribution guidelines, etc.)
• Other (please specify):

Changes Made

• Standardized dark theme color variables in custom.css with consistent color palette:

  • Primary backgrounds: #121212, #1a1a1a, #2d2d2d
  • Text colors: #ffffff, #edf2f7, #a0aec0
  • Borders and shadows with proper contrast ratios

• Fixed documentation pages dark theme including:

  • Main content areas, sidebars, and navigation elements
  • Code blocks, syntax highlighting, and inline code
  • Tables, blockquotes, and markdown elements
  • Search functionality and modal dialogs

• Enhanced component-specific dark theme support:

  • Cards, buttons, and form elements
  • Dropdown menus and navigation components
  • Badge pages and achievement tables
  • Blog pages with modern gradient backgrounds

• Implemented proper contrast and accessibility:

  • Ensured text readability with sufficient contrast ratios
  • Added hover states and interactive feedback
  • Maintained visual hierarchy in dark mode

• ** Enhanced GUI for courses and Github Badge page.

Dependencies

• No new dependencies required
• Utilizes existing Docusaurus dark theme infrastructure
• CSS-only implementation using standardized CSS custom properties

Checklist

• My code follows the style guidelines of this project.
• I have tested my changes across major browsers/devices
• My changes do not generate new console warnings or errors , I ran npm run build and attached scrrenshot in this PR.
• This is already assigned Issue to me, not an unassigned issue.
  Some screenshots:

[vercel]

@Richajaishwal0 is attempting to deploy a commit to the recode Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs.

In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊

Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv.

We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰

🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨

📚Your perks for contribution to this community 👇🏻

1. Get free Consultation use code recode50 to get free: Mentorship for free.

2. Get the Ebook for free use code recode at checkout: Data Science cheatsheet for Beginners.

3. Check out this weekly Newsletter: Sanjay's Newsletter.

If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[Richajaishwal0]

@sanjay-kv , Let me know if u want me to work on any specific issue.

[Richajaishwal0]

@sanjay-kv sir, Let me know if any further changes required.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
recode-website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 7, 2025 0:47am

[sanjay-kv]

There is still some issue . maybe you can create a new issue to fix this.

I will deploy the site for this PR.

Your Docusaurus build is failing for these pages:

/badges/github-badges
/careers/
/courses/
/get-started/
Root Cause:
The error message says:

Hook useColorMode is called outside the .

This means your custom pages/components (like GithubBadges, CareersPage, CoursesLanding, GetStarted) are using the useColorMode hook, but are not wrapped in Docusaurus's ColorModeProvider. This breaks static site generation (SSG).

How to Fix:
Wrap your page components with ColorModeProvider:

At the top of each affected page (e.g., src/pages/courses.tsx, src/pages/get-started.tsx, etc.), wrap your component like this: