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

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. 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.

{
  "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 targets the monaco icon label elements that render file icons:

.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 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:

.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: Contains "workbench.iconTheme": "vs-seti-folder" and the Custom UI Style configuration that injects the drop-shadow CSS rule for file icons.
• animations.css: Houses the activity bar hover glow rules and breathing animations for selected icon states.
• 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 includes both the icon theme declaration and the Custom UI Style stylesheet entry:

{
  "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 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 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 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 to increase or decrease the blur radius. For the activity bar glow, edit the rgba(13,188,121,0.25) value in 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 specifically within the .part.activitybar .action-item:hover .action-label rule. This differs from the file icon glow in 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.

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