Styling the Canvas - McManning/BlueGraph GitHub Wiki

If you are not a fan of my painstakingly chosen artisanal look 'n feel for the editor Canvas, a number of USS variables are exposed to let you override the defaults for various visual elements.

To start, create a custom GraphEditor for your Graph asset and override CreateEditorWindow to inject your own global stylesheets:

```cs
[CustomEditor(typeof(MyGraph))]
public class MyGraphInspector : GraphEditor
{
    public override GraphEditorWindow CreateEditorWindow()
    {
        var window = base.CreateEditorWindow();

        window.Canvas.AddToClassList("myCanvasView");
        window.Canvas.styleSheets.Add(Resources.Load<StyleSheet>("Styles/MyCanvasView"));
        
        return window;
    }
}

And then in your Resources/Styles/MyCanvasView.uss you can add overrides to BlueGraph variables:

* {
    --bluegraph-grid-background-color:              #220901;
    --bluegraph-grid-line-color:                    #621708;
    --bluegraph-grid-thick-line-color:              #621708;

    --bluegraph-node-title-color:                   #621708;
    --bluegraph-node-title-background-color:        #f6aa1c;
    --bluegraph-node-inputs-background-color:       #bc3908;
    --bluegraph-node-outputs-background-color:      #941b0c;
    --bluegraph-node-editables-background-color:    #621708;

    --bluegraph-port-title-color:                   #220901;
    --bluegraph-port-background-color:              #621708;
}

The above will give you a rather hideous fall theme:

Custom BlueGraph Canvas USS

For a full list of variables that you can override see the BlueGraphVariables.uss file in this project.

⚠️ **GitHub.com Fallback** ⚠️