Sublime Text Theme: Change the background of the search bar

Question

I've been editing my own theme for Sublime Text, but I got stuck at one bit.

I couldn't find a way to modify the color of the Input field of the search bar. I've managed to apply a background image to the container of the input (as you can see in the image bellow with a border), but I couldn't remove the white background of the input.

I know that it got be a way to remove, because the Soda themes have different colors there. The question is: how?

And also, is it possible to change the font color of this input?

Thank you! Lucas

Answer 1

First of all, all example codes here are from Soda Theme. It is a wonderful theme.

You can create a custom color scheme and use it. It seems that this may affect all widgets, such as output, side bar and the input fields. And you need to restart Sublime Text to make it take affect.

Take Widget - Soda Dark.stTheme for example: change background value.

<string>Soda Dark - Widget Theme</string>
<key>settings</key>
<array>
    <dict>
        <key>settings</key>
        <dict>
            <key>background</key>
            <string>#383838</string>
            <key>caret</key>
            <string>#F8F8F8</string>
            <key>foreground</key>
            <string>#F8F8F8</string>
            <key>invisibles</key>
            <string>#3B3B3B</string>

Use it as color scheme:

{
  "color_scheme": "Packages/Theme - Soda/Soda Dark/Widget - Soda Dark.stTheme",
  "draw_shadows": false
}

Besides, you can custom the text input fields in your theme via text_line_control.

// Text input field item
{
    "class": "text_line_control",
    "layer0.texture": "Theme - Soda/Soda Dark/text-field.png",
    "layer0.opacity": 1.0,
    "layer0.inner_margin": [4, 5, 4, 3],
    "content_margin": [3, 3]
},