# Customization

UI Toolkit is utilized to render UI as opposed to UGUI.\
This has several benefits however the workflow may differ from what you're used to.

UI Toolkit uses style sheets to change visual aspects of the UI. So in order to customize the look of Ghost Commands you will have to create your own style sheet and override specific selectors. This may seem a bit complicated if you're not used to it, but it essentially allows for unlimited customization.

We recommend reading Unity's [UI Toolkit documentation](https://docs.unity3d.com/Manual/UIE-about-uss.html) for a better overview of how USS (stylesheets) works.

To make a stylesheet, right click in your project browser > Create > UI Toolkit > Style Sheet.\
Or simply type `create.uss` into the command field.

## Applying the style sheet[​](https://ghostlike.dk/docs/custom-styles#applying-the-style-sheet) <a href="#applying-the-style-sheet" id="applying-the-style-sheet"></a>

Navigate to the project settings and under the sections **Runtime Settings** and **Editor Settings**, you should find a **Custom Style Sheets** array. Any style sheet you add into these will get applied automatically.

In the style sheet, you simply override existing selectors to manipulate their properties. Variables can be overridden by adding a `:root` selector and assigning a value to a variable property.

```css
:root{
    --text-font-size: 14px;
    --accent-color: rgb(220, 190, 50);
    --search-highlight-color: rgb(10, 120, 210);
    --cursor-on-color: white;
    --cursor-off-color: transparent;
    (...)
}
```

{% hint style="info" %}
**Note**

Variable properties must be prefixed with `--`. This is a general rule in style sheets. So remember to use that for your variables!
{% endhint %}

You can also override specific class selectors to change any property within them.

```css
.suggestion-list{
    [Here you can override any properties you'd like]
}
```

Specific guides are provided below to make it simpler for you to customize common properties.

## Guide snippets[​](https://ghostlike.dk/docs/custom-styles#guide-snippets) <a href="#guide-snippets" id="guide-snippets"></a>

<details>

<summary>Change font</summary>

```css
:root{
    --text-font: url("/Assets/Fonts/SpookyFont-Regular.ttf");
}
```

</details>

<details>

<summary>Change accent color</summary>

```css
:root{
    --accent-color: rgb(255, 0, 0);
}
```

</details>

<details>

<summary>Change search highlight color</summary>

```css
:root{
    --search-highlight-color: rgb(215, 180, 50);
}
```

</details>

<details>

<summary>Change placeholder text</summary>

```css
:root{
    --text-field-placeholder: "Input goes here..."; /* Instead of the default: Enter command... */
}
```

</details>

<details>

<summary>Disable suggestions</summary>

```css
:root{
    --enable-suggestions: false;
}
```

</details>

<details>

<summary>Disable suggestion icons</summary>

```css
:root{
    --enable-suggestion-icons: false;
}
```

</details>

<details>

<summary>Disable suggestion values</summary>

```css
:root{
    --enable-suggestion-values: false;
}
```

</details>

<details>

<summary>Disable search highlighting</summary>

```css
:root{
    --enable-search-highlight: false;
}
```

</details>

<details>

<summary>Disable text field hints</summary>

```css
:root{
    --enable-text-field-hints: false;
}
```

</details>

<details>

<summary>Disable animation</summary>

```css
.command-element{
    transition-property: none;
}

.command-element--hidden{
    translate: 0px 0px;
}
```

</details>

## How to set custom icons[​](https://ghostlike.dk/docs/custom-styles#how-to-set-custom-icons) <a href="#how-to-set-custom-icons" id="how-to-set-custom-icons"></a>

Custom icons can be set for any command or parameter. You can even override existing ones if you wish to. There are a few rules to follow, so let's start with command icons.

Command icons can be set in two ways: Based on their name, or based on their prefix. To set a custom icon based on the name of a command, you would do as follows:

```
.command-icon__name__[name goes here] {
    --unity-image: url("/Assets/Icons/MyIcon.png");
    --unity-image-tint-color: white;
}
```

{% hint style="info" %}
**Note**

Notice we also specify the tint color. This is because, by default, any icon uses the general

`--accent-color` variable, unless the property has been overridden.
{% endhint %}

Setting icons for a prefix is just as simple. We simply replace `name` with `prefix` in the selector.

```css
.command-icon__prefix__[prefix goes here] {
    --unity-image: url("/Assets/Icons/CoolPrefix.png");
    --unity-image-tint-color: blue;
}
```

