Fix: scroll-to-top button not clear on dark mode.

[shivam5434]

Problem

The scroll-to-top button was invisible on dark mode.

Changes

Section	Before	After
Dark bg	🔴 invisible	✅ visible (white button)
Light bg	✅ visible	✅ visible

Verification

• Before:

• After:

Type

• Bug fix

Summary by CodeRabbit

• Style
  • Added dark mode styling to the back-to-top button, including adjusted background color, text color, and hover state effects for improved visibility in dark theme.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 90deb949-a1b2-4394-b240-8a4312d28f58

📥 Commits

Reviewing files that changed from the base of the PR and between 3552efa and f6e8123.

📒 Files selected for processing (1)

• client/src/components/common/BackToTopButton.tsx

---

📝 Walkthrough

Walkthrough

The back-to-top button component receives dark-mode Tailwind utility classes to apply light-themed styling when users are in dark theme: background color, text color, and hover state background color.

Changes

Dark-mode styling for back-to-top button

Layer / File(s)	Summary
Add dark-mode styling to BackToTopButton client/src/components/common/BackToTopButton.tsx	BackToTopButton floating button className now includes dark-mode Tailwind utilities for background, text color, and hover background styling in dark theme.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Possibly related PRs

• Sachinchaurasiya360/InternHack#246: Previous work introducing the BackToTopButton component and its initial floating button styling.

Suggested labels

bug, level:beginner

Poem

🐰 The button floats in darkness now,
With light-touched text and shadow's bow,
Dark mode hops in to save the day,
When themes flip—buttons stay in play! 🌙✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ 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%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and accurately summarizes the main change: fixing visibility of the scroll-to-top button in dark mode by updating styling.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[Copilot]

Pull request overview

This PR improves the scroll-to-top button’s visibility in dark mode by applying dark-theme-specific background and icon colors.

Changes:

• Adds dark mode styling to render the button with a white background and black icon.
• Keeps the existing light mode styling unchanged.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.