How to change settings input background color in vscode?

Question

I want to change the background color of input in settings. I tried doing "input.background": "#1D1F22". But it's not working. Search bar in settings does reflect the new background. However, the any of the input in settings won't change the background color.

Here's my color customization settings (basically I just combined vscode default dark and one dark pro theme):

{
    "workbench.colorCustomizations": {
        "[Default Dark+]": {
            "activityBar.background": "#282c34",
            "activityBar.foreground": "#d7dae0",
            "activityBarBadge.background": "#4d78cc",
            "activityBarBadge.foreground": "#f8fafd",
            "badge.background": "#282c34",
            "button.background": "#404754",
            "debugToolBar.background": "#21252b",
            "diffEditor.insertedTextBackground": "#00809b33",
            "dropdown.background": "#282c34",
            "dropdown.border": "#21252b",
            "editor.background": "#20252B",
            "editor.foreground": "#D4D4D4",
            "editorError.foreground": "#c24038",
            "editorIndentGuide.activeBackground": "#c8c8c859",
            "editorMarkerNavigation.background": "#21252b",
            "editorRuler.foreground": "#abb2bf26",
            "editorWarning.foreground": "#d19a66",
            "editor.lineHighlightBackground": "#2c313c",
            "editor.selectionBackground": "#67769660",
            "editor.selectionHighlightBackground": "#ffffff10",
            "editor.selectionHighlightBorder": "#ddd",
            "editorCursor.background": "#ffffffc9",
            "editorCursor.foreground": "#528bff",
            "editorBracketMatch.border": "#515a6b",
            "editorBracketMatch.background": "#515a6b",
            "editor.findMatchBackground": "#42557b",
            "editor.findMatchBorder": "#457dff",
            "editor.findMatchHighlightBackground": "#6199ff2f",
            "editor.wordHighlightBackground": "#d2e0ff2f",
            "editor.wordHighlightBorder": "#7f848e",
            "editor.wordHighlightStrongBackground": "#abb2bf26",
            "editor.wordHighlightStrongBorder": "#7f848e",
            "editorGroup.border": "#181a1f",
            "editorGroupHeader.tabsBackground": "#21252b",
            "editorIndentGuide.background": "#3b4048",
            "editorLineNumber.foreground": "#495162",
            // "editorActiveLineNumber.activeForeground": "#737984",
            "editorWhitespace.foreground": "#3b4048",
            "editorHoverWidget.background": "#21252b",
            "editorHoverWidget.border": "#181a1f",
            "editorSuggestWidget.background": "#21252b",
            "editorSuggestWidget.border": "#181a1f",
            "editorSuggestWidget.selectedBackground": "#2c313a",
            "editorWidget.background": "#21252b",
            "focusBorder": "#464646",
            "input.background": "#1d1f23",
            "list.activeSelectionBackground": "#2c313a",
            "list.activeSelectionForeground": "#d7dae0",
            "list.focusBackground": "#383e4a",
            "list.hoverBackground": "#292d35",
            "list.highlightForeground": "#c5c5c5",
            "list.inactiveSelectionBackground": "#2c313a",
            "list.inactiveSelectionForeground": "#d7dae0",
            "list.warningForeground": "#d19a66",
            "menu.foreground": "#c8c8c8",
            "peekViewEditor.background": "#1b1d23",
            "peekViewEditor.matchHighlightBackground": "#29244b",
            "peekViewResult.background": "#22262b",
            "scrollbarSlider.background": "#4e566660",
            "scrollbarSlider.activeBackground": "#747d9180",
            "scrollbarSlider.hoverBackground": "#5a637580",
            "sideBar.background": "#20252B",
            "sideBarSectionHeader.background": "#282c34",
            "statusBar.background": "#282c34",
            "statusBar.foreground": "#9da5b4",
            "statusBarItem.hoverBackground": "#2c313a",
            "statusBar.noFolderBackground": "#282c34",
            "statusBar.debuggingBackground": "#7e0097",
            "statusBar.debuggingBorder": "#66017a",
            "statusBar.debuggingForeground": "#ffffff",
            "statusBarItem.remoteForeground": "#f8fafd",
            "statusBarItem.remoteBackground": "#4d78cc",
            "tab.activeBackground": "#282c34",
            "tab.activeForeground": "#dcdcdc",
            "tab.border": "#181a1f",
            "tab.inactiveBackground": "#21252b",
            "tab.hoverBackground": "#323842",
            "tab.unfocusedHoverBackground": "#323842",
            "terminal.foreground": "#c8c8c8",
            "terminal.ansiBlack": "#2d3139",
            "terminal.ansiBlue": "#61afef",
            "terminal.ansiGreen": "#98c379",
            "terminal.ansiYellow": "#e5c07b",
            "terminal.ansiCyan": "#56b6c2",
            "terminal.ansiMagenta": "#c678dd",
            "terminal.ansiRed": "#e06c75",
            "terminal.ansiWhite": "#d7dae0",
            "terminal.ansiBrightBlack": "#7f848e",
            "terminal.ansiBrightBlue": "#528bff",
            "terminal.ansiBrightGreen": "#98c379",
            "terminal.ansiBrightYellow": "#e5c07b",
            "terminal.ansiBrightCyan": "#56b6c2",
            "terminal.ansiBrightMagenta": "#7e0097",
            "terminal.ansiBrightRed": "#f44747",
            "terminal.ansiBrightWhite": "#d7dae0",
            "titleBar.activeBackground": "#282c34",
            "titleBar.activeForeground": "#9da5b4",
            "titleBar.inactiveBackground": "#21252b",
            "titleBar.inactiveForeground": "#6b717d",
            "textLink.foreground": "#61afef",
            "sideBar.border": "#282c34",
            "breadcrumb.background": "#282c34"
        }
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.tokenColorCustomizations": {
        "[Default Dark+]": {
            "comments": "#7f848e",
            "textMateRules": [
                {
                    "name": "Comments",
                    "scope": "comment, punctuation.definition.comment",
                    "settings": {
                        "foreground": "#7f848e",
                        "fontStyle": "italic"
                    }
                },
                {
                    "name": "js/ts italic",
                    "scope": "entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.super",
                    "settings": {
                        "fontStyle": "italic"
                    }
                }
            ]
        }
    }
}

Answer 1

In your specific case you want this colorCustomization:

"workbench.colorCustomizations": {

  "settings.numberInputBackground": "#ff0000",

but also see these for similar option colors:

"settings.textInputBackground": "#00aeff",
"settings.checkboxBackground": "#ff0000",
"settings.dropdownBackground": "#ff0000",

Try typing settings in the colorCustomizations block and you will get the intellisense to show you more options, such as foreground colors, borders, modified indicators, etc.