Skip to content

Comments

add dark mode toggle button with improved UI#49

Open
DevxNadeem wants to merge 2 commits intoclubgamma:mainfrom
DevxNadeem:dark-mode-toggle
Open

add dark mode toggle button with improved UI#49
DevxNadeem wants to merge 2 commits intoclubgamma:mainfrom
DevxNadeem:dark-mode-toggle

Conversation

@DevxNadeem
Copy link

🚀 Overview

This PR introduces a Dark Mode Toggle Button to improve user experience by allowing users to switch between light and dark themes.

The toggle is implemented using shadcn/ui components and tailwind css


✨ Changes Made

  • Add other section for dark mode button
  • Used Lucide icons (Sun / Moon) based on current theme
  • Styled button with:
    • Rounded full design
    • Hover transition effects
    • Smooth scaling animation
    • Glassmorphism-inspired background
  • Ensured responsive and centered alignment
  • Installed and configured Prettier for consistent formatting

🛠 Technical Details

  • Conditional rendering for theme-based icon switching
  • Added Tailwind utility classes for smooth UI transitions
  • No breaking changes introduced

📸 Screenshots

🌞 Light Mode
Screenshot (161)

🌙 Dark Mode
Screenshot (162)


📌 Type of Change

  • New feature
  • UI enhancement
  • Code formatting improvement

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.

1 participant