feat(styles): add global scrollbar styling with theme awareness#1158
feat(styles): add global scrollbar styling with theme awareness#1158omeraplak merged 4 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)
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 |
JiwaniZakir
left a comment
JiwaniZakir
left a comment
There was a problem hiding this comment.
The light mode block excludes .tableOfContents via :not(.tableOfContents) in custom.css, but the dark mode block ([data-theme="dark"] *) has no equivalent exclusion — meaning the TOC will receive inconsistent scrollbar treatment depending on the active theme. That exclusion should either be applied symmetrically to both themes or dropped entirely if it's no longer needed.
Applying scrollbar styles to the universal selector * is also worth reconsidering. This forces the browser to match and compute these properties on every element in the DOM, which can have a non-trivial cascade cost on complex pages. Scoping to html, body, or specific scrollable containers (e.g. .main-wrapper, [class*="scrollable"]) would be more targeted and avoid potential conflicts with third-party components or embedded iframes that manage their own scrollbar appearance.
Finally, the base * block sets scrollbar-color: rgba(75, 85, 99, 0.4) transparent unconditionally, but then both [data-theme="light"] and [data-theme="dark"] override it. If there's ever a state where neither data-theme attribute is set (e.g., during SSR hydration or initial page load in Docusaurus), the default values from the * block will show through — worth verifying that the flash behavior is acceptable or that Docusaurus always guarantees the attribute is present before paint.
|
@necatiozmen @omeraplak atleast give the feedback, sir, on what you think |
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.
scrollbar-width/scrollbar-colorand pseudo-elements; transparent corners.website/src/css/custom.css; light mode excludes.tableOfContentsto preserve TOC styles.Written for commit 6da8fda. Summary will update on new commits.
Summary by CodeRabbit