Change:
<!-- Do Not Delete This! bugreporttemplate --<!-- Please read our Rules of Conduct: --<!-- Read our guide about submitting issues: --<!-- Search existing issues to avoid creating duplicates. --<!-- Test using the latest Insiders build to see if your issue has already been fixed: --<!-- Instead of creating your report here, use 'Report Issue' from the 'Help' menu in VS Code to pre-fill useful information. --<!-- Launch with to check. --Does this issue occur when all extensions are disabled?: Yes/No <!-- If you answered No above, use 'Help: Start Extension Bisect' from Command Palette to try to identify the cause. --<!-- Issues caused by an extension need to be reported directly to the extension publisher. The 'Help Report Issue' dialog can assist with this. --- VS Code Version: 1.91.0 OS Version: Sonoma 14.5 I'm not sure if this is more of a bug or a feature request, but the truth (IMO) is that as it stands, it's inconsistent and it breaks my theme Steps to reproduce: so it's clear to use the Light Bulb suggestions Regular suggestions <img width="583" alt="Screenshot 2024-07-04 at 16 42 10" src=""Light Bulb <img width="329" alt="Screenshot 2024-07-04 at 16 42 32" src=""In the screenshot above (light bulb) there's "nothing selected" because the light bulb menu uses the colors from quick input which is ok, until you have a background color for quick input that is the same as the selection color for the light bulb. To me, it makes more sense that the light bulb menu customizations would be the same as the suggestions as they are, well, suggestions too. However, this would probably break existing themes and I have no clue about the VSCode team's policies on that. A separate theming option like or similar would make it so that changing it to the suggestions can't break existing themes. If the team thinks it's more cohesive to use the suggestions, I'm all for it too!
Thanks for creating this issue! It looks like you may be using an old version of VS Code, the latest stable release is 1.91.0. Please try upgrading to the latest version and checking whether this issue remains. Happy Coding!
atm, the lightbulb widget code action menu, code action menu from quick fix or refactors, and the quick input/command share the same theming, and this is intentional - they are all intentionally prompted menus and share similar styles and fonts. These colors likely won't change as it has been discussed before already. I'm a bit confused by what you mean with "nothing selected." When you trigger the lightbulb menu or quick fix from for the first time, the very first item will automatically be selected. The only case where nothing is selected is if the user intentionally moves their mouse away from the menu.
If this was true, the background for the quick input/command menu would be the same as the light bulb widget, which is not the case: <img width="618" alt="Screenshot 2024-07-10 at 09 22 33" src=""In the following image, the first menu item should be selected (to prompt the menu, I simply ), can you see the selection? ! If you can't, that's because the highlight color for the quick picker is the same as the editor background. I made it this way because on the quick input/command menu I get to change the background; the same does not apply to the quick fix menu. To me, this isn't a good enough reason to keep things as are. I intentionally opened VSCode, just like I intentionally open a file or intentionally start a debug session, they all share similar style and fonts — should they all have a single styling? I searched for this, and could only find which to my understanding is similar in nature but not related at all. I would appreciate if you could point me to the issue/PR in which that was decided.
They all use the same styles under the hood ( and which you pointed out), so unless or were modified, they should have the same themes. investigating some more, the suggest widget shares those same styles under the hood as well. The action menu just lacks its own custom-named exported theme, piggybacking off existing themes instead. I'd like to note that I don't have the full context of your theme settings, so following your repro steps and just changing doesn't repro for me in any default shipped theme, unfortunately! Clearly, but as mentioned above, I don't have your settings, but out of the box they should all be using the same underlying themes. I searched for this We had a short internal discussion about matching action menus with the quick access when I created the menu. However, I'm open to adding the customizable action menu background and selection themes - I'll need to fine tune the description/title to be more digestible and we can then turn it into a feature request! However, if the issue is inconsistency, then changing and will make them widget, code action menu, command palette/quick input, and any other editor widgets like find/replace will be consistently themed.
You can check the theme here (). I feel we're a talking a bit past each other, so in an effort to better communicate what I wish to achieve/have, let me show you: Here, the first item is selected, I want it to have the same selected color as the which I have set to ! Like so: ! This is my quick input menu: ! The quick input background has a different color than the editor to create separation, and so, for the selected item I used the editor background because I want to keep the contrast high. I don't want to change the widget background because it becomes to strong and makes the text harder to read: ! When I originally stated that it was "inconsistent", it was because the changes I expected to be correlated, weren't. From my POV, if I can get the custom one, this would solve my problem! In fact, it is what I suggested in the beginning Let me know if this clears it up, if there are questions and how I could've described what I needed/wanted better to make the whole process better. Thank you!
clears this up a ton, thanks! yep, I see that in your custom theme, and are the same (#FAE8DC) which are the two used for background and selection in the code action menu, making it basically "not selected" I think in addition to a custom theme for selection, an additional one for the background would help in customizability for end users. likely naming for now will be along the lines of "actionList.selectionBackground/foreground" and "actionList.background/foreground" (which will cover refactor menus, quick fix menus, anything from lightbulb or , and terminal quickfix) I'll edit the title and add it directly into my backlog, since it would directly align with the custom aspects of other widgets in the editor. will likely be in this or next iteration. thanks for your patience :D
Amazing thank you for your patience!
this should be in the next insiders - feel free to try it out! the names are as follows (in this case you probably just care about the first two): editorActionList-background editorActionList-foreground editorActionList-focusForeground editorActionList-focusBackground
<!-- AUTHORVERIFICATIONREQUEST --This bug has been fixed in the latest release of ! you can help us out by commenting if things are now working as expected. If things still don't seem right, please ensure you're on version of Insiders (today's or later - you can use in the command palette to check), and leave a comment letting us know what isn't working as expected. Happy Coding!
/verified Thanks <3 <img width="396" alt="image" src=""

Discussion:
"--vscode-editorLightBulb-foreground", "--vscode-editorLightBulbAi-foreground", "--vscode-editorLightBulbAutoFix-foreground", <ins> "--vscode-editorActionList-background", "--vscode-editorActionList-foreground", "--vscode-editorActionList-focusForeground", "--vscode-editorActionList-focusBackground", </ins> "--vscode-editorLineNumber-activeForeground", "--vscode-editorLineNumber-dimmedForeground", "--vscode-editorLineNumber-foreground",

width: 100%; border: 1px solid var(--vscode-editorWidget-border) !important; border-radius: 2px; <del> background-color: var(--vscode-editorWidget-background); color: var(--vscode-editorWidget-foreground); </del> <ins> background-color: var(--vscode-editorActionList-background); color: var(--vscode-editorActionList-foreground); </ins> } .context-view-block {

} .action-widget .monaco-list .monaco-list-row.action.focused:not(.option-disabled) { <del> background-color: var(--vscode-quickInputList-focusBackground) !important; color: var(--vscode-quickInputList-focusForeground); </del> <ins> background-color: var(--vscode-editorActionList-focusBackground) !important; color: var(--vscode-editorActionList-focusForeground); </ins> outline: 1px solid var(--vscode-menu-selectionBorder, transparent); outline-offset: -1px; }

// Import the colors we need import { foreground, contrastBorder, activeContrastBorder, focusBorder, iconForeground } from 'vs/platform/theme/common/colors/baseColors'; <del> import { editorWidgetBackground, editorFindMatchHighlightBorder, editorFindMatchHighlight, widgetShadow } from 'vs/platform/theme/common/colors/editorColors'; </del> <ins> import { editorWidgetBackground, editorFindMatchHighlightBorder, editorFindMatchHighlight, widgetShadow, editorWidgetForeground } from 'vs/platform/theme/common/colors/editorColors'; </ins> export const listFocusBackground = registerColor('list.focusBackground',

export const tableOddRowsBackgroundColor = registerColor('tree.tableOddRowsBackground', { dark: transparent(foreground, 0.04), light: transparent(foreground, 0.04), hcDark: null, hcLight: null }, nls.localize('tableOddRowsBackgroundColor', "Background color for odd table rows.")); <ins> // ------ action list export const editorActionListBackground = registerColor('editorActionList.background', editorWidgetBackground, nls.localize('editorActionListBackground', "Action List background color.")); export const editorActionListForeground = registerColor('editorActionList.foreground', editorWidgetForeground, nls.localize('editorActionListForeground', "Action List foreground color.")); export const editorActionListFocusForeground = registerColor('editorActionList.focusForeground', listActiveSelectionForeground, nls.localize('editorActionListFocusForeground', "Action List foreground color for the focused item.")); export const editorActionListFocusBackground = registerColor('editorActionList.focusBackground', listActiveSelectionBackground, nls.localize('editorActionListFocusBackground', "Action List background color for the focused item.")); </ins>