Describe the bug
- Light/Dark toggle does not consistently apply theme to the header banner and global styles.
- Theme state sometimes resets on refresh/navigation.
- ScrollToTop button has inconsistent theming/contrast in Dark mode and overlaps footer on small screens.
To Reproduce
- Open the app.
- Toggle between Light and Dark themes.
- Observe header banner colors/contrast and ScrollToTop styling.
- Refresh the page and note if the selected theme persists.
Expected behavior
- Theme applies instantly and consistently across the app (including header banner and ScrollToTop).
- Selected theme persists across reloads/routes with no flash of incorrect theme.
- ScrollToTop is themed, accessible, does not overlap content, and provides smooth scroll.
End Result:
Dark Mode:
Light Mode:
Additional context
Affected files: ScrollToTop.jsx, ThemeToggle.css, Header.css, index.css
Proposed updates:
- Drive theme via data-theme on html and CSS variables in
index.css; consume vars in ThemeToggle.css/Header.css.
- Persist theme (e.g., localStorage) and initialize on load; respect prefers-color-scheme.
ScrollToTop.jsx: use CSS vars for colors, add aria-label and focus styles, set visibility threshold, smooth scroll (respect reduced motion), and adjust z-index/position to avoid overlap.
Describe the bug
To Reproduce
Expected behavior
End Result:
Dark Mode:
Light Mode:
Additional context
Affected files:
ScrollToTop.jsx,ThemeToggle.css,Header.css,index.cssProposed updates:
index.css; consume vars inThemeToggle.css/Header.css.ScrollToTop.jsx: use CSS vars for colors, add aria-label and focus styles, set visibility threshold, smooth scroll (respect reduced motion), and adjust z-index/position to avoid overlap.