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

Question

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: https://forum.unity.com/threads/giving-unitygui-elements-a-background-color.20510/

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

Answer 1

The reason why you are getting those results is that the algorithm for coloring UI elements (or any other sprite using the default sprite shader) is to take the image (in this case the button background) and multiply the color values of each pixel with your chosen color. That means only those pixels which are pure white (RGB value 255, 255, 255) become that color, while all darker shades become darker variants of it.

And the default button image is not very bright. So the results of coloring is often a much darker tint than you would expect.

If you want brighter buttons, then you have to create your own button background image and use that for your buttons. You can change the background graphic of an IMGui button with a gui style. Either a button-specific one you pass to GUI.Button, or a general one for all buttons as part of a global gui skin.

There are five different images you need to set in that style:

• normal.background
• onActive.background
• onFocused.background
• onHover.background
• onNormal.background

You might also want to adjust the border of the gui style to match the borders of your button image and ensure that it tiles correctly.

Answer 2

Could it be your version? I'm running Unity 2020.3.19f1, and using your code this is what I see:

What version are you currently running?

You may also want to try:

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

The onNormal property also allows you to set specific styling when a GUI element is in the Normal state.