Preview / Test PR: #41 Feat/dark theme preview

[rishabh3562]

User description

Purpose

This PR is created to preview/test fork changes (aryadharmadhikari:feat/dark-theme) in our repo with full CI/CD and Vercel deployment.

⚠️ Do not merge. This is for testing only.

Changes Included

• Dark mode feature from fork PR
• Reverted Next.js upgrade to maintain compatibility
• Workflow updates retained (Node 20.x)
• TSConfig JSX fixes

Steps to Test

1. Vercel deployment triggered automatically
2. Check live preview at the Vercel URL
3. Verify CI/CD passes

Notes

• Once testing is done, this PR can be closed without merging.
• Original fork PR: #41

---

PR Type

Enhancement

---

Description

• Add dark mode support with next-themes integration

• Fix GitHub repository links to correct fork URL

• Update CSS color format from rgb to hsl for consistency

• Add npm install step to CI/CD deploy-preview job

• Add rate limiting dependencies for API protection

---

Diagram Walkthrough

flowchart LR
  A["Dark Mode Feature"] --> B["ThemeProvider Setup"]
  B --> C["ThemeToggle Component"]
  C --> D["CSS Updates"]
  E["GitHub Links"] --> F["Fix Repository URLs"]
  G["CI/CD Pipeline"] --> H["Add npm ci Step"]
  I["Dependencies"] --> J["Add Upstash Packages"]

Loading

File Walkthrough

	Relevant files
Enhancement	globals.css Update CSS color format and remove legacy theme variables app/globals.css Remove old CSS custom properties for light/dark mode Update color format from rgb() to hsl() for consistency Maintain existing dark mode CSS variables structure +4/-17    layout.tsx Integrate ThemeProvider for dark mode support                        app/layout.tsx Import and integrate ThemeProvider from next-themes Add suppressHydrationWarning to html element Wrap layout content with ThemeProvider configuration Configure theme with system default and localStorage persistence +15/-6    site-header.tsx Add theme toggle and fix GitHub link                                          components/site-header.tsx Import and add ThemeToggle component to header Update GitHub button link to correct repository URL Place theme toggle button in navigation bar +3/-1      theme-toggle.tsx Create theme toggle component with animations                        components/theme-toggle.tsx Create new client component for theme switching Use resolvedTheme from next-themes for reliable theme detection Implement animated Sun/Moon icons with smooth transitions Include hydration safety check with mounted state +30/-0
Bug fix	ci-cd-pipeline.yml Add npm install step to deploy-preview job                              .github/workflows/ci-cd-pipeline.yml Add npm ci --prefer-offline step before Vercel CLI installation Ensures dependencies are installed before build fallback Fixes "next: not found" error in deploy-preview job +3/-0      page.tsx Fix GitHub repository link in hero section                              app/page.tsx Update GitHub link from placeholder to actual repository URL Change from https://github.com to https://github.com/rishabh3562/ToolBox +1/-1      site-footer.tsx Fix GitHub repository links in footer                                        components/site-footer.tsx Update all GitHub links to correct repository URL Replace placeholder https://github.com with https://github.com/rishabh3562/ToolBox Affects footer text link and social media icon link +2/-2
Dependencies	package.json Add Upstash rate limiting dependencies                                      package.json Add @upstash/ratelimit and @upstash/redis dependencies Reorganize dependencies for better readability Move Upstash packages to main dependencies section +3/-3

---

Summary by CodeRabbit

• New Features

  • Added theme toggle functionality to switch between light and dark modes with persistent user preference support
  • Theme now respects your system preferences by default

• Updates

  • Updated GitHub repository links throughout the application
  • Improved CI/CD pipeline for preview deployments

[coderabbitai]

Walkthrough

The pull request introduces dark/light theme switching functionality using the next-themes library. A new ThemeToggle component is added to enable user theme selection. Color variables in globals.css are refactored from RGB to HSL format. GitHub repository links are updated to point to a specific repository. A dependency installation step is added to the CI/CD pipeline.

Changes

