Editor skinning thread

Here we discuss and find out ways to hack into editor themes and share created themes.

"I don't like unity default theme" starter pack:

Tools

Misc reading

4 Likes

First question - anyone managed to replace font globally?

I tried both

:root {
    font-size: 11px;
    -unity-font: resource("Fonts/dejavu.ttf");
    color: rgba(217, 217, 217, 0.95);
}

and in

.unity-theme-env-variables

block.

It seems unity overrides font somewhere else, was looking with ilspy into where it happens and how to inject custom font.

It doesn't work even for individual elements override

Trying to work this out myself, please let me know if you figure it out and I will do the same!

I managed to inject my font but it doesnt work

4752359--451112--upload_2019-7-16_16-42-15.png

using UnityEditor;
using UnityEditor.Experimental;
using UnityEngine;
using System.Reflection;
using System.Collections.Generic;

[InitializeOnLoad]
public static class ReloadTool
{
    private const string FONT = "Dejavu Sans Mono";
    private const string FONTPATH = "Fonts/dejavu.ttf";

    static ReloadTool()
    {
        // var font = Resources.Load(FONTPATH) as Font;
        // var fontField = typeof(EditorResources).GetField("s_NormalFont", BindingFlags.Static | BindingFlags.NonPublic);
        // fontField.SetValue(null, font);
        //
        // GUISkin defaultSkin = GUIUtility.GetDefaultSkin();
        // //defaultSkin.font =
        // EditorResources.UpdateGUIStyleProperties(defaultSkin);

        var supportedFontsField = typeof(EditorResources).GetField("s_SupportedFonts", BindingFlags.Static | BindingFlags.NonPublic);
       // var builtInFontsField = typeof(EditorResources).GetProperty("builtInFonts", BindingFlags.Static | BindingFlags.NonPublic);

        List<string> supportedFonts = supportedFontsField.GetValue(null) as List<string>;
        if (supportedFonts == null)
            supportedFonts = EditorResources.GetSupportedFonts();

        //Dictionary<string, string> builtInFonts = EditorResources.builtInFonts;

        EditorResources.builtInFonts.Add(FONT, FONTPATH);

        supportedFonts.Add(FONT);

        supportedFontsField.SetValue(null, supportedFonts);

        foreach (var item in supportedFonts)
            Debug.Log(item);

        EditorPrefs.SetString("user_editor_font", FONTPATH);
    }
}

4752359--451115--upload_2019-7-16_16-43-6.png

tried various approaches but it fails to read, or switch, im not sure, ill try again later.

HAHA literally noticed a typo on the last line, now it loads

1 Like

The example in the documentation sets the font like:

:root {
    -unity-font: resource("Font/consola.ttf");
}

Where the folder is “Font” rather than “Fonts”. Perhaps this makes a difference?

4752368--451118--upload_2019-7-16_16-46-1.png

Sadly whole ui is borked but at least font works

It seems i broke it so hard it doesnt start anymore

1 Like

Nah it was
EditorPrefs.SetString(“user_editor_font”, FONTPATH);
instead of
EditorPrefs.SetString(“user_editor_font”, FONT);

1 Like

Nice work !

4752581--451148--upload_2019-7-16_17-23-12.png

its working!

using UnityEditor;
using UnityEditor.Experimental;
using UnityEngine;
using System.Reflection;
using System.Collections.Generic;

[InitializeOnLoad]
public static class FontLoader
{
    private const string FONT = "Dejavu Sans Mono";
    private const string FONTPATH = "Fonts/dejavu.ttf";

    static FontLoader()
    {
        var font = EditorResources.Load<Font>(FONTPATH) as Font;
        var fontField = typeof(EditorResources).GetField("s_NormalFont", BindingFlags.Static | BindingFlags.NonPublic);
        fontField.SetValue(null, font);

        GUISkin defaultSkin = GUIUtility.GetDefaultSkin();
        defaultSkin.font = font;
        EditorResources.UpdateGUIStyleProperties(defaultSkin);

    }
}

actually half of it was not necessary, you don't get the selector in menu, but it does its job /shrug

4 Likes

Can you also just overwrite the font in the Console window, but keep the font of other UI untouched, for example? I always wanted a mono-space font for the console.

1 Like

Managed to override almost every element. Everything that's still bright is using the light skin because they are using an icon/image as the background. Trying to override the icons with the Editor Default Resources folder isn't working. A fair amount of the UI uses these images, mainly the Profiler.

4754270--451346--upload_2019-7-16_18-17-2.jpg

13 Likes

Can you share the files?

4755242--451208--upload_2019-7-16_18-22-46.png

1 Like

I can’t figure out a way to replace a single element font sadly. Actually i can’t even change a lot of elements since none of the selectors i tried work, i wonder how @Grimreaper358 did it.

It seems that a lot of uss properties get just flat out ignored. It seems there are inconsistencies between uss to imgui styles.

2 Likes

Yea, I was planning to do this after I got it to a decent state and would only have minor fixes to do.

The last few major things I need to do is replace the icons and fix some broken windows that use a separate/their own theme. For the icons contributing to the light theme still, I will have to remake or wait and see if they will add the editor resources to GitHub and use/modify those. As for how I edit the UI, I just followed the steps from the other thread which you also linked "Basic how-to" (After a while I converted it a package, this way it's easily shared and updated)

Also for some reason, Unity stopped auto-reloading the file so every change I make I have to close the editor and reopen which increases the iterating time a lot. Especially since some element names don't really do anything when you try to edit them (If anyone knows a fix let me know, also how to replace the icons. Followed the steps by the dev but it didn't work)

Broken Windows - Not 100% sure how to fix so far

Package Manager - Has it's own UI so I will have to see if I can override its properties in the same file
4756097--451646--upload_2019-7-17_7-50-57.png

Light Explorer
4756097--451649--upload_2019-7-17_7-52-42.png

Profiler - I changed the text color and It inherited its color label (Also light theme from icons)
4756097--451658--upload_2019-7-17_7-59-10.png

3 Likes

That is beautiful :open_mouth:

What's the earliest version of 2019 that supports this? I can't open 2019.3.0a8 due to crashes.

Edit: Working in a7.

If you know the paths to the resources, you could rip them using EditorGUIUtility.Load, Instantiate and AssetDatabase.CreateAsset. Redistributing them wouldn’t be necessary either since you could just distribute an editor script to rip them on the user’s side. The resource paths can probably be found in the built-in .uss files, which can be obtained using my script linked in the OP.

I was thinking of going back and looking at your script to see if I could get some information from it. Unfortunately, I don’t really know much about coding so I’m kind of limited there. I’m not even 100% sure how to use the script you made so ripping the assets using the libraries? listed above is slightly out of my reach in terms of knowledge. I just know a bit of web development so it wasn’t any problem restyling the editor so far.

If you just need a simple step-by-step instruction on how to get it running:

  1. Make a new folder in your Assets directory, call it whatever you want
  2. In the editor, right click inside that folder and go Create → Assembly Definition
  3. Name the assembly definiton Assembly-CSharp-Editor-testable
  4. Create a new script in the folder, call it StyleSheetExporter
  5. Open the script in a text editor, delete everything and paste my code in

Upon a refresh, you should have a new “StyleSheet Exporter” dropdown in the editor.
When you run it, it’ll save all the files into your project directory, just outside the Assets folder.

1 Like

Ah, I tried it before but didn’t notice the menu item for the dropdown so I deleted the assembly definition and the script. I’ll try it again and see.