How Do You Change A Button's Background Color in an EditorWindow?

[JustThisGuy]

Hi All,

I’m trying to change a button’s background color in an EditorWindow. I can change tint using GUI.backgroundColor which seems to AND the color with grey, but I want to change it to an exact color. This is what I’m seeing:

Here’s the code:

EditorWindowButtonBackgroundColor.cs

using UnityEngine;
using UnityEditor;

public class EditorWindowButtonBackgroundColor : EditorWindow
{
  [MenuItem("Tools/Button Background Color Editor Window")]
  private static void OpenWindow()
  {
    GetWindow<EditorWindowButtonBackgroundColor>("Button Background Color");
  }

  public void OnGUI()
  {
    GUIStyle yellowBackgroundStyle = new GUIStyle(GUI.skin.button);

    yellowBackgroundStyle.normal.background = MakeBackgroundTexture(10, 10, Color.yellow);

    if (GUILayout.Button("GUIStyle Button", yellowBackgroundStyle))
    {
      Debug.Log("GUIStyle Button");
    }

    Color originalBackgroundColor = GUI.backgroundColor;

    GUI.backgroundColor = Color.yellow;

    if (GUILayout.Button("GUI.backgroundColor Button", yellowBackgroundStyle))
    {
      Debug.Log("GUI.backgroundColor Button");
    }

    GUI.backgroundColor = originalBackgroundColor;
  }

  private Texture2D MakeBackgroundTexture(int width, int height, Color color)
  {
    Color[] pixels = new Color[width * height];

    for (int i = 0; i < pixels.Length; i++)
    {
      pixels[i] = color;
    }

    Texture2D backgroundTexture = new Texture2D(width, height);

    backgroundTexture.SetPixels(pixels);
    backgroundTexture.Apply();

    return backgroundTexture;
  }
}

I got the code for MakeBackgroundTexture here:

Giving UnityGUI elements a background color.

Hey, I’m writing an editor for some gamedata in Unity. The editor will be a standalone application. Unfortunately this means that I can only use GUI class, and not EditorGUI. I’m trying to find a way to use BeginHorizontal/EndHorizontal to dynamically size some area to the amount of content I decide to put in it. I’d like those areas to have a certain background color, but can’t seem to figure out how to do it. I’m looking for the effect often seen on websites when they need to list many ite…

As you can see, modifying and applying a GUIStyle is not working for me. Any idea what I’m doing wrong?

[eses]

Hi @JustThisGuy

Would something like this work?

And which version of Unity are you using?

This is with 2019.4:

I wouldn’t use that button style you have. It is possible to get the above look with this kind of setup:

void OnEnable() =>
    tex = MakeBackgroundTexture(1, 1, new Color32(255, 255, 0, 255));

void OnGUI()
{
    // Flat color
    GUIStyle style = new GUIStyle();
    style.normal.background = tex;
    style.margin = new RectOffset(4,4,2,2);
    style.alignment = TextAnchor.MiddleCenter;

    if (GUILayout.Button("Flat button", style))
        Debug.Log("GUIStyle Button");

 
    // Slightly tinted color
    // Change GUI color
    // Don't use button style
    GUI.color = new Color32(255, 255, 0, 255);

    if (GUILayout.Button("Tinted Button"))
        Debug.Log("Tinted Button");
}

The first one is exact color, the second is not, but it looks like a button. For the second one, you’ll have to also reset the GUI color afterwards. IIRC there are some other ways too but unfortunately I can’t remember.

[JustThisGuy]

@eses

Hi @JustThisGuy

Would something like this work?

And which version of Unity are you using?

This is with 2019.4:

I wouldn’t use that button style you have. It is possible to get the above look with this kind of setup:

void OnEnable() =>
    tex = MakeBackgroundTexture(1, 1, new Color32(255, 255, 0, 255));

void OnGUI()
{
    // Flat color
    GUIStyle style = new GUIStyle();
    style.normal.background = tex;
    style.margin = new RectOffset(4,4,2,2);
    style.alignment = TextAnchor.MiddleCenter;

    if (GUILayout.Button("Flat button", style))
        Debug.Log("GUIStyle Button");

 
    // Slightly tinted color
    // Change GUI color
    // Don't use button style
    GUI.color = new Color32(255, 255, 0, 255);

    if (GUILayout.Button("Tinted Button"))
        Debug.Log("Tinted Button");
}

The first one is exact color, the second is not, but it looks like a button. For the second one, you’ll have to also reset the GUI color afterwards. IIRC there are some other ways too but unfortunately I can’t remember.

I’m using 2020.3.22f1.

So it looks like you can’t change the texture when basing it off of an existing style. Thanks for the info! Seems strange that it just silently fails though.