[GH-ISSUE #76] Button dropdown separator visible as blue line #56

New issue

Open

opened 2026-05-06 13:12:58 +02:00 by BreizhHardware · 0 comments

BreizhHardware commented

2026-05-06 13:12:58 +02:00

Owner

Originally created by @bwya77 on GitHub (Feb 19, 2026).
Original GitHub issue: https://github.com/bwya77/vscode-dark-islands/issues/76

Description

Split button dropdowns (e.g., the commit button in Source Control) show a visible blue separator line between the main button and
the dropdown arrow. This breaks the clean look of the theme.

Steps to reproduce

Open the Source Control panel
Look at the "Commit" split button (with the dropdown arrow)
A blue vertical separator line is visible between the button and the arrow

Fix

Two changes are needed:

themes/islands-dark.json — Add transparent values for button separator tokens:
"button.separator": "#548af700",
"button.border": "#00000000"

settings.json (custom-ui-style.stylesheet section) — Hide the separator element via CSS, since it inherits background-color from
--vscode-button-background which overrides the theme token:
".monaco-button-dropdown-separator": {
"display": "none !important"
}

Both changes are required — the theme token alone isn't sufficient because the DOM element's inline style uses
var(--vscode-button-background) for its background color.

Originally created by @bwya77 on GitHub (Feb 19, 2026). Original GitHub issue: https://github.com/bwya77/vscode-dark-islands/issues/76 ### Description Split button dropdowns (e.g., the commit button in Source Control) show a visible blue separator line between the main button and the dropdown arrow. This breaks the clean look of the theme. Steps to reproduce 1. Open the Source Control panel 2. Look at the "Commit" split button (with the dropdown arrow) 3. A blue vertical separator line is visible between the button and the arrow ### Fix Two changes are needed: themes/islands-dark.json — Add transparent values for button separator tokens: "button.separator": "#548af700", "button.border": "#00000000" settings.json (custom-ui-style.stylesheet section) — Hide the separator element via CSS, since it inherits background-color from --vscode-button-background which overrides the theme token: ".monaco-button-dropdown-separator": { "display": "none !important" } Both changes are required — the theme token alone isn't sufficient because the DOM element's inline style uses var(--vscode-button-background) for its background color.