Visual Studio Code - In VS Code, how can I change the background and foreground color of the editor find widget?

electrotype
October 29, 2023
188 views
0 votes
2 Answers

I’ve been able to target pretty much everything I need to change the colors the way I want them, except for the "Find bar" that appears with CTRL-F:

What [COMPONENT_NAME] should I use in this code to target it?

"workbench.colorCustomizations": {
    "[COMPONENT_NAME].background": "#FFFFFF",
}

Tags: visual-studio-code

Answers

- starball
- October 28, 2023 at 10:24 pm
- 0 votes
0
This should cover most of it:
```
"workbench.colorCustomizations": {
    "editorWidget.background": "#ff0000",
    "editorWidget.foreground": "#ff0000",
    "editorWidget.border": "#ff0000",
    "editorWidget.resizeBorder": "#ff0000",
    "input.background": "#ff0000",
    "input.foreground": "#ff0000",
    "input.border": "#ff0000",
    "input.placeholderForeground": "#ff0000",
    "simpleFindWidget.sashBorder": "#ff0000"
}
```
Not sure about how to do the button colours and text for the number of results.

Know that changing editor widget colours will apply to all editor widgets expect for those that have their own dedicated colour customization points, such as editor hover widgets, and editor suggestion widgets.
Login or Signup to reply.

- Mark
- October 29, 2023 at 5:46 am
- 0 votes
0
Go to vscode Theme Color Reference and search for find on the page.

It will take you to

Editor widget colors

The Editor widget is shown in front of the editor content. Examples
are the Find/Replace dialog, the suggestion widget, and the editor
hover.

with its many options for customizing the Find Widget.

And elsewhere on that page find will take you to

Input control

Colors for input controls such as in the Search view or the
Find/Replace dialog.

with its related options.

As for the input boxes in the Find Widget, these Theme Colors apply:
```
input.background: Input box background.
input.border: Input box border.
input.foreground: Input box foreground.
input.placeholderForeground: Input box foreground color for placeholder text.
inputOption.activeBackground: Background color of activated options in input fields.
inputOption.activeBorder: Border color of activated options in input fields.
inputOption.activeForeground: Foreground color of activated options in input fields.
inputOption.hoverBackground: Background color of activated options in input fields.
```
The inputOption ones apply to the icon options that actually appear INSIDE the input box, like Match Case, Match Whole Word and Use Regular Expression.

Finally, for those other icons in the Find Widget not covered by inputOption, use
```
icon.foreground: The default color for icons in the workbench.
```
which works for previous/next match and close – but curiously not for the Find in Selection icon.
Login or Signup to reply.