Fix TreeView checkbox styling to align with theme colors #255095
Draft
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
TreeView checkboxes were using the
Toggle
class withinputActiveOption*
colors, causing them to turn blue when checked instead of following the current theme colors. This made them inconsistent with other checkboxes throughout VS Code.Problem
The issue was a mismatch between the CSS and JavaScript implementation:
--vscode-checkbox-*
variables)Toggle
class using input option colorsSolution
Replace
Toggle
withCheckbox
in theTreeItemCheckbox
class to align the code with the CSS expectations.Changes Made
Import changes:
Toggle
import withCheckbox
importdefaultToggleStyles
withdefaultCheckboxStyles
Codicon
importImplementation changes:
private toggle: Toggle
toprivate checkbox: Checkbox
Checkbox
format:new Checkbox(title, isChecked, styles)
hoverDelegate
to checkbox styles for proper hover behaviorMethod updates: Updated all references from
toggle
tocheckbox
Result
The fix ensures TreeView checkboxes now use the same consistent styling as other checkboxes throughout VS Code, respecting the current theme colors.
Fixes #252638.
Warning
Firewall rules blocked me from connecting to one or more addresses
I tried to connect to the following addresses, but was blocked by firewall rules:
electronjs.org
node-gyp
(dns block)If you need me to access, download, or install something from one of these locations, you can either:
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.