Css - Customizing Intellisense style in VSCode

David542
November 21, 2024
80 views
3 votes
3 Answers

Is it possible to customize the menu that is produced in the auto-complete in VSCode? I don’t see any mention of it in the docs here. I’m basically looking to create something closer to how Google Sheets looks in its autocomplete, where for example I’m able to customize (or not) the icon, the spacing, the hover, etc.

Answers

- dy0gu
- November 21, 2024 at 1:37 pm
- 0 votes
0
VSCode does not natively allow you to change the actual structure of the suggestions widget at this time.

The only thing you can do is customize it’s colors using the editorSuggestWidget.<setting> as per the theme color docs.

Login or Signup to reply.

- Damzaky
- November 21, 2024 at 1:40 pm
- 0 votes
0
Based on this documentation, the easiest way to just change the colors is by adding this user settings (CTRL+SHIFT+P, type "open settings"). It will open settings.json. In that file, you could add these lines:
```
{
    "workbench.colorCustomizations": {
        "editorSuggestWidget.background": "#ffffff",
        "editorSuggestWidget.selectedBackground": "#f5f5f5",
        "editorSuggestWidget.focusHighlightForeground": "#f5f5f5",
        "editorSuggestWidget.foreground": "#202124",
        "editorSuggestWidget.selectedForeground": "#202124",
        "editorSuggestWidgetStatus.foreground": "#202124",
        "editorSuggestWidget.selectedIconForeground": "#202124",
        "list.hoverBackground": "#f5f5f5"
    }
}
```
The above config is the colors used in google sheet. If you need to customize the icon, spacing, etc. you might need an extension for that.
Login or Signup to reply.

- rozsazoltan
- November 21, 2024 at 2:03 pm
- 0 votes
0
I’m not entirely sure about the exact formatting, only that there are different ways to "manipulate" the original CSS classes in VSCode. I wrote an example in response to this. My intention was purely to help, so if it doesn’t work or there’s an issue with the solution, please let me know. It’s just that such detailed messages can’t be left in a comment.

Maybe you’re looking for an add-on like this: vscode-custom-css or apc-extension

Customize Hint Layout with vscode-custom-css
1. Open settings.json
2. Added following config:
```
"vscode_custom_css.imports": [
  "file:///path/to/your/custom.css"
]
```
3. Create your customize layout to added custom.css file
4. Enable custom CSS in VSCode from CtrlShiftP: Reload Custom CSS and JS
Example CSS

You can look up the VSCode UI elements in the source code here:
```
/* Background color */
.monaco-editor .suggest-widget {
    background-color: #2c2c2c !important;
    border-radius: 8px !important;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Text color */
.monaco-editor .suggest-widget .monaco-list .monaco-list-row {
    color: #ffffff !important;
    padding: 10px 15px !important;
}

/* Highlight selected item */
.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused {
    background-color: #3c5a99 !important;
    color: #ffffff !important;
}

/* Custom icon size */
.monaco-editor .suggest-widget .suggest-widget-icon {
    width: 20px !important;
    height: 20px !important;
}
```
Login or Signup to reply.