feat(styles): add global scrollbar styling with theme awareness#1158
feat(styles): add global scrollbar styling with theme awareness#1158sujal12344 wants to merge 3 commits intoVoltAgent:mainfrom
Conversation
|
📝 WalkthroughWalkthroughAdds global, theme-aware scrollbar CSS to Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
website/src/css/custom.css (1)
5386-5448: Good implementation of theme-aware scrollbar styling.The cross-browser approach is correct (standard CSS for Firefox + WebKit prefixes), brand colors are consistent, and theme variants are properly structured.
One observation: The PR description mentions "smooth hover opacity transitions" but there's no
transitionproperty declared. The hover color changes will be instant rather than animated.💡 Optional: Add transition for smooth hover effect
*::-webkit-scrollbar-thumb { background-color: rgba(16, 185, 129, 0.3); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; + transition: background-color 0.2s ease; }Note: CSS transitions on scrollbar pseudo-elements have limited browser support, so this may not work in all browsers. Test in target browsers if adding.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/css/custom.css` around lines 5386 - 5448, Add a transition so the hover color change is animated: update the scrollbar thumb rules (selectors *::-webkit-scrollbar-thumb, [data-theme="dark"] *::-webkit-scrollbar-thumb, and [data-theme="light"] *::-webkit-scrollbar-thumb) to include a transition (e.g., transition: background-color 150ms ease or transition: background-color 150ms ease, opacity 150ms ease). Keep the hover rules (*::-webkit-scrollbar-thumb:hover and the two theme-specific :hover selectors) as-is; no JS changes needed. Note: Firefox uses scrollbar-color which cannot be transitioned reliably, so this change targets WebKit scrollbar thumbs only.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@website/src/css/custom.css`:
- Around line 5386-5448: Add a transition so the hover color change is animated:
update the scrollbar thumb rules (selectors *::-webkit-scrollbar-thumb,
[data-theme="dark"] *::-webkit-scrollbar-thumb, and [data-theme="light"]
*::-webkit-scrollbar-thumb) to include a transition (e.g., transition:
background-color 150ms ease or transition: background-color 150ms ease, opacity
150ms ease). Keep the hover rules (*::-webkit-scrollbar-thumb:hover and the two
theme-specific :hover selectors) as-is; no JS changes needed. Note: Firefox uses
scrollbar-color which cannot be transitioned reliably, so this change targets
WebKit scrollbar thumbs only.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 35cbca41-7363-437c-84c7-6bc659ce4809
📒 Files selected for processing (1)
website/src/css/custom.css
There was a problem hiding this comment.
Pull request overview
Adds theme-aware global scrollbar styling to the documentation website so scrollbars better match VoltAgent’s brand colors and provide consistent visuals across browsers (webkit + Firefox).
Changes:
- Introduces global scrollbar styling via
scrollbar-width/scrollbar-colorand::-webkit-scrollbar*rules. - Adds explicit light/dark theme variants for scrollbar thumb + track colors.
- Keeps existing TOC scrollbar rules in place (but the new global theme rules currently override parts of them).
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
|
Thanks for the PR. We’re planning to update the landing page design soon, could you update the color to black dark tone or dark grey instead of green |
|
@necatiozmen Yes, sure can you assign it to me, I'll update the PR |
Now is it okay? @necatiozmen
|
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@website/src/css/custom.css`:
- Around line 5429-5431: The dark-mode global track rule `[data-theme="dark"]
*::-webkit-scrollbar-track` is overriding `.tableOfContents`'s transparent track
due to equal specificity; modify the dark selector to exclude the table of
contents (e.g., change to `[data-theme="dark"]
*:not(.tableOfContents)::-webkit-scrollbar-track`) so `.tableOfContents`'s rule
remains transparent, or alternatively add a more specific rule for
`.tableOfContents::-webkit-scrollbar-track` under dark theme to force
`background: transparent`; update the selector referencing `[data-theme="dark"]
*::-webkit-scrollbar-track` and `.tableOfContents` accordingly.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 422a4868-8ca2-4d43-bb5e-36aa21ae7d51
📒 Files selected for processing (1)
website/src/css/custom.css
|
@necatiozmen @omeraplak waiting for your reply and merging it |
PR Checklist
Please check if your PR fulfills the following requirements:
Bugs / Features
What is the current behavior?
The documentation website uses default browser scrollbars that don't match VoltAgent's design system. The scrollbars:
Visual Impact:
Screenshot:
What is the new behavior?
Custom scrollbar styling that matches VoltAgent's design system:
Visual Improvements:
Screenshot:
fixes #1157
Notes for reviewers
Testing:
Implementation details:
custom.cssThe scrollbar should be subtle but visible, with a nice emerald green color that matches links and active states throughout the site.
Summary by cubic
Adds global, theme-aware scrollbar styles to the docs site for a consistent look across browsers. Fixes #1157.
New Features
scrollbar-width/scrollbar-colorand pseudo-elements.website/src/css/custom.css; TOC styles preserved with*:not(.tableOfContents).Written for commit dd448a9. Summary will update on new commits.
Summary by CodeRabbit