Search code examples
visual-studio-codethemes

How to change the colors in a theme used in Visual Studio Code for the command pallet highlight?


Currently I am using a rather old theme that I originally built for TextMate in Visual Studio Code. All works well except for the command pallet, for some reason the color used to highlight the options is the same color as the text which makes it rather unusable (see highlighted image).

enter image description here

My theme is a .tmTheme file with items organized like this:

<dict>
    <key>name</key>
    <string>Comment</string>
    <key>scope</key>
    <string>comment</string>
    <key>settings</key>
    <dict>
        <key>fontStyle</key>
        <string>italic</string>
        <key>foreground</key>
        <string>#3C802C</string>
    </dict>
</dict>

Is there a set of items I can add to overwrite or change to change either the color of the highlighted text or the matching text so I can make it readable in my .tmTheme file?


Solution

  • EDIT: 2021-JUNE-19 8:27AM UTC



    I Remembered the List Property That Affects the Quick-Input:


    "list.hoverBackground": "#ABCDEF"

    This changes the background color of the command that is hovered over in the Quick-Input(Command-Palette)




    I refer to it as "Quick Input", however, I notice other people call it "Command-Palette". I'm not sure what the official name is, but in the theme its property name is quickInput. Its very easy to see why someone might have a difficult time tying together the actual item to the items property name.



    These are the color properties your looking for:

        "quickInput.background": "#050e26",
        "quickInput.foreground": "#28d2ff",
        "quickInputList.focusBackground": "#ff0000",
        "quickInputList.focusForeground": "#ff0000",
        "quickInputTitle.background": "#ff0000",