Cohort / File(s)	Summary
Theme Infrastructure app/layout.tsx, components/theme-toggle.tsx	Integrated ThemeProvider from next-themes with configuration for class-based theming and system preference detection. Added new ThemeToggle component with mount-safety checks and Sun/Moon icon toggling.
Theme Styling app/globals.css	Removed legacy RGB-based color variables and prefers-color-scheme overrides. Refactored color usages from rgb(var(--...)) to hsl(var(--...)) format for background, border, and prose elements.
Repository Links app/page.tsx, components/site-footer.tsx, components/site-header.tsx	Updated GitHub links from generic https://github.com to specific repository URL https://github.com/rishabh3562/ToolBox across hero CTA, footer attribution, and header navigation.
CI/CD Pipeline .github/workflows/ci-cd-pipeline.yml	Added "Install dependencies" step running npm ci --prefer-offline before Vercel CLI installation in the deploy-preview job.
Dependencies package.json	No net changes; temporary dependencies were added and removed, leaving final state unchanged.

Sequence Diagram

sequenceDiagram
    actor User
    participant Header as Site Header
    participant ThemeToggle as Theme Toggle
    participant NextThemes as next-themes
    participant DOM as DOM/localStorage

    User->>Header: Page loads
    Header->>ThemeToggle: Render ThemeToggle
    ThemeToggle->>NextThemes: useTheme hook
    NextThemes->>DOM: Read theme from localStorage or system
    NextThemes-->>ThemeToggle: resolvedTheme & setTheme
    ThemeToggle->>DOM: Render with current theme

    User->>ThemeToggle: Click toggle button
    ThemeToggle->>NextThemes: setTheme("dark" or "light")
    NextThemes->>DOM: Update class on html element
    NextThemes->>DOM: Save to localStorage
    DOM-->>User: Theme switches (CSS applies)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• components/theme-toggle.tsx: New component with mount-safety logic and conditional rendering; requires verification of hydration handling and accessibility features
• app/layout.tsx: ThemeProvider integration with multiple configuration options; ensure suppressHydrationWarning is appropriately scoped
• app/globals.css: Refactoring from RGB to HSL format; verify all color calculations and dark mode behavior are correct
• Multiple link updates: Repetitive changes across files (lower complexity individually, but verify consistency)

Possibly related PRs

