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鈥檛 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