The background color and font settings of the style uss of the VisualElement of UnityEditor

As we all know, UIToolKit was launched after Unity2019 (2017??),

Make the UI support style files (uss)

(Actually I was the last one to know)

Speaking of style files, in fact, the first thing you should think of should be html+css

And the fact is

The writing method can also be infinitely close to .css

.gs{
    /*--備注了的都是不行的寫法（貌似图片必须放在指定目录下，url()參考：https://docs.unity3d.com/Manual/UIE-USS-PropertyTypes.html*/
    --background-image: url("UssImg/bg");
    --background-image: resource("UssImg/bg.jpg");//有后缀不行
    background-image: resource("UssImg/bg");        //和Unity传统一样，res获取不带后缀
    
}

However, we also found that the base class of the entire UIToolkit is VisualElement

We also checked, in fact, the xamain of C# just has visualelement and backgroundcolor attributes.

Of course, there is no more evidence that Unity is plagiarizing Xmmarin

Anyway, just figure it out, just write the code directly

Think, change the style of a search box

uss code

.pro seems to be. . . (Personally wronged, good programmer, no violence)

.search-input is the class name of the style file. I haven't found the # id name for the time being (the name can be arbitrary)

.pro .gs.search-input TextInput {
    --border-color: #4f4f4f;
    background-color: white;
    color:#9a828a;
}

.gs.search-input TextInput {
    padding-left: 24px;
    padding-right: 24px;
    margin-bottom: 0px;
    border-width: 1px;
    border-radius: 5px;
    border-color: #c6c6c6;
    -unity-overflow-clip-box: content-box;
}

c# code

           this.AddToClassList("search-input");

Add .uss file code

//.GetNewExcelSheetPath()用了一些技巧，主要是获取uss文件的绝对路径
var styleSheetPath = Utilities.GetNewExcelSheetPath();
var stylesheet = AssetDatabase.LoadAssetAtPath<StyleSheet>(styleSheetPath);
rootVisualElement.styleSheets.Add(stylesheet);

Get Path Code (Unity Editor)

      internal static string GetNewExcelSheetPath()
        {
            var styleSheetsInProject = AssetDatabase.FindAssets("t:StyleSheet");
            foreach (var id in styleSheetsInProject )
            {
                var path = AssetDatabase.GUIDToAssetPath(id);
                var name = GetFileName(path);
                if (name.Contains("excelsheet"))
                {
                    var content = File.ReadAllText(path);
                    if (content.Contains("ac00000b1d1e4330a4d11276fc6dcea9"))//暫時為 excelsheetW1.uss
                    {
                        return path;
                    }
                }
            }
            //如果找不到目录文件，则返回默认目录路径
            return "Assets/ExcelSheetScripts/Editor/Styles/excelsheet.uss";
        }

 

According to the above code, the modified style

refer to

UIElement USS attribute - Long blog - CSDN blog

Unity2019 UIElement Notes (6) USS Introduction - Programmer Sought

USS Supported Properties - Unity Manual

The font color of the text in the input in html, modify the font color of the placeholder in the input box - Programmer Sought