GraphView forces EditorWindow to use dark style

Unity Engine
,
1

In light editor theme, a EditorWindow will load “DefaultCommonLight_inter.uss” by default:

8478725--1127075--upload_2022-9-30_12-39-41.png
8478725--1127075--upload_2022-9-30_12-39-41.png1207×508 72.8 KB

But if I add a GraphView to the EditorWindow, it will always make the window switch to “DefaultCommonDark_inter.css”. This will make all other elements abnormal:

8478725--1127078--upload_2022-9-30_12-41-15.png
8478725--1127078--upload_2022-9-30_12-41-15.png1197×465 65.9 KB

Is there anyway to prevent this behaviour?

Here is the test code:

public class MyWindow : EditorWindow
{
    [MenuItem("Tests/My Window")]
    static void Open()
    {
        GetWindow<MyWindow>();
    }

    void OnEnable()
    {
        var label = new Label("Label");
        rootVisualElement.Add(label);

        var text = new TextField { value = "Text" };
        rootVisualElement.Add(text);

        var graphView = new MyGraph();
        rootVisualElement.Add(graphView);
    }

    public class MyGraph : GraphView
    {
        public MyGraph()
        {
            style.flexGrow = 1;
            style.flexShrink = 0;
        }
    }
}
2

Can anyone help?

3

Hi @SolarianZ
Graphview doesn’t support the light theme. If you want your window to look more coherent, you could try modifying rootVisualElement.styleSheets.

4

Hi, I’m not want to use light theme in GraphView. I mean, GraphView will force its parent EditorWindow turn to dark theme, is this a bug?

5

Graphview purposely forces dark theme on the window because it only supports the dark theme.

6

So that means now UI Toolkit only supports window-level theme? If that true, will UI Toolkit supports element-level theme in the feature updates?

7

In fact, it is possible to set theme in element-level, so I think it’s no need to force the whole window to use dark theme:

void OnEnable()
{
    var label = new Label("Label");
    rootVisualElement.Add(label);

    var text = new TextField { value = "Text" };
    rootVisualElement.Add(text);

    var graphView = new MyGraph();
    rootVisualElement.Add(graphView);

    var uieEditorUtilType = typeof(UnityEditor.UIElements.Toolbar).Assembly
        .GetType("UnityEditor.UIElements.UIElementsEditorUtility");
    var getCommonLightStyleSheetMethod = uieEditorUtilType.GetMethod("GetCommonLightStyleSheet",
        BindingFlags.Static | BindingFlags.NonPublic);
    var commonLightStyleSheet = (StyleSheet)getCommonLightStyleSheetMethod!.Invoke(null, null);

    label.styleSheets.Add(commonLightStyleSheet);
    text.styleSheets.Add(commonLightStyleSheet);
}
8

As you might know, internal APIs have no backward-compatibility guarantee, so your bindings might break from one Unity patch to the next, for example, so I would generally not recommend this approach.

Instead, maybe you could compare the stylesheets before adding Graphview to the stylesheets after adding it. Graphview calls this internal with itself as the argument:

internal static void ForceDarkStyleSheet(VisualElement ele)
{
    var lightStyle = GetCommonLightStyleSheet();
    var darkStyle = GetCommonDarkStyleSheet();
    var e = ele;
    while (e != null)
    {
        if (e.styleSheets.Contains(lightStyle))
        {
            e.styleSheets.Swap(lightStyle, darkStyle);
            break;
        }
        e = e.parent;
    }
}