Sublime Forum

Classes for tab text and Find&Replace console

#1
  1. What should I do to text color in the active tab, different from the color of the text in the inactive tabs? In my color scheme text is very bright in the active tab.

Different text colors in tabs
He8ZSzv.png983×134

Part of my Default.sublime-theme file:

// Text in tabs
    {
        "class": "tab_label",
        "fg": [255, 240, 245],
    },

2. What should I do to color words `Find What:` and `Replace With:` differ from the color of the text on the buttons on the right of console Find&Replace? In my color scheme text is very bright:

Find and Replace
x00fAlI.png1278×155

Part of my Default.sublime-theme file:

//  Find&Replace text
    {
        "class": "label_control",
        "color": [127, 255, 212],
        "font.size": 15.0,
    },

Somebody uses color schemes, where the color of the text in the active and inactive tab differ? Somebody uses color schemes, where the color of Find What: and Replace With: differ from the color of the text on the buttons on the right of console Find&Replace?

Thanks.

0 Likes
Theming ST is too hard. Theming documentation collective effort
#2

In both case you could specify its container with the keyword “parents”. There are examples in many themes, but also in this documentation repository.

0 Likes
#3

@dubeg,

In both case you could specify its container with the keyword “parents”.

I know about parents, but how I can learn, what classes at elements necessary to me?

There are examples in many themes, but also in this documentation repository.

You could set at least one example of a color scheme?

Thanks.

0 Likes
#4

Even though some people like to call color schemes, themes, you will find that most packages tagged as “theme” on package control are UI themes, as opposed to being a text buffer theme (which really should be called a color scheme as it is more explicit on what it is).

That being said, you can browse the theme label on package control to find plenty of themes that will contain answers to your questions.

Example:
The first package in the list is Agila Theme. Clicking on its name sends me on its details page. There, you can find two useful links, homepage and issues. Both will probably lead me to its source files since they link to github. I click on the homepage link, and end up on the code tab of its github repository. I see a bunch of *.sublime-theme files. I click on Agila Classic.sublime-theme, scroll down a bit, and see this json object…

{
        "class": "tab_close_button",
        "parents": [{"class": "tab_control"}],
        ...
}, 
...

Nice, I found how to specify the right container to the “tab_close_button” key. It’s only a matter of time before I find the container to the tab label, and how to specify its “active” attribute.

Easy mode: press Ctrl + F and search for tab_label.

0 Likes
#5

@dubeg, as you wrote, I found many classes for my theme, see my Default.sublime-theme file. But classes, about what I ask in this subject, I can’t find though I watched already tens subjects :disappointed:. Thanks.

0 Likes
#6

As I have already written here, you should use the parents key in your rule.

So, knowing that, the following is the answer to your question:

{  // Set default color for tab labels
	"class": "tab_label", 

	"fg": [255, 0, 0]
},
{ // Set color for labels in selected tabs
	"class": "tab_label",
	"parents": [ // **MAGIC** Here, I specify that this rule applies only to those `tab_label`s that are children of tabs that have the `selected` attribute
		{
			"class": "tab_control", // We target children of tabs
			"attributes": ["selected"] // that are selected
		}
	],

	"fg": [0, 0, 255]
}

I happen to be russian, so, if you don’t understand something, I can help you in our mother tongue :slightly_smiling:

0 Likes
#7

Спасибо! Для вопроса 1 чуть не так надо:

// Text in active tab
    {
        "class": "tab_label",
        "parents": [{"attributes": ["selected"]}],
        "fg": [199, 21, 133],
    },

В вопросе 2 единственное, что придумал, — сделать шрифт жирным.

Sasha Great

    //  Find&Replace and Status Bar text
       {
        "class": "label_control",
        "color": [127, 255, 212],
        "font.size": 15.0,
        "font.bold": true,
       },

Но всё равно: Find What: и Replace With: на светлом фоне, а текст в Status Bar и кнопках — на тёмном.

Спасибо.

0 Likes
#8

В первом случае не важно указывать или нет class в parents, так как tab_label не может лежать не в tab_control.

Во втором примере нужно снова применить ключ parents:

{
	"class": "label_control",

	"color": [255, 255, 255]
},
{
	"class": "label_control",
	"parents": [{"class": "button_control"}],

	"color": [255, 0, 0]
},
{
	"class": "label_control",
	"parents": [{"class": "status_bar"}],

	"color": [255, 0, 0]
}

1 Like
#9

Да, тоже просто, что-то у меня думать в последнее время не получается…

Open files and folders

А где находится настройка, отвечающая за цвет надписи Open files and folders после нажатия Ctrl+Shift+F ? Сменить бы этот серый и тусклый.

Открыл PackageResourceViewer: Open Resource → Theme - Default → Default.sublime-theme, пробовал подставлять классы оттуда — не выходит. PackageResourceViewer: Open Resource → Theme - Default → также не нашёл нужной настройки.

0 Likes
#10

Это отличный вопрос! Я не знаю на него ответ, так как не нашел настройку placeholder’ов в цветовых схемах. Я спросил об этом на форуме.

Однако, можно кастомизировать другие параметры текстовых полей. Для этого нужно создать файл Widget - {названиеТемы}.sublime-settings в папке с вашей темой. Этот файл задает настройки для всех полей с текстом, кроме основного поля редактора.

В нем можно, например, заменить цветовую схему:

{
	"color_scheme": "Packages/Theme - {названиеТемы}/{цветоваяСхемаДляТекстовыхПолей}.stTheme"
}

Обратите внимание, что цветовая схема имеет расширение .stTheme а не .tmTheme. Это нужно, чтобы в меню настроек цветовой схемы эта служебная схема не отображалась.

0 Likes
#11

Ещё настройки изменения границ кнопок в Status Bar не нашёл.

Границы кнопок в Status Bar

0 Likes
#12

Для того, чтобы задать границу (border) элементу, нужно использовать слой с настройкой draw_center: false и указанным inner_margin.

Пример:

{
	"class": "status_button",

	"layer0.tint": [255, 0, 0], // цвет границы
	"layer0.opacity": 1.0,
	"layer0.draw_center": false, // не рисуем внутреннюю (inner) часть. Расстояние до нее от краев задается через inner_margin
	"layer0.inner_margin": [1, 0, 0, 0], // размер границы: [слева, сверху, справа, снизу]

	"content_margin": [25, 0]
},

Не забудьте, что слои с большим номером рисуются поверх слоев с меньшим.

1 Like