fix: adjust dark mode UI colors and borders for elevated containers

[pawanakapkv]

Related Issue

• Closes: 🐛 Bug Report: UI/UX: Dark mode container backgrounds clash with the main background hue #310

---

Description

Currently, when the application is toggled to dark mode, there is a visual disconnect between the main background and the elevated containers (such as the Tracker input section, the "No Data Found" box, and the Contributor cards). The main body background uses a cool, blue-tinted dark shade (bg-gray-800), while the cards and containers were defaulting to a flat, desaturated dark gray/black (#121212).
The Solution:

• Re-aligned the Material UI Dark Theme (ThemeContext.tsx) to match the Tailwind background's hue.
• Updated the background.paper color to naturally blend and elevate over the main background.
• Removed hardcoded hex borders (#E0E0E0) from Contributors.tsx and updated them to dynamically use the theme's divider color.
• Applied subtle, crisp borders to elevated Paper and TableContainer components on the Tracker page.

---

How Has This Been Tested?

• Ran the application locally on localhost.
• Navigated to both the Tracker and Contributors pages.
• Toggled the dark mode switch on and off to verify the transition.
• Verified that hover animations, borders, and shadows behave correctly without visual clashing in both light and dark themes.

---

Screenshots (if applicable)

Initially: IN DARK MODE

Now: IN DARK MODE

---

Type of Change

• Bug fix
• New feature
• Code style update
• Breaking change
• Documentation update

Summary by CodeRabbit

• Style
  • Enhanced dark mode support with explicit background and divider color configuration.
  • Refactored component styling to use Material UI theme values instead of hard-coded colors, improving visual consistency across the contributor and tracker interfaces.

[netlify]

✅ Deploy Preview for github-spy ready!

Name	Link
🔨 Latest commit	4d82ccd
🔍 Latest deploy log	https://app.netlify.com/projects/github-spy/deploys/6a0cba408ca7a500083eb72f
😎 Deploy Preview	https://deploy-preview-339--github-spy.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[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: c65cdccb-fc84-45c5-b5e3-ca0a50ae0f27

📥 Commits

Reviewing files that changed from the base of the PR and between 8d17610 and 4d82ccd.

📒 Files selected for processing (3)

• src/context/ThemeContext.tsx
• src/pages/Contributors/Contributors.tsx
• src/pages/Tracker/Tracker.tsx

---

📝 Walkthrough

Walkthrough

MUI theme palette is expanded to define dark-mode-specific background and divider colors. Contributors card and Tracker page components update border styling to use theme tokens (divider, text.disabled) instead of hard-coded colors, creating visual consistency across dark and light modes.

Changes

Dark Mode UI Theming

Layer / File(s)	Summary
Theme palette expansion src/context/ThemeContext.tsx	MUI createTheme call now provides a full palette object with mode, and when mode is 'dark', sets background.default, background.paper, and divider color values to establish dark-mode color harmony.
Component styling with theme tokens src/pages/Contributors/Contributors.tsx, src/pages/Tracker/Tracker.tsx	Contributors card and Tracker components (auth form, loading state, "No Data Found" box, data-state container) replace hard-coded border colors with MUI theme tokens (divider for base borders, text.disabled for hover states). Card hover transition expands to animate border-color.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• GitMetricsLab/github_tracker#272: Both PRs modify ThemeWrapper/theme context wiring; this PR expands MUI palette configuration in ThemeContext.tsx while PR #272 removes duplicate ThemeWrapper from App.tsx.
• GitMetricsLab/github_tracker#138: Both PRs update src/pages/Contributors/Contributors.tsx styling to use theme-aware values rather than hard-coded colors.

Suggested labels

type:bug, level2, quality:clean

Poem

🐰 Dark mode now gleams with cohesive hue,
Theme tokens paint containers fresh and true,
No clashing grays upon the midnight sky,
Each card and box in harmony comply,
A rabbit's quest for visual harmony! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main objective: adjusting dark mode UI colors and borders for elevated containers, which matches the core change across all modified files.
Description check	✅ Passed	The description covers all template sections with substantive content: linked issue, detailed problem description, solution explanation, testing methodology, screenshots, and type of change classification.
Linked Issues check	✅ Passed	The PR fulfills all coding requirements from issue #310: re-aligned MUI dark theme palette [ThemeContext.tsx], updated background.paper colors, replaced hardcoded hex borders with theme.divider [Contributors.tsx], and added subtle borders to elevated components [Tracker.tsx].
Out of Scope Changes check	✅ Passed	All changes in the three modified files are strictly scoped to addressing dark mode theming and border styling as defined in issue #310; no unrelated functionality modifications or data-logic changes are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ 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.}

[github-actions]

🎉 Thank you @pawanakapkv for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines

[pawanakapkv]

Hi @mehul-m-prajapati 👋

I have successfully resolved the dark mode UI issue and submitted the changes for this PR as part of GSSOC'26!

The Material UI dark theme palette has been completely re-aligned to perfectly match the Tailwind bg-gray-800 background. I've also updated the Contributors cards and Tracker containers to use dynamic theme dividers instead of hardcoded hex colors, so the elevation now looks totally natural and the edges remain crisp.

Everything has been tested locally and works flawlessly. Could you please review and let me know if any further tweaks are needed before merging?

Thank you! 🚀