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

> Discover how Islands Dark creates its pill-shaped scrollbar thumb using CSS overrides and border-radius. Learn about the smooth hover and scroll transitions achieved in VS Code.

- Repository: [Bradley Wyatt/vscode-dark-islands](https://github.com/bwya77/vscode-dark-islands)
- Tags: internals
- Published: 2026-05-06

---

**The Islands Dark theme achieves its smooth, pill-shaped scrollbar thumb by overriding VS Code's CSS through [`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/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`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json).

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

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

```

This declaration at **line 495-497** of [`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/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`](https://github.com/bwya77/vscode-dark-islands/blob/main/themes/islands-dark.json):

```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`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json) at **line 998**, the theme declares:

```json
".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:

```json
{
  "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`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json) (lines 495-497).
- **Color transitions** rely on three standard VS Code tokens (`scrollbarSlider.background`, `hoverBackground`, `activeBackground`) defined in [`themes/islands-dark.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/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`](https://github.com/bwya77/vscode-dark-islands/blob/main/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`](https://github.com/bwya77/vscode-dark-islands/blob/main/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`](https://github.com/bwya77/vscode-dark-islands/blob/main/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.