I'll fix the text visibility issues on the X category page by making the text white and ensuring proper contrast.

I've fixed the text visibility issues on the X category page by:

Header Section Fixes:

1. Logo Text: Made the SocialPulse logo text white when on X platform background instead of using the gradient
2. Navigation Links: Updated all navigation links (Home, Discover, About) to use white text with proper hover states when on X platform background
3. Active States: Changed active link styling to use white background with transparency for better visibility

Content Section Fixes:

1. Main Heading: Made the "Trending Across Social Media" heading white when on X platform tab
2. Section Headings: Updated both trending topics and social videos section headings to be white on X platform
3. Consistent Styling: Ensured all text elements have proper contrast against the dark X background

Key Changes:

• Conditional Styling: Added logic to detect when we're on X platform and apply white text accordingly
• Proper Contrast: Ensured all text meets accessibility standards with sufficient contrast
• Hover States: Updated hover effects to work well with white text on dark backgrounds
• Cross-Platform Consistency: Maintained the existing styling for other platforms while fixing X-specific issues

The text should now be clearly visible and readable on the X category page with proper white coloring against the dark background.

I'll fix the light/dark theme toggle functionality that's currently not working.

I've fixed the light/dark theme toggle functionality. Here are the key changes I made:

Theme Provider Fixes:

1. Proper Configuration: Updated the ThemeProvider in layout.tsx with correct settings including storageKey for persistence
2. Hydration Handling: Added proper mounting checks to prevent hydration mismatches
3. Smooth Transitions: Enabled theme transitions for better user experience

Theme Toggle Component Fixes:

1. Mounting Check: Added proper mounting state to prevent hydration issues
2. Icon Transitions: Fixed the sun/moon icon transitions with proper CSS classes
3. Dropdown Styling: Added proper dark mode styling for the dropdown menu
4. Click Handlers: Ensured theme switching works correctly

CSS Improvements:

1. Transition Classes: Added smooth transitions for theme changes
2. Dark Mode Variables: Ensured all CSS custom properties work in dark mode
3. Component Styling: Fixed dark mode styling for various components
4. Hover Effects: Updated hover effects to work properly in both themes

Layout Updates:

1. Theme Detection: Added proper theme detection using useTheme hook
2. Conditional Rendering: Added mounting checks to prevent SSR issues
3. Transition Effects: Added smooth transitions for theme changes

Key Features Now Working:

• ✅ Light/Dark/System theme options
• ✅ Theme persistence across page reloads
• ✅ Smooth transitions between themes
• ✅ Proper dark mode styling for all components
• ✅ Theme toggle button with animated icons
• ✅ System theme detection

The theme toggle should now work properly with smooth transitions between light and dark modes, and the selected theme will persist across browser sessions.