How the Glass-Effect Border Simulation Works with Directional Light in Islands Dark

Islands Dark creates a floating glass panel effect using CSS custom properties, conic gradients, and pseudo-elements that simulate a directional light sweeping continuously around UI panel borders.

The glass-effect border simulation in the bwya77/vscode-dark-islands repository transforms VS Code’s rigid interface into a living, illuminated workspace. This directional light effect gives the impression that a spotlight is perpetually circling each panel, highlighting the translucent glass edges with a moving glow. The implementation relies entirely on advanced CSS techniques injected via the Custom UI Style extension.

The Architecture of the Glass Effect

The directional light system rests on a foundation of animatable CSS properties and carefully layered pseudo-elements. Rather than using static images or JavaScript, the theme leverages the browser’s rendering engine to calculate the light position in real time.

Animatable CSS Custom Properties

In animations.css, the theme declares a custom property called --border-angle using the @property rule. This registration tells the browser to treat the value as an angle that can be interpolated smoothly during animations.

@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

By registering this property, the browser can hardware-accelerate the rotation, ensuring the directional light sweeps smoothly without jank.

Rotating Light Source

The animation definition named islands-aurora rotates the --border-angle value from 0 degrees to 360 degrees over eight seconds. This creates the perpetual motion of the directional light around the panel perimeter.

@keyframes islands-aurora {
  to { --border-angle: 360deg; }
}

Implementing the Directional Light Overlay

The visible glow is rendered using pseudo-elements positioned absolutely over each panel. These layers draw the conic gradient and constrain it to the borders using CSS masking.

Pseudo-Elements as Light Layers

Each major panel—including .part.sidebar, .part.editor, .part.auxiliarybar, and .part.panel.bottom—receives an ::after pseudo-element defined in animations.css. This layer covers the entire panel with inset: 0, inherits the border-radius, and sits above content via z-index: 999.

The positioning ensures the light effect hugs the panel edges perfectly while remaining non-interactive thanks to pointer-events: none.

Conic Gradient and Masking

The ::after pseudo-element draws a conic gradient that starts at the current --border-angle value. This produces a wedge of colored light that rotates around the center point.

.part.sidebar::after,
.part.editor::after,
.part.auxiliarybar::after,
.part.panel.bottom::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 1px !important;
  background: conic-gradient(
    from var(--border-angle),
    transparent 0%,
    transparent 20%,
    rgba(13,188,121,0.35) 27%,
    rgba(125,200,160,0.2) 33%,
    rgba(13,188,121,0.12) 38%,
    transparent 45%,
    transparent 100%
  ) !important;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  pointer-events: none !important;
  z-index: 999 !important;
  animation: islands-aurora 8s linear infinite !important;
}

The -webkit-mask property uses two linear gradients with the xor composite mode to punch out the center of the gradient, leaving only a 1-pixel border glow visible. This creates the illusion that the light travels along the glass edge rather than filling the panel.

Panel-Specific Timing and Styling

To prevent the UI from appearing robotic, the theme introduces variation in the light timing across different panels while maintaining the static glass appearance through semi-transparent borders.

Animation Phase Offsets

The animations.css file applies negative animation delays to stagger the directional light rotation across panels. This creates a natural, wave-like effect where the light hits the sidebar, editor, and bottom panel at different moments.

.part.editor::after       { animation-delay: -2s !important; }
.part.auxiliarybar::after { animation-delay: -4s !important; }
.part.panel.bottom::after { animation-delay: -6s !important; }

These offsets ensure the glass-effect border simulation feels organic rather than synchronized.

Base Glass Borders

Underneath the animated glow, the static glass appearance comes from settings.json. The Custom UI Style extension applies semi-transparent white borders to define the panel edges.

".part.sidebar": {
  "border-top":    "1px solid rgba(255,255,255,0.12) !important",
  "border-left":   "1px solid rgba(255,255,255,0.08) !important",
  "border-bottom": "1px solid rgba(255,255,255,0.02) !important",
  "border-right":  "1px solid rgba(255,255,255,0.02) !important"
}

The combination of these static borders with the rotating conic gradient overlay produces the final living glass aesthetic.

Complete Implementation Examples

To implement this glass-effect border simulation in your own VS Code customization, you need both the CSS animation file and the border definitions in your settings.

The animations.css file handles the directional light logic, while settings.json provides the structural glass borders. Both files work together—the CSS creates the moving highlight, and the JSON defines the translucent panel edges that the light appears to illuminate.

Summary

• --border-angle is registered as an animatable CSS property in animations.css to enable smooth rotation.
• @keyframes islands-aurora rotates the angle from 0° to 360°, driving the directional light movement.
• ::after pseudo-elements on panel classes render the conic gradient overlay with z-index: 999.
• CSS masking with -webkit-mask-composite: xor confines the glow to the 1-pixel border area.
• Animation delays (-2s, -4s, -6s) create out-of-phase lighting across sidebar, editor, and auxiliary panels.
• Semi-transparent borders defined in settings.json form the static glass structure beneath the animated light.

Frequently Asked Questions

What file controls the speed of the directional light rotation?

The animation speed is defined in animations.css within the islands-aurora keyframes and the animation shorthand property. The default duration is 8 seconds per rotation (animation: islands-aurora 8s linear infinite). You can adjust this value to make the directional light sweep faster or slower.

Why does the light effect use !important declarations everywhere?

The !important flags ensure the glass-effect border simulation overrides VS Code’s default styling and any competing extensions. Since the Custom UI Style extension injects these rules into the Electron application, the high specificity prevents the theme’s floating glass panels from being accidentally disabled by VS Code updates.

Can I change the color of the directional light glow?

Yes. In animations.css, modify the rgba() values inside the conic-gradient definition. The current green tint (rgba(13,188,121,0.35)) can be replaced with any color values to match your preferred accent. The gradient uses multiple color stops to create a soft, glowing beam rather than a hard edge.

How does the mask create the border-only glow?

The -webkit-mask property uses two linear gradients: one applied to the content-box (the inner content area) and one to the entire element. The xor composite mode subtracts the inner area from the outer, leaving only the 1-pixel padding area visible. This masks the conic gradient so only the border appears illuminated, creating the directional light effect along the glass edge.

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