# How the Icon Glow Effect Works with Seti Folder Icon Theme in Islands Dark

> Discover how the Islands Dark theme creates icon glow effects using Seti Folder icons and VS Code's custom CSS to add a subtle drop-shadow halo to your file icons.

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

---

**Islands Dark generates a subtle color-matched halo around file icons by combining the Seti Folder icon theme's file-type colors with a custom CSS `drop-shadow` filter injected through VS Code's Custom UI Style extension.**

The Islands Dark theme for VS Code delivers a distinctive visual experience through its signature **icon glow effect**. According to the `bwya77/vscode-dark-islands` repository, this effect relies on a precise interaction between the **Seti Folder** icon theme and custom stylesheet injections. The implementation leverages `currentColor` CSS variables and drop-shadow filters to create file-type-specific halos without modifying icon assets.

## How the File Icon Glow Works

### Color Assignment via Seti Folder

The theme explicitly forces VS Code to use the Seti Folder icon theme through a specific configuration in [`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json). Seti Folder assigns concrete color values to each file type—teal for JavaScript, amber for JSON, purple for Python—based on the file extension. These color values become the element's `currentColor` property in the DOM, which subsequent CSS rules can reference.

```json
{
  "workbench.iconTheme": "vs-seti-folder"
}

```

### CSS Drop-Shadow Filter Injection

Islands Dark injects a custom stylesheet via the **Custom UI Style** extension. The specific rule in [`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json) targets the monaco icon label elements that render file icons:

```css
.monaco-icon-label.file-icon::before {
    filter: drop-shadow(0 0 2.5px currentColor);
}

```

This applies a **drop-shadow** filter using the element's `currentColor`. Because Seti Folder has already defined that color based on file type, the shadow renders as a matching colored halo around the icon. The `2.5px` blur radius creates a soft glow without obscuring the icon details.

## Activity Bar Hover Effects

A separate implementation in [`animations.css`](https://github.com/bwya77/vscode-dark-islands/blob/main/animations.css) handles dynamic glow effects for activity bar interactions. Unlike the file icons that use dynamic `currentColor`, this rule applies a fixed teal glow that matches the overall Islands Dark palette:

```css
.part.activitybar .action-item:hover .action-label {
    filter: drop-shadow(0 0 5px rgba(13,188,121,0.25)) !important;
}

```

This selector targets `.action-item` elements within `.part.activitybar`, applying a `5px` blur radius with `25%` opacity using the specific teal color (`rgba(13,188,121,0.25)`). The `!important` declaration ensures the glow overrides default theme styles.

## Key Configuration Files

- **[`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json)**: Contains `"workbench.iconTheme": "vs-seti-folder"` and the Custom UI Style configuration that injects the drop-shadow CSS rule for file icons.
- **[`animations.css`](https://github.com/bwya77/vscode-dark-islands/blob/main/animations.css)**: Houses the activity bar hover glow rules and breathing animations for selected icon states.
- **[`README.md`](https://github.com/bwya77/vscode-dark-islands/blob/main/README.md)**: Documents the color-matched glow effect and explicitly recommends the Seti Folder theme for optimal visual results.

## Complete Configuration Example

Enable the glow effect by ensuring your [`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json) includes both the icon theme declaration and the Custom UI Style stylesheet entry:

```json
{
  "workbench.iconTheme": "vs-seti-folder",
  "custom-ui-style.stylesheet": {
    ".monaco-icon-label.file-icon::before": "filter: drop-shadow(0 0 2.5px currentColor); opacity: 1 !important;"
  }
}

```

Place the activity bar animations rule in your [`animations.css`](https://github.com/bwya77/vscode-dark-islands/blob/main/animations.css) file within the theme directory to enable hover effects.

## Summary

- **Seti Folder** supplies the base colors required for the glow effect by assigning specific hues to each file type.
- The **`drop-shadow`** filter in [`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json) uses `currentColor` to generate a halo that automatically matches the file icon's color.
- **Activity bar** interactions use a separate fixed teal glow defined in [`animations.css`](https://github.com/bwya77/vscode-dark-islands/blob/main/animations.css) rather than dynamic colors.
- The **Custom UI Style** extension enables these modifications by injecting CSS directly into VS Code's workbench.

## Frequently Asked Questions

### Why does the glow only work with Seti Folder icons?

The **Seti Folder** theme assigns concrete color values to file types that become the CSS `currentColor`. Without these specific color assignments, the `drop-shadow` filter would default to black or inherit from the base color theme, losing the color-matched effect. Icon themes that use monochrome or non-color-coded file types cannot produce the distinctive halo because there is no `currentColor` value for the filter to inherit.

### Can I adjust the glow intensity or color?

Yes. Modify the `2.5px` value in the `drop-shadow(0 0 2.5px currentColor)` declaration within your [`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json) to increase or decrease the blur radius. For the activity bar glow, edit the `rgba(13,188,121,0.25)` value in [`animations.css`](https://github.com/bwya77/vscode-dark-islands/blob/main/animations.css) to change the hue or opacity. Note that changing file icon colors requires modifying the Seti Folder theme itself or switching to a different icon set.

### Does the glow effect impact VS Code performance?

The CSS `drop-shadow` filter uses GPU-accelerated compositing and has minimal performance impact on modern systems. However, the **Custom UI Style** extension modifies VS Code's core CSS, which requires reloading the window after configuration changes. Users on resource-constrained systems may notice a slight delay during the initial stylesheet injection on startup.

### Where is the activity bar glow color defined?

The activity bar hover glow uses a fixed teal color defined in [`animations.css`](https://github.com/bwya77/vscode-dark-islands/blob/main/animations.css) specifically within the `.part.activitybar .action-item:hover .action-label` rule. This differs from the file icon glow in [`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json), which dynamically references `currentColor` from the Seti Folder theme. The fixed `rgba(13,188,121,0.25)` value ensures consistency with the Islands Dark color palette regardless of the file type being hovered.