So how about setting icons for parameters? It generally follows the same principles, but there are other rules. Here, there are also two ways of doing it. The first one is based on the parameter's type. The other is based on the name of custom suggestion attributes.

To set an icon based on the parameter type, create a selector like this:

```css
.parameter-icon__type__[type name] {
    --unity-image: url("/Assets/Icons/JuicyParameter.png");
    --unity-image-tint-color: orange;
}
```

To set an icon based on a suggestion attribute, you would type:

```css
.parameter-icon__attribute__[name of attribute] {
    --unity-image: url("/Assets/Icons/Ghost.png");
    --unity-image-tint-color: green;
}
```

{% hint style="info" %}
**Naming**

Selectors **must** be in lower-case in order for your custom icons to applied.
{% endhint %}

{% hint style="info" %}
**Styling**

We recommend using white textures, as changing the color via style sheets, and respecting the general `--accent-color` is easier that way.
{% endhint %}

## Common variables[​](https://ghostlike.dk/docs/custom-styles#common-variables) <a href="#common-variables" id="common-variables"></a>

To modify variables, simply create a `:root` selector, and override the ones you would like to change. Variables can also be overridden in specific selectors if you prefer to have finer control over where they are applied. These selectors might be helpful for that: `.runtime`, `.editor-light` and `.editor-dark`.

### Text[​](https://ghostlike.dk/docs/custom-styles#text) <a href="#text" id="text"></a>

* `--text-font`
* `--text-color`
* `--text-font-size`
* `--text-field-placeholder`
* `--cursor-on-color`
* `--cursor-off-color`
* `--text-field-background-color`
* `--text-field-hint-color`
* `--enable-text-field-hints`

### Suggestions[​](https://ghostlike.dk/docs/custom-styles#suggestions) <a href="#suggestions" id="suggestions"></a>

* `--list-color`
* `--list-item-color--hover`
* `--list-item-color--selected`
* `--list-item-color--selected--hover`
* `--list-item-height`
* `--list-max-height`
* `--icon-background-color`
* `--scroller-color`
* `--scroller-handle-color`
* `--search-highlight-color`
* `--enable-suggestions`
* `--enable-suggestion-icons`
* `--enable-suggestion-values`
* `--enable-search-highlight`

### General colors[​](https://ghostlike.dk/docs/custom-styles#general-colors) <a href="#general-colors" id="general-colors"></a>

* `--accent-color`

### Icon colors[​](https://ghostlike.dk/docs/custom-styles#icon-colors) <a href="#icon-colors" id="icon-colors"></a>

* `--icon-color-blank`
* `--icon-color-dark`
* `--icon-color-editor`
* `--icon-color-enum`
* `--icon-color-bool`
* `--icon-color-prefab`
* `--icon-color-gameobject`
* `--icon-color-component`
* `--icon-color-scriptableobject`

## Common selectors[​](https://ghostlike.dk/docs/custom-styles#common-selectors) <a href="#common-selectors" id="common-selectors"></a>

Any of these can be modified to your liking. Do note that some modifications may require you to override some of Unity's own selectors. Again, we recommend reading up on their [documentation](https://docs.unity3d.com/Manual/UIE-about-uss.html).

### Main element[​](https://ghostlike.dk/docs/custom-styles#main-element) <a href="#main-element" id="main-element"></a>

* `.command-element`
* `.command-element--hidden`

### Text field[​](https://ghostlike.dk/docs/custom-styles#text-field) <a href="#text-field" id="text-field"></a>

* `.command-text-field`
* `.command-text-field__hint`
* `.cursor-on`
* `.cursor-off`

### Suggestion list[​](https://ghostlike.dk/docs/custom-styles#suggestion-list) <a href="#suggestion-list" id="suggestion-list"></a>

* `.suggestion-list`
* `.suggestion-list--hidden`
* `.suggestion-list__item`
* `.suggestion-list__item__label`
* `.suggestion-list__item__value`
* `.suggestion-list__item__icon`
* `.suggestion-list__scroller`

### Debug window[​](https://ghostlike.dk/docs/custom-styles#debug-window) <a href="#debug-window" id="debug-window"></a>

* `.window`
* `.window__container`
* `.window__container__text`
* `.window__container__button`
* `.window__container__scroller`
* `.window__title-bar`
* `.window__title-bar__text`
* `.window__title-bar__button`
* `.window__resize-handle`