• PR feat(ci): implement CI/CD pipeline with linting and multi-environment deployment ( fixes #29) #38: Modifies .github/workflows/ci-cd-pipeline.yml — this PR builds on the workflow from PR feat(ci): implement CI/CD pipeline with linting and multi-environment deployment ( fixes #29) #38 by adding the dependency installation step before build/deploy actions.

Suggested labels

Review effort 3/5

Poem

🌙 A toggle of light, a switch to the dark,
Through next-themes' magic, themes now embark,
With HSL colors that dance and blend,
And moons that rise as days transcend! ☀️

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The PR title "Preview / Test PR: #41 Feat/dark theme preview" contains meta-information ("Preview / Test PR: #41") alongside a substantive description of the main change. The core change across the changeset is implementing dark theme functionality—evidenced by the new ThemeProvider wrapper, ThemeToggle component, updated color tokens, and CSS modifications for dark mode support. The title's main substance ("Feat/dark theme preview") directly and accurately describes this central feature. While the title could be more concise by omitting the meta-information, it remains clear and specific enough that a teammate scanning the history would understand the primary change is adding dark theme support.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/dark-theme-preview

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Contributor License Agreement (CLA)

Thank you for your contribution to ToolBox.

By submitting this pull request, you automatically agree to our Contributor License Agreement (CLA).

Key Terms

• You grant the project owner exclusive commercial rights to this project
• You waive any claims to commercialization or royalties
• You retain rights to use your contributions for non-commercial purposes
• You confirm your contributions are your original work
• This agreement is automatic upon submission

Full Agreement

Please review the complete CLA for all terms and conditions.

Questions

If you have questions about the CLA, please comment on this pull request or open a discussion.

---

By continuing with this pull request, you confirm your acceptance of the CLA.

[qodo-code-review]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
🟢	No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪	🎫 No ticket provided - [ ] Create ticket/issue <!-- /create_ticket --create_ticket=true --> </details></td></tr>
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
⚪	No custom compliance provided Follow the guide to enable custom compliance check.

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	Prevent layout shift on load To prevent a layout shift, replace the null return for the unmounted ThemeToggle component with a placeholder div that occupies the same space as the button. components/theme-toggle.tsx [15-17] if (!mounted) { - return null; + return ( + <div className="h-10 w-10 rounded-md border border-input bg-background" /> + ); } Apply / Chat Suggestion importance[1-10]: 6 __ Why: The suggestion correctly identifies a potential Cumulative Layout Shift (CLS) issue by returning null before hydration and proposes a valid fix by rendering a styled placeholder to maintain layout stability.	Low
More

[github-actions]

🚀 Preview Deployment

✅ Your changes have been deployed to preview!

Build Details:

• Environment: Preview
• Node.js: 18.x
• Commit: c7cc4b2167571fad89613f0a32fc636b799f2d7b
• Branch: feat/dark-theme-preview

Preview URL: https://tool-jzhmf314f-rishabhs-projects-fef8118d.vercel.app

CI Checks: ✅ All passed

---

This comment is automatically updated for each commit.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

components/theme-toggle.tsx (1)

7-30: Theme toggle implementation follows best practices.

The component correctly:

• Uses the "use client" directive for client-side interactivity
• Implements the mounted pattern to prevent hydration mismatches
• Uses resolvedTheme to get the actual theme (not "system")
• Includes proper accessibility attributes

For added robustness, consider handling the edge case where resolvedTheme might be undefined:

-      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
+      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
       className="relative inline-flex h-10 w-10 items-center justify-center rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors"
-      aria-label="Toggle theme"
+      aria-label={`Switch to ${resolvedTheme === "dark" ? "light" : "dark"} mode`}

Or add a guard:

if (!mounted || !resolvedTheme) return null;

However, the current implementation works correctly in practice since the mounted check ensures the theme is loaded before rendering.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e7e70f5 and c7cc4b2.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (8)

• .github/workflows/ci-cd-pipeline.yml (1 hunks)
• app/globals.css (3 hunks)
• app/layout.tsx (2 hunks)
• app/page.tsx (1 hunks)
• components/site-footer.tsx (2 hunks)
• components/site-header.tsx (2 hunks)
• components/theme-toggle.tsx (1 hunks)
• package.json (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (2)

app/layout.tsx (2)

components/site-header.tsx (1)

• SiteHeader (15-54)

components/site-footer.tsx (1)

• SiteFooter (4-36)

components/site-header.tsx (1)

components/theme-toggle.tsx (1)

• ThemeToggle (7-30)

🔇 Additional comments (7)

.github/workflows/ci-cd-pipeline.yml (1)

324-326: Good addition for deployment consistency.

Installing dependencies before the Vercel build ensures that all required packages are available for the build process. This aligns with the dependency installation pattern used in other jobs.

components/site-footer.tsx (1)

16-26: Link updates look good.

The GitHub links now correctly point to the specific ToolBox repository, maintaining consistency with the updates in the header and landing page.

app/globals.css (1)

98-118: Color function updates align with variable format.

Changing from rgb(var(--...)) to hsl(var(--...)) is correct since the CSS variables are defined as HSL triplets (e.g., --muted: 0 0% 96.1%). This ensures proper color interpretation across light and dark themes.

app/page.tsx (1)

78-78: Repository link updated correctly.

The GitHub CTA now points to the specific ToolBox repository, maintaining consistency across the site.

components/site-header.tsx (1)

8-8: Theme toggle integration looks good.

The ThemeToggle component is properly imported and positioned in the header alongside the GitHub button. The repository link is updated consistently with other components.

Also applies to: 44-46

app/layout.tsx (1)

6-6: ThemeProvider integration is correctly implemented.

The setup follows next-themes best practices:

• attribute="class" enables class-based theming (.dark selector in CSS)
• defaultTheme="system" respects user's OS preference
• enableSystem allows automatic system theme detection
• storageKey="devtools-theme" provides localStorage persistence
• disableTransitionOnChange prevents CSS transition flickering during theme switches
• suppressHydrationWarning on the html element correctly handles potential mismatches between server-rendered theme and client-side theme

This provides a smooth theme switching experience aligned with the ThemeToggle component.

Also applies to: 22-36

package.json (1)

51-52: Upstash dependencies are confirmed present in the final state.

Verification confirms that @upstash/ratelimit and @upstash/redis are indeed present in package.json as shown in the code snippet. The AI summary's claim that they were "temporarily introduced and later removed, resulting in no net change" is inaccurate. These dependencies are part of the actual project changes.

[rishabh3562]

@CodeRabbit the theme toggle is still not working in deployment can you check the code and suggest them as commitable changes so that i can commit and fix them? other stuff looks good to me but this toggle is not working

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

@rishabh3562, I'll investigate the theme toggle issue in your deployment. Let me examine the relevant files to identify the problem.

---

🏁 Script executed:

#!/bin/bash
# Read the ThemeToggle component
cat components/theme-toggle.tsx

echo "=== LAYOUT.TSX ==="
# Read the layout to check ThemeProvider setup
cat app/layout.tsx

echo "=== TAILWIND CONFIG ==="
# Check Tailwind configuration for dark mode
cat tailwind.config.ts

echo "=== PACKAGE.JSON ==="
# Check if next-themes is properly installed
cat package.json | grep -A5 -B5 "next-themes"

echo "=== GLOBALS.CSS (dark mode section) ==="
# Check the CSS setup for dark mode
head -100 app/globals.css

Length of output: 8598

---

@rishabh3562, I found the issue! The problem is with how the theme toggle logic handles the system theme. When defaultTheme is set to "system", the toggle needs to explicitly set a theme preference (light or dark) rather than trying to toggle the resolved theme.

Here's the fix:

Updated components/theme-toggle.tsx

"use client";

import * as React from "react";
import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";

export function ThemeToggle() {
  const [mounted, setMounted] = React.useState(false);
  const { theme, setTheme, resolvedTheme } = useTheme();

  React.useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return null;
  }

  const toggleTheme = () => {
    // If on system theme, switch based on what system resolved to
    // Otherwise toggle between light and dark
    if (theme === "system") {
      setTheme(resolvedTheme === "dark" ? "light" : "dark");
    } else {
      setTheme(theme === "dark" ? "light" : "dark");
    }
  };

  const isDark = resolvedTheme === "dark";

  return (
    <button
      onClick={toggleTheme}
      className="relative inline-flex h-10 w-10 items-center justify-center rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors"
      aria-label="Toggle theme"
    >
      <Sun className={`h-[1.2rem] w-[1.2rem] transition-all ${isDark ? "rotate-90 scale-0" : "rotate-0 scale-100"}`} />
      <Moon className={`absolute h-[1.2rem] w-[1.2rem] transition-all ${isDark ? "rotate-0 scale-100" : "-rotate-90 scale-0"}`} />
      <span className="sr-only">Toggle theme</span>
    </button>
  );
}

The key changes:

1. Added theme property: Now we check both theme (what the user explicitly set) and resolvedTheme (what's actually being displayed)
2. Smart toggle logic: If the theme is "system", it switches to an explicit theme based on the current system preference. Otherwise, it toggles between light and dark
3. Updated icon logic: Using template literals with dynamic classes instead of the dark: prefix which might not work correctly in all scenarios

This should fix the toggle functionality in your deployment. The issue was that when clicking the button while on "system" theme, it wasn't explicitly setting a user preference, so it would just stay in system mode.

[rishabh3562]

This PR was used for CI/CD and deploy preview testing during the dark theme implementation (PR #41). It was automatically marked as merged since all commits were included in #41