Great! A dark background! That doesn't seem like a Grid Background though. The reason why it doesn't is likely because the line colors are either transparent or the same color as background. So we are going to have to update that by using Style Sheets. Let's start by creating our StyleSheet. In Unity, make sure you are in the Assets folder and create a new folder named "Editor Default Resources", make sure you include the spaces. Inside that folder we'll create another folder named "DialogueSystem", just so it doesn't conflict with other people folders if we ever use this as a package. Inside, we'll create a new Style Sheet
by right clicking in project window, going to Create > UI Toolkit > Style Sheet. I'll name it "DSGraphViewStyles". Inside our ".uss" file, feel free to remove the default VisualElement selector and instead type in "GridBackground". We will be updating 4 things in our GridBackground: the background color, the line color, the thick line color and the spacing between each line. Thankfully for us, Unity already provides custom properties that allow us to change that. Let's start with the background color by typing in "--grid-background-color:" and pass in an hex code, which i already have some prepared, so feel free to copy them out. For this one I'll be using "#2b2b2b". The styles will not update themselves until we load and add a style sheet, so I'll be showing the differences in the screen. For our line color we use the property
"--line-color". And I'll pass in an rgba this time, so I'm going to make it the same color as a thick line color but with some transparency. So "rba(51, 51, 51, 0.4)". For our thick line color, we use "--thick-line-color" and I'll pass in the same value as our line color but with an alpha of 1. You could also simply pass in "rgb" instead without specifying the alpha, but just in case you want to make the alpha lower than 1, you can leave it as is. And last but not least, we have our line spacing. The higher the number you type, the bigger your grid squares will look like. So type in "--spacing" and I'll give it a value of 25. You do not need to specify that's in pixels or anything, simply type in the number that you want. Our styles are done so it's time for us to load our stylesheet and add it to our Graph View. So let's head back to our GraphView script and create a new method called "AddStyles". Inside, we'll be loading our Style Sheet
using the "EditorGUIUtility.Load" method. To do so, create a variable of type StyleSheet and I'll name it "styleSheet" and load it by typing in "EditorGUIUtility.Load()". If this class isn't recognized, simply import its namespace. Then, type in the path of the StyleSheet in here. When we are done doing that, we need to add the StyleSheet to the styleSheets variable. Because GraphView ends up inheriting from VisualElement, we can simply type in "styleSheets.Add(styleSheet)". So not forget that in the path we need the "DialogueSystem" folder as well. We do not however need to type in the "Editor Default Resources" folder name. If we go back to Unity, we should now see our GridBackground updated with its new styles. That's enough, but we should probably start by creating our StyleSheet variables. In the grids case, I'm not going to use these colors anywhere else because it's a different color theme than the rest of the Dialogue System, so that it looks more like the default styles. But it's always nice to have them there in case we need them for reusability or just update them through one file. So let's go back to our "DialogueSystem" folder in the "Editor Default Resources" folder and create a new StyleSheet. I'll name this one "DSVariables". As the name states, we'll be adding every style variable here. We need to start by typing in our root pseudo-class selector and then declare our variables inside. I'll be following Unity naming a bit but because it's my first time doing that it might not be 100% correct. I'll have a link down below if you want to know more about how Unity names their stuff. I'll start by adding "ds" at the beginning of every variable to specify it's a variable that I made for this Dialogue System. Then the type of the style, such as colors or metrics, followed by the scope, such as grid or window or a certain element. I'll be using window for anything that can be used by every element in our Window. Then, the style value, such as 20 pixels or just 25. In case it is in pixels, I'll add it before the value value, such as "pixels-25". For colors I'll be doing something like "dark-grey" or "light-grey". Then, the number in case I have multiple of the same value, such as "dark-grey-1" and "dark-gray-2". This is because I find it a bit hard to name colors as they are all shades of grey, so what I'll do is order them from darker to lighter, darker being 1 and lighter being n. In this series, I'll be separating the scope in grid and window. This is the only time I'm going to use the grid scope, so feel free to set it as window if you'd like or just name them however you'd like. Let's start things off by creating our darkest color by typing in: "--ds-colors-grid-light-grey-1". And pass in "#2b2b2b". Then, we'll create "--ds-colors-grid-light-grey-2" for our line color, which is "rgba(51, 51, 51, 0.4)". For our last color we'll type in "--ds-colors-grid-light-grey-3" and pass in the same rgba values but with an alpha of 1. For our spacing we'll go with "--ds-metrics-grid-25: 25". We have our variables done so all we need to do now is to swap them in our ".uss" file. So open up the GraphViewStyles file and update the values to use the new variables using the var function. If we save and go to Unity, the Window might still have your styles. But if we re-open the Window it, will no longer have them. That's because we need to load our "DSVariables" StyleSheet. And we'll do that in our Editor Window. So head back to the Editor Window script and create a new method in the "OnEnable" method called "AddStyles". In here, we'll copy the code from our GraphView "AddStyles" method and paste it in. We'll simply update the path to be "DSVariables" instead. We'll also need to make sure we are adding the style to the "rootVisualElement" as the Editor Window isn't a VisualElement itself. Saving and going back to Unity, we should now have our styles working no matter how many times we re-open the Window.
