🧩 Feature Overview
This issue proposes adding two UI/UX enhancements to the DevPath landing page:
- Theme Toggle Button — allows users to switch between dark and light mode
- Scroll Navigation Button — a fixed floating button to jump between the top and bottom of the page
🎯 Motivation
Currently, the DevPath website only supports a dark theme. Many users prefer light mode for readability, especially in bright environments. Additionally, as the page grows with more sections, a scroll shortcut button will significantly improve navigation experience.
Both of these are beginner-friendly, high-impact improvements aligned with modern web UX standards.
🛠️ Proposed Implementation
1. Theme Toggle
- Add a toggle button in the navbar (next to the GitHub button)
- On click, add/remove a
data-theme="light" attribute on <body>
- Define a
:root[data-theme="light"] CSS block to override color variables
- Persist user preference using
localStorage so it survives page reloads
- Show a sun ☀️ / moon 🌙 icon to indicate current mode
2. Scroll-to-Top / Bottom Button
- Add a fixed floating button at the bottom-right corner of the page
- First click → scrolls to the top of the page (
scrollTo(0, 0))
- Second click → scrolls to the bottom (
scrollTo(0, document.body.scrollHeight))
- Toggle the arrow direction (⬆ / ⬇) based on current scroll position
- Button appears only after the user scrolls 200px or more (avoids clutter at the top)
✅ Acceptance Criteria
📎 Additional Notes
- I plan to implement both features in separate commits for clean review history
- I will test across Chrome, Firefox, and mobile viewport sizes
- This contribution is part of GSSoC 2026
Would love to take this up if the maintainers are open to it! Please assign this issue to me. 🙏
🧩 Feature Overview
This issue proposes adding two UI/UX enhancements to the DevPath landing page:
🎯 Motivation
Currently, the DevPath website only supports a dark theme. Many users prefer light mode for readability, especially in bright environments. Additionally, as the page grows with more sections, a scroll shortcut button will significantly improve navigation experience.
Both of these are beginner-friendly, high-impact improvements aligned with modern web UX standards.
🛠️ Proposed Implementation
1. Theme Toggle
data-theme="light"attribute on<body>:root[data-theme="light"]CSS block to override color variableslocalStorageso it survives page reloads2. Scroll-to-Top / Bottom Button
scrollTo(0, 0))scrollTo(0, document.body.scrollHeight))✅ Acceptance Criteria
📎 Additional Notes
Would love to take this up if the maintainers are open to it! Please assign this issue to me. 🙏