Skip to content

fix(theme): unify light/dark theming + header banner + ScrollToTop UX🐞#223

Open
ayushpandey101 wants to merge 3 commits into
Skrishna0703:mainfrom
ayushpandey101:themetoggle
Open

fix(theme): unify light/dark theming + header banner + ScrollToTop UX🐞#223
ayushpandey101 wants to merge 3 commits into
Skrishna0703:mainfrom
ayushpandey101:themetoggle

Conversation

@ayushpandey101

Copy link
Copy Markdown
Contributor

Which issue does this PR close?

Rationale for this change

  • Fixed inconsistent Light/Dark theming on header banner and ScrollToTop button.
  • Persist theme across reloads/navigation and avoid flash of incorrect theme.
  • Improve accessibility (contrast, focus visibility, reduced motion) and prevent ScrollToTop overlap on small screens.

What changes are included in this PR?

  • Centralized theming via data-theme on html and CSS variables in index.css; removed hardcoded colors.
  • Theme persistence (localStorage) with prefers-color-scheme fallback; initialized on load.
  • Header.css and ThemeToggle.css updated to consume CSS vars; contrast and spacing adjusted.
  • ScrollToTop.jsx themed via vars; added aria-label/focus styles; smooth scroll with reduced-motion support; z-index/position tweaked to avoid footer overlap.
  • Affected files: ScrollToTop.jsx, ThemeToggle.css, Header.css, index.css.

Are these changes tested?

  • Manually verified theme toggle, reload, and route changes (no flash; state persists).
  • Checked small viewports: ScrollToTop doesn’t overlap content/footer.
  • Keyboard/screen reader: focus visible and aria-label announced.
  • prefers-reduced-motion respected for scrolling.
  • Lint passes; no console errors observed.

Are there any user-facing changes?

  • Yes: consistent Light/Dark theming across header banner and ScrollToTop; improved contrast and focus outlines.
  • Theme preference is saved and defaults to system setting on first visit.
  • ScrollToTop placement/visibility refined and smooth-scrolling enhanced.
  • No breaking changes; visual/UX improvements only.

Screenshots

Dark Mode:
Screenshot 2025-10-07 051643

Light Mode:
Screenshot 2025-10-07 052545

@github-actions

github-actions Bot commented Oct 7, 2025

Copy link
Copy Markdown

Thanks for creating a PR for your Issue! ☺️

We'll review it as soon as possible.
In the meantime, please double-check the file changes and ensure that all commits are accurate.

If there are any unresolved review comments, feel free to resolve them. 🙌🏼

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.

🐞Light/Dark toggle inconsistencies + header banner theming & ScrollToTop UX improvements🐞

1 participant