docs: Add custom scrollbar styling to match brand theme#1165
docs: Add custom scrollbar styling to match brand theme#1165goingforstudying-ctrl wants to merge 2 commits intoVoltAgent:mainfrom
Conversation
Implement custom scrollbar styling for documentation website that aligns with VoltAgent's modern design system and emerald green brand color (#10b981). Changes: - Add scrollbar.css with custom WebKit scrollbar styles - Import scrollbar styles in custom.css - Support both light and dark themes - Firefox scrollbar support via scrollbar-color Design specifications: - 8px width for modern, unobtrusive appearance - Emerald green thumb (rgba(16, 185, 129, 0.3)) matching brand - Rounded corners (4px border-radius) - Smooth hover transitions - Proper contrast for accessibility Fixes VoltAgent#1157
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (1)
📝 WalkthroughWalkthroughA new 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 |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
2 issues found across 2 files
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="website/src/css/custom.css">
<violation number="1" location="website/src/css/custom.css:1">
P2: Global brand scrollbar import is overridden by existing TOC-specific scrollbar rules, causing TOC to keep old gray styling and break theme consistency.</violation>
</file>
<file name="website/src/css/scrollbar.css">
<violation number="1" location="website/src/css/scrollbar.css:50">
P2: Dark-mode scrollbar overrides use descendant selectors and miss the root element, so viewport scrollbar colors may stay light in dark theme.</violation>
</file>
Since this is your first cubic review, here's how it works:
- cubic automatically reviews your code and comments on bugs and improvements
- Teach cubic by replying to its comments. cubic learns from your replies and gets better over time
- Add one-off context when rerunning by tagging
@cubic-dev-aiwith guidance or docs links (includingllms.txt) - Ask questions if you need clarification on any suggestion
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
website/src/css/scrollbar.css (1)
20-20: Narrow transition scope tobackground-color.Line 20 uses
transition: all, but only color changes here. Limiting it improves maintainability and avoids unintended animations later.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/css/scrollbar.css` at line 20, The rule uses a broad transition declaration ("transition: all 0.2s ease;") in the scrollbar CSS; narrow it to only animate background-color to avoid unintended animations later by replacing that all-encompassing declaration with a transition that targets background-color (keep the same duration/timing). Locate the selector containing the transition line in scrollbar.css and update the declaration so only background-color is transitioned.
🤖 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/scrollbar.css`:
- Around line 17-25: The scrollbar thumb opacity is too low for accessibility;
update the ::-webkit-scrollbar-thumb default and hover styles to higher-contrast
values (e.g., increase rgba alpha from 0.3 to around 0.6 for the default and
from 0.5 to around 0.8 for :hover) so the green thumb is more visible, and apply
the same adjustment to the other similar blocks referenced (lines covering the
alternate theme selectors around 36-42 and 45-52) — modify the CSS rules for
::-webkit-scrollbar-thumb and ::-webkit-scrollbar-thumb:hover accordingly.
---
Nitpick comments:
In `@website/src/css/scrollbar.css`:
- Line 20: The rule uses a broad transition declaration ("transition: all 0.2s
ease;") in the scrollbar CSS; narrow it to only animate background-color to
avoid unintended animations later by replacing that all-encompassing declaration
with a transition that targets background-color (keep the same duration/timing).
Locate the selector containing the transition line in scrollbar.css and update
the declaration so only background-color is transitioned.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: c945272b-16f3-4a29-b7a9-89b94bb66fd2
📒 Files selected for processing (2)
website/src/css/custom.csswebsite/src/css/scrollbar.css
| ::-webkit-scrollbar-thumb { | ||
| background: rgba(16, 185, 129, 0.3); | ||
| border-radius: 4px; | ||
| transition: all 0.2s ease; | ||
| } | ||
|
|
||
| ::-webkit-scrollbar-thumb:hover { | ||
| background: rgba(16, 185, 129, 0.5); | ||
| } |
There was a problem hiding this comment.
Increase default thumb contrast to meet accessibility intent.
Current default thumb opacity is too subtle (especially Line 18 and Line 37), making the scrollbar hard to perceive in both themes. This conflicts with the PR’s accessibility objective.
🎯 Suggested contrast-safe adjustment
::-webkit-scrollbar-thumb {
- background: rgba(16, 185, 129, 0.3);
+ background: rgba(16, 185, 129, 0.55);
border-radius: 4px;
- transition: all 0.2s ease;
+ transition: background-color 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
- background: rgba(16, 185, 129, 0.5);
+ background: rgba(16, 185, 129, 0.75);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
- background: rgba(16, 185, 129, 0.25);
+ background: rgba(16, 185, 129, 0.5);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
- background: rgba(16, 185, 129, 0.45);
+ background: rgba(16, 185, 129, 0.7);
}
* {
scrollbar-width: thin;
- scrollbar-color: rgba(16, 185, 129, 0.3) transparent;
+ scrollbar-color: rgba(16, 185, 129, 0.55) transparent;
}
html[data-theme="dark"] * {
- scrollbar-color: rgba(16, 185, 129, 0.25) rgba(255, 255, 255, 0.05);
+ scrollbar-color: rgba(16, 185, 129, 0.5) rgba(255, 255, 255, 0.08);
}Also applies to: 36-42, 45-52
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@website/src/css/scrollbar.css` around lines 17 - 25, The scrollbar thumb
opacity is too low for accessibility; update the ::-webkit-scrollbar-thumb
default and hover styles to higher-contrast values (e.g., increase rgba alpha
from 0.3 to around 0.6 for the default and from 0.5 to around 0.8 for :hover) so
the green thumb is more visible, and apply the same adjustment to the other
similar blocks referenced (lines covering the alternate theme selectors around
36-42 and 45-52) — modify the CSS rules for ::-webkit-scrollbar-thumb and
::-webkit-scrollbar-thumb:hover accordingly.
|
@cubic-dev-ai Thanks for the detailed review! I'll address both CSS issues:
@coderabbitai Thanks for the nitpick on the transition scope - I'll narrow it to background-color only. Will push fixes shortly! |
|
Tip For best results, initiate chat on the files or code changes.
/* Before */
transition: all 0.2s ease;
/* After */
transition: background-color 0.2s ease;This ensures only the background-color animates on hover, avoiding unintended side effects from transitioning unrelated properties (e.g., width, opacity, or layout-affecting properties). Looking forward to your updated push! 🚀 |
… root scrollbar, unify TOC brand colors
|
Addressed all review feedback:
Ready for re-review! 🙏 |
JiwaniZakir
left a comment
JiwaniZakir
left a comment
There was a problem hiding this comment.
The transition: background-color 0.2s ease declaration on ::-webkit-scrollbar-thumb in scrollbar.css (line 22) has no effect — WebKit does not support CSS transitions on scrollbar pseudo-elements, so this line can be removed to avoid misleading future maintainers.
The Firefox scrollbar-width/scrollbar-color declarations are duplicated: both html and * set the same values. Since scrollbar-color and scrollbar-width are inherited properties, setting them on html alone is sufficient — the * block (lines 51–54) is redundant and adds unnecessary specificity across every element in the DOM.
The .tableOfContents::-webkit-scrollbar-thumb overrides still present in custom.css are now functionally identical to what the new global rules in scrollbar.css already produce (both use rgba(16, 185, 129, 0.3) / 0.25 for dark), making those specific rules dead weight that should be cleaned up to avoid confusion about where scrollbar colors are controlled.
Finally, the file is missing a trailing newline (flagged in the diff), which will cause issues with some linters and git tooling.
2 participants
Summary
Implement custom scrollbar styling for the documentation website that aligns with VoltAgent's modern design system and emerald green brand color.
Problem
The documentation website currently uses default browser scrollbars that don't match the site's carefully crafted design system, creating an inconsistent user experience.
Solution
Custom Scrollbar Implementation
Visual Design:
Theme Support:
Changes
website/src/css/scrollbar.csswith custom WebKit scrollbar styleswebsite/src/css/custom.cssto import scrollbar stylesScreenshots
The scrollbar now uses VoltAgent's signature emerald green (#10b981) with:
Fixes #1157
Summary by cubic
Add custom, thin emerald scrollbars to the docs to match the brand and improve visual consistency across light and dark themes. Fixes #1157.
New Features
scrollbar-color.website/src/css/scrollbar.cssand imported it inwebsite/src/css/custom.css.Bug Fixes
Written for commit 7b24a77. Summary will update on new commits.
Summary by CodeRabbit