Skip to content

style: implement custom IDE scrollbars#465

Open
spiffamani wants to merge 1 commit into0xVida:mainfrom
spiffamani:style/custom-ide-scrollbars
Open

style: implement custom IDE scrollbars#465
spiffamani wants to merge 1 commit into0xVida:mainfrom
spiffamani:style/custom-ide-scrollbars

Conversation

@spiffamani
Copy link
Copy Markdown

Closes #286

Summary

Implemented custom styled scrollbars in the IDE to match the dark VS Code aesthetic.

Changes Made

ide/src/index.css

  • Added Firefox fallback using scrollbar-width: thin and scrollbar-color with brand colors
  • Set webkit scrollbar width and height to 8px
  • Set scrollbar track background to transparent for overlay effect
  • Styled scrollbar thumb using hsl(var(--border)) to match brand colors
  • Added border-radius: 4px to thumb for smooth rounded appearance
  • Added hover state on thumb using hsl(var(--muted-foreground)) for subtle feedback
  • Added transition: background 0.2s ease for smooth hover animation
  • Set scrollbar corner to transparent

Acceptance Criteria Met

  • Webkit scrollbars styled globally (thin, dark thumb, transparent track)
  • Firefox scrollbar-color implemented as fallback
  • border-radius applied to thumb
  • Hover state on thumb for premium feel
Screenshot 2026-03-26 053445 Brand visual identity maintained using existing CSS variables

@vercel
Copy link
Copy Markdown

vercel bot commented Mar 26, 2026

Someone is attempting to deploy a commit to the vidatg's projects Team on Vercel.

A member of the Team first needs to authorize it.

@0xVida
Copy link
Copy Markdown
Owner

0xVida commented Mar 26, 2026

Please resolve the conflicting files

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[UX] Implement custom styled scrollbars and IDE aesthetics

2 participants