Skip to content

Add dark mode toggle and yellow gradient background#1

Open
devloai[bot] wants to merge 2 commits intomainfrom
silver-peak-3054
Open

Add dark mode toggle and yellow gradient background#1
devloai[bot] wants to merge 2 commits intomainfrom
silver-peak-3054

Conversation

@devloai
Copy link

@devloai devloai bot commented Jan 8, 2026

🎨 Changes

This PR introduces a dark mode toggle and updates the background gradient to yellow tones.

Features Added

  • Dark Mode Toggle: Interactive theme switcher in navbar with sun/moon icons
  • 🎨 Yellow Gradient Background: Warm yellow gradient (yellow-50 → yellow-200) in light mode
  • 🌙 Dark Mode Support: Complete dark theme with gray gradient background
  • 💾 Theme Persistence: User preference saved and persists across sessions
  • System Theme Support: Respects OS-level dark mode preference

Implementation

  • Installed next-themes package for theme management
  • Added ThemeProvider component wrapping the app
  • Created ThemeToggle component with smooth transitions
  • Updated all components with dark: Tailwind classes:
    • Background gradients
    • Navbar and footer
    • Cards and text elements
    • Buttons and interactive elements
  • Enabled darkMode: "class" in Tailwind config

Screenshots

Light Mode (Yellow Gradient)
Light Mode

Dark Mode (Gray Gradient)
Dark Mode

Preview

🔗 Preview Link


Testing: Toggle button in navbar works seamlessly, theme persists on page reload, all UI elements properly adapt to both themes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

0 participants