How the Scrollbar Pill-Shaped Thumb Transition Works in Islands Dark VS Code Theme

The Islands Dark theme achieves its smooth, pill-shaped scrollbar thumb by overriding VS Code's CSS through settings.json, applying a 9999px border-radius for the capsule shape and a 0.3-second opacity transition that fades the thumb in and out based on hover and scroll states.

The Islands Dark theme transforms the standard VS Code scrollbar into a modern, unobtrusive UI element by combining extreme border-radius values with carefully timed opacity transitions. This effect is implemented entirely through CSS customizations injected via the theme's configuration files, requiring no JavaScript or extension logic. Understanding how this works requires examining the specific selectors and color tokens defined in the bwya77/vscode-dark-islands repository.

Creating the Pill Shape

The characteristic capsule appearance begins with the .scrollbar .slider selector in settings.json.

To force the thumb into a pill shape regardless of its height, the theme applies an extreme border-radius value:

".scrollbar .slider": {
    "border-radius": "9999px !important",
    ...
}

This declaration at line 495-497 of settings.json ensures the scrollbar thumb renders with fully rounded ends, creating the "pill" aesthetic that distinguishes Islands Dark from standard VS Code themes. The !important flag overrides any default VS Code styles that might attempt to enforce standard rectangular thumbs.

Color State Management

VS Code automatically swaps between three distinct color tokens based on user interaction states. These RGBA values are defined in themes/islands-dark.json:

"scrollbarSlider.background": "#3c3f4140",
"scrollbarSlider.hoverBackground": "#50535770",
"scrollbarSlider.activeBackground": "#5e616590"

These definitions at lines 54-57 provide semi-transparent gray tones that adapt to different interaction phases. The alpha channel transparency ensures the thumb never fully obscures underlying code, while the incremental lightening from idle (#3c3f4140) to hover (#50535770) to active (#5e616590) provides clear visual feedback.

The Opacity Transition Animation

The smooth fade effect relies on a CSS transition property targeting opacity. In settings.json at line 998, the theme declares:

".scrollbar .slider": {
    "transition": "opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important"
}

This configuration creates a 300-millisecond animation using a cubic-bezier curve that starts gradually, accelerates through the middle, and decelerates toward the end. When VS Code changes the thumb's opacity—as it does when detecting mouse proximity or scroll activity—the browser interpolates between values over this duration, eliminating jarring instant state changes.

Interaction Flow

The complete user experience follows a specific sequence of state transitions:

1. Idle state – The thumb renders with scrollbarSlider.background at low opacity, appearing as a subtle track indicator.
2. Hover detection – When the cursor enters the scrollbar area, VS Code increases opacity and switches to scrollbarSlider.hoverBackground. The CSS transition animates this change over 0.3 seconds.
3. Active dragging – During scroll operations, the theme applies scrollbarSlider.activeBackground while maintaining high opacity for maximum visibility.
4. Mouse exit – Upon leaving the scrollbar region, opacity fades back to its resting state via the same cubic-bezier timing function.

This sequence ensures the scrollbar remains unobtrusive during reading but immediately accessible when needed, with the pill shape providing a contemporary visual anchor.

Implementation Reference

To replicate this effect in your own VS Code configuration, combine the color tokens with the CSS overrides:

{
  "workbench.colorCustomizations": {
    "scrollbarSlider.background": "#3c3f4140",
    "scrollbarSlider.hoverBackground": "#50535770",
    "scrollbarSlider.activeBackground": "#5e616590"
  },
  "customCSS": {
    ".scrollbar .slider": {
      "border-radius": "9999px !important",
      "transition": "opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important"
    }
  }
}

Note that customCSS in this example represents the injection method used by the Islands Dark theme; depending on your setup, you may need the Custom CSS and JS Loader extension to apply these overrides.

Summary

• Pill geometry is achieved through border-radius: 9999px applied to .scrollbar .slider in settings.json (lines 495-497).
• Color transitions rely on three standard VS Code tokens (scrollbarSlider.background, hoverBackground, activeBackground) defined in themes/islands-dark.json.
• Smooth fading uses a 0.3-second CSS transition on opacity with a cubic-bezier timing function (line 998 of settings.json).
• Pure CSS implementation requires no JavaScript—VS Code's built-in state management triggers the visual changes automatically.

Frequently Asked Questions

Can I customize the transition speed for the scrollbar thumb?

Yes. Modify the duration value in the transition property within settings.json. Change 0.3s to 0.15s for faster fading or 0.6s for a more dramatic, slower effect. The cubic-bezier curve can also be adjusted to alter the acceleration dynamics.

Why does the theme use 9999px instead of 50% for the border-radius?

Using 9999px ensures the ends remain perfectly rounded even if the scrollbar thumb changes height due to content length variations. While 50% creates an ellipse based on the element's dimensions, an extremely high pixel value forces the browser to cap the radius at half the shortest side, guaranteeing a true capsule shape in all scenarios.

Do these scrollbar customizations work in all VS Code interfaces?

The .scrollbar .slider selectors target the standard editor scrollbar. Terminal panels, custom webviews, or extension-specific UI components may use different class names or shadow DOM structures that require additional CSS selectors to style consistently with the Islands Dark aesthetic.

Is Custom CSS injection required for this effect?

Yes. VS Code does not natively support arbitrary CSS in settings.json without an extension such as "Custom CSS and JS Loader." The Islands Dark theme relies on this mechanism to inject the border-radius and transition rules that VS Code's standard theme API cannot provide through color tokens alone.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}