feat: Add dark theme toggle support

[thotaDeepika]

Summary

Implements dark theme support for DevB.io, addressing #61.

Changes

New Files

• providers/ThemeProvider.tsx - Theme context provider using next-themes
• components/ThemeToggle.tsx - Toggle button component with sun/moon icons

Modified Files

• app/layout.tsx - Wrapped app with ThemeProvider, added suppressHydrationWarning
• tailwind.config.ts - Added darkMode: "class" configuration
• components/animated-nav/client.tsx - Added ThemeToggle to desktop and mobile navigation

Features

• Toggle between light and dark themes via sun/moon icon in navbar
• Respects system preference by default
• Theme choice persists across sessions (localStorage)
• Smooth icon transitions
• Works on both desktop and mobile navigation

Dependencies Added

• next-themes - For theme management

Testing

• Theme toggle appears in navbar
• Clicking toggle switches between light/dark
• Theme persists after page refresh
• System preference is respected on first visit
• Works on mobile navigation
• All existing functionality still works

Closes #61

[vercel]

@thotaDeepika is attempting to deploy a commit to the lamsta Team on Vercel.

A member of the Team first needs to authorize it.

[gemini-code-assist]

Summary of Changes

Hello @thotaDeepika, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the user experience of DevB.io by introducing full dark theme support. It integrates a new theme provider and a user-friendly toggle into the navigation, ensuring that the site's appearance can be customized or automatically adjusted based on user preferences and system settings. The changes leverage next-themes for efficient and persistent theme management, making the application more adaptable and visually appealing.

Highlights

• Dark Theme Support: Implemented comprehensive dark theme support for DevB.io, allowing users to switch between light and dark modes.
• Theme Toggle Component: Introduced a new ThemeToggle component, featuring sun/moon icons, integrated into both desktop and mobile navigation for easy theme switching.
• Robust Theme Management: Utilized the next-themes library to manage themes, providing features like respecting system preferences, persisting theme choices across sessions, and smooth transitions.
• Tailwind CSS Configuration: Configured Tailwind CSS with darkMode: "class" to enable dynamic styling based on the theme class applied to the HTML element.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces dark theme support, which is a great feature addition. The implementation using next-themes is solid and follows best practices, including handling hydration issues. I've identified a few areas for improvement to enhance UI consistency and accessibility in dark mode, particularly concerning the site logo, embedded third-party widgets, and the theme toggle button's initial state. Overall, great work on this feature.

[gemini-code-assist]

Adding a dark background for the navigation bar is great for dark mode. However, this will likely cause issues with the site logo (/images/logo-full.png), which seems designed for a light background and may become invisible.

To fix this, you should use a different logo for dark mode. Here's a suggested approach:

1. Import useTheme from next-themes at the top of the file.
2. Get the theme in the component: const { resolvedTheme } = useTheme();
3. Create a dark mode version of your logo (e.g., /images/logo-full-dark.png).
4. Conditionally set the logo src in the Image component (lines 41-47) based on the theme:

<Image
  src={resolvedTheme === 'dark' ? '/images/logo-full-dark.png' : '/images/logo-full.png'}
  alt="DevB Logo"
  // ... other props
/>

This will ensure your branding is always visible and looks great in both themes.

[gemini-code-assist]

The theme variable is destructured from useTheme() but is never used in the component. It's good practice to remove unused variables to keep the code clean and maintainable.

Suggested change

	const { theme, setTheme, resolvedTheme } = useTheme();
	const { setTheme, resolvedTheme } = useTheme();

[gemini-code-assist]

The placeholder button rendered before the component mounts is interactive (e.g., shows hover effects) but has no onClick handler. This can be confusing for users and is not ideal for accessibility. It's better to disable the button in this state by adding the disabled attribute.

Suggested change

	aria-label="Toggle theme"
	aria-label="Toggle theme" disabled

[gemini-code-assist]

The embedded GitHub star button iframe will not automatically adapt to the theme change, leading to a light-themed button on a dark background.

To ensure UI consistency, you can dynamically set the color_scheme for the button. The GitHub buttons service supports this via a URL parameter.

Here's how you could implement this:

1. Import useTheme from next-themes and get the resolvedTheme.
2. Construct the iframe source URL dynamically before the return statement:

const ghButtonSrc = `https://ghbtns.com/github-btn.html?user=sunithvs&repo=devb.io&type=star&count=true&color_scheme=${resolvedTheme === 'dark' ? 'dark' : 'light'}`;

3. Use this ghButtonSrc variable for the src attribute of both the desktop (lines 61-69) and mobile (lines 114-121) iframes. This will make the button's theme match the site's theme.