Custom Editor Theme ?

[LuiBroDood]

so now i guess the professional theme is free huh
buuut
so
what i want is a blueish grayish color theme
like 2.79 blender’s Hexagon theme
i used to mess around with wolfenstein map maker and it had that color scheme it was the best
besides, supposedly blue has psych effect makes you more productive

preferably hopefully we can edit and use the built in theme picker
i tried a custom theme plugin in the past and it was janky
maybe there is non-janky plugin available?

thanks for any help

(Blender Hexagon theme)

[Mauri]

You can do this via custom USS styles - see this post:

Unity why have you made your entire gui look like garbage now?

Hi pointcache, If you have some time to spent, you can override most of the USS styles to get a new look. As an example, in a project or a package, create three files “Editor/StyleSheets/Extensions/common.uss” “Editor/StyleSheets/Extensions/light.uss” “Editor/StyleSheets/Extensions/dark.uss” Then in “Editor/StyleSheets/Extensions/dark.uss” add this: .dockHeader { background-color: #005454; } Then if you domain reload and refresh you get something like this: [4747730--450626--upload_2…

*This thread may also be interesting: Editor skinning thread *

[Aviryx]

/Assets/Editor/StyleSheets/Extensions/dark.uss

.AppToolbar
{
    background-color: #000000;
}

.AppCommandLeft
{
    background-color: #0e3159;
}

.AppCommandMid
{
    background-color: #0e3159;
}

.AppCommandRight
{
    background-color: #0e3159;
}

.AppToolbarButtonLeft
{
    background-color: #0e3159;
}

.AppToolbarButtonRight
{
    background-color: #0e3159;
}

.DropDown
{
    background-color: #0e3159;
}


.dockHeader
{
    background-color: #000000;
}

.dockarea
{
    background-color: #000000;
}

.PaneOptions
{
    background-color: #000000;
}

.TabWindowBackground
{
    background-color: #000000;
}

.Toolbar
{
    background-color: #0e3159;
}

.SceneTopBarBg
{
    background-color: #000000;
}

.ScrollViewAlt
{
    background-color: #000000;
}


.SceneTopBarBg
{
    background-color: #0e3159;
}

.FoldoutHeader
{
    background-color: #000000;
}

[Marc-Saubion]

@Mauri

You can do this via custom USS styles - see this post:
Unity why have you made your entire gui look like garbage now? - #23 by jonathans42

*This thread may also be interesting: Editor skinning thread *

Half of this post is wrong. I tried to override the icons as suggested by @jonathans42 , even opened a dedicated thread and got ignored.

I think this is more a PR stunt to make it look like you can customize the editor than anything else.

@LuiBroDood , don’t expect too much from it.

[Mauri]

@Marc-Saubion Editor Default Resources\Icons has to be directly under the Assets directory.

For me, it works - I changed the ‘Scene View Lighting’ icon from a lightbulb to a simple S icon:

Attached is the image file - it has to be named exactly like the icon itself is named internally (SceneViewLighting@2x).

The downside in general is that some things are seemingly hardcoded and can’t be changed via USS. I had trouble re-coloring e.g. the Status error text (the one-liner you get when having errors) because it’s called “CN StatusError” and you can’t target that with CSS. Maybe @jonathans42 could shed some light on this.

Edit: I found a list of most (maybe all?) internal editor icons on Github here.

[Marc-Saubion]

@Mauri

@Marc-Saubion Editor Default Resources\Icons has to be directly under the Assets directory.

For me, it works - I changed the ‘Scene View Lighting’ icon from a lightbulb to a simple S icon:

Attached is the image file - it has to be named exactly like the icon itself is named internally (SceneViewLighting@2x).

The downside in general is that some things are seemingly hardcoded and can’t be changed via USS. I had trouble re-coloring e.g. the Status error text (the one-liner you get when having errors) because it’s called “CN StatusError” and you can’t target that with CSS. Maybe @jonathans42 could shed some light on this.

Edit: I found a list of most (maybe all?) internal editor icons on Github here.

Thanks for your encouraging feedback. You’re the first I see make it work. There’s hope after all.

That said, it still doesn’t work on my end. I imported your icon and tested it on both dark and light skin but without success. Texture type : Editor GUI and Legacy GUI.

Could you send it to me again as a package so I can make sure I didn’t use some different settings somewhere?

I tried it on 2020.1.1f1. What about you?

I also found that githup repo and even got my hands on the old icons I’d like to use to be sure about the icons files names. If I make it work, I might be able to make a package to use the old icons.

Thanks again for your help.

[Mauri]

That’s odd… I’m using 2019.4.7f1, though.

Maybe things changed in 2020.1? I haven’t got the time to try out 2020.1 yet :S
Be sure to use the IMGUI Debugger, if you haven’t already: Unity script to open the IMGUI debugger. Useful for editor UI debugging! Make sure you put it in an Editor/ folder in your project · GitHub

Have you also tried closing and re-opening the editor? Does that make it changing the icon?

[Marc-Saubion]

@Mauri

That’s odd… I’m using 2019.4.7f1, though.

Maybe things changed in 2020.1? I haven’t got the time to try out 2020.1 yet :S
Be sure to use the IMGUI Debugger, if you haven’t already: https://gist.github.com/FreyaHolmer/60d76ed842a6c4f8f1ed424d6866575b

Have you also tried closing and re-opening the editor? Does that make it changing the icon?

Yeah, I opened and closed it multiple times actually.

Here is a package of the icons, tested on a 2019.4.7f1 empty new project. You can tell me if you see something weird.

I’m cheking IMGUI Debugger.

Thanks

6430193–719264–custom icons.unitypackage (15.4 KB)

[Marc-Saubion]

I’m onto something.

I didn’t have your icon because it was named “SceneViewLighting**@2x”**. Browsing into the github repo, I found there are 2 versions, once of which is named “SceneViewLighting”. I duplicated your icon, named it with the later and it worked.

I guess you have a 4k screen or something.

I added the “d_” for the dark skin and it works so far.

Let’s see if I can make it work on other icons.

[Mauri]

Hm, those Prefab Icons don’t work for me, but your (my) scene lighting icon does.

Some icons, especially those with a space in it, won’t work. I tried changing the Folder Icon before, but it also didn’t change. No idea, why that is

No, it’s just that I set the UI scaling to 125% under the Editor’s Preferences.... Otherwise, everything in the Editor is too tiny for my liking. My screen size is 1920x1080 Anything over 100% scaling uses the @2x icons.

Thanks for your findings

[Marc-Saubion]

So I experimented and it turns out, we’re both right.

You can change some icons like in the scene menu but it doesn’t work everywhere like the prefab or audio listener.

Thanks a lot for your help @Mauri . This confirms there’s a problem on unity’s end.

@jonathans42 , can you help? Thanks

[Marc-Saubion]

@Mauri

Hm, those Prefab Icons don’t work for me, but your (my) scene lighting icon does.

Some icons, especially those with a space in it, won’t work. I tried changing the Folder Icon before, but it also didn’t change. No idea, why that is

No, it’s just that I set the UI scaling to 125% under the Editor’s Preferences.... Otherwise, everything in the Editor is too tiny for my liking. My screen size is 1920x1080 Anything over 100% scaling uses the @2x icons.

Thanks for your findings

Apparently, everything thats called “Blabla Icon” is out of reach. I tried alternatives like deleting the space or replacing it with “_” , “-” or even a “.” . I don’t think we can do that without unity’s documentation.

[Mauri]

@Marc-Saubion

Apparently, everything thats called “Blabla Icon” is out of reach. I tried alternatives like deleting the space or replacing it with “_” , “-” or even a “.” . I don’t think we can do that without unity’s documentation.

Yeah, figured that too and even tried what you’ve tried with no success Too bad…

Well, at least we got SOME results and had a nice conversation about it alongside

I hope that some of the stuff that’s not modifiable right now (like I said, some fields are hidden behind names with spaces, rendering them unmodifiable - e.g. bottom Status bar text) will be made modifiable in the future.

[Marc-Saubion]

@Mauri

I hope that some of the stuff that’s not modifiable right now (like I said, some fields are hidden behind names with spaces, rendering them unmodifiable - e.g. bottom Status bar text) will be made modifiable in the future.

So do I but I mentioned it multiple times these last months with no reaction from unity so I can’t say I’m optimistic about this. But if enough users were to react about this, maybe we’d get it working.

Anyways, I’m glad we had that exchange because comparing notes allowed us to target the issue. I just made a bug report based on what we found a gave them a link to this thread. let’s hope there is an easy fix like replacing the space with a special character.

Thanks again for your help.

[Mauri]

@Marc-Saubion I have to thank you It was cool to figure it out together!

Regarding the initial thread, so far I got this:

.uss under the spoiler below. It’s not 100% the same/replicated, but it could be a good starting point for the OP. I tried commenting most of the lines and there are still spaces in the Editor left untouched, thanks to the reasons Marc and I said before.

common.uss

/**************************************************/
/*                                                */
/*    blueish grayish color theme for Unity Editor  */
/*                                                */
/*                    by Mauri                    */
/*                                                */
/**************************************************/



/*****************************************/
/*    Editor Top Toolbar & Button Styling  */
/*****************************************/

/* Used for the top bar (Play, Pause and other buttons) and bottom bar */
.AppToolbar {
    background-color: #5a5e6b;
}

/* Tool Handle Position ... */
.AppToolbarButtonLeft {
    background-color: #9497a6;
    border-color: #4b4e58;
}
.AppToolbarButtonLeft:hover {
    background-color: #afb2c1;
}
.AppToolbarButtonLeft:active {
    background-color: #ced1e0;
    color: #000000;
}

/* ... and Rotation */
.AppToolbarButtonRight {
    background-color: #9497a6;
    border-color: #4b4e58;
}
.AppToolbarButtonRight:hover {
    background-color: #afb2c1;
}
.AppToolbarButtonRight:active {
    background-color: #ced1e0;
    color: #000000;
}

/* Grid Snapping and Cloud button */
.AppCommand {
    background-color: #9497a6;
    border-color: #4b4e58;
}
.AppCommand:hover {
    background-color: #afb2c1;
}

/* Hand Tool and Play button */
.AppCommandLeft {
    background-color: #9497a6;
    border-color: #4b4e58;
}
.AppCommandLeft:hover {
    background-color: #afb2c1;
}
.AppCommandLeft:active {
    background-color: #ced1e0;
}
/* While in Play mode, the Play button has a different color assigned - here's a fancy red one */
.AppCommandLeftOn {
    background-color: #db4848;
    border-color: #4b4e58;
}
.AppCommandLeftOn:hover {
    background-color: #ff6363;
}
.AppCommandLeftOn:active {
    background-color: #ff8282;
}

/* Move Tool, Rotate Tool, ... and Pause button */
.AppCommandMid {
    background-color: #9497a6;
    border-color: #4b4e58;
}
.AppCommandMid:hover {
    background-color: #afb2c1;
}
.AppCommandMid:active {
    background-color: #ced1e0;
}

/* Available Custom Editor Tools and Step button (the one next to the Pause button) */
.AppCommandRight {
    background-color: #9497a6;
    border-color: #4b4e58;
}
.AppCommandRight:hover {
    background-color: #afb2c1;
}
.AppCommandRight:active {
    background-color: #ced1e0;
}


/********************************************************/
/*  Misc Elements Styling (Dropdowns, Buttons, etc...)  */
/********************************************************/

/* Top Account, Layers & Layout buttons */
.DropDown {
    background-color: #9497a6;
    border-color: #4b4e58;
}
.DropDown:hover {
    background-color: #afb2c1;
}

.Foldout:active {
    background-color: #afb2c1;
    color: #ffffff;
}

/* Used for some dropdown menus - like the ones in the Lighting Settings */
.MiniPullDown {
    background-color: #575f6f;
    border-color: #4b4e58;
    color: #ffffff;
}
.MiniPullDown:hover {
    background-color: #afb2c1;
    color: #000000;
}

/* Used for some other dropdown menus */
.MiniPopup {
    background-color: #575f6f;
    border-color: #4b4e58;
    color: #ffffff;
}
.MiniPopup:hover {
    background-color: #afb2c1;
    color: #000000;
}

/* Seems to be only used for the Collab dropdown */
.OffsetDropDown {
    background-color: #9497a6;
    border-color: #4b4e58;
}
.OffsetDropDown:hover {
    background-color: #afb2c1;
}

.dockarea {
    /*background-color: #8e909a;*/
    background-color: #3c3f46;
}
.dockHeader {
    background-color: #4b5058;
}

.dragtab-first {
    background-color: #9497a6;
    border-color: transparent;
}
.dragtab-first:hover {
    background-color: #afb2c1;
}
.dragtab-first:active {
    background-color: #ced1e0;
}

.dragtab {
    background-color: #9497a6;
    border-color: transparent;
}
.dragtab:hover {
    background-color: #afb2c1;
}
.dragtab:active {
    background-color: #ced1e0;
}
.dragtab:focus {
    background-color: #ced1e0;
}

/* Colors everything: Hierarchy, Inspectors, Console, ... */
.ScrollViewAlt,
.TabWindowBackground,
.ProjectBrowserIconAreaBg {
    background-color: #6c717f;
}

/* Both colors most of the text in Windows, Inspectors, etc */
.BoldLabel {
    color: #ffffff;
}
.ControlLabel {
    color: #ffffff;
}

/* Used for clickable external links */
.LinkLabel {
    color: #96d7ff;
}

.ProjectBrowserTopBarBg {
    background-color: #4b5058;
    color: #ff0;
}
/* Asset file names */
.ProjectBrowserGridLabel {
    color: #ffffff;
}

/* Used for the "Auto Generate Lighting On" etc text */
#ProgressBarText {
    color: #ffffff;
}

/* Used by the wide border in the Hierarchy and its hover effect */
.WhiteBackground {
    background-color: #b8c1d9; /* 5a5e6b gives a nice color, but makes text hard to read */
}

/* Used by the Build Settings window and likely other windows */
.hostview {
    background-color: #6c717f;
}



/*************************************/
/*  Project Settings Window Styling  */
/*************************************/

#SettingsHeader {
    color: #ffffff;
}

#SettingsListItem {
    color: #ffffff;
}

License: Do whatever you want with it

[Marc-Saubion]

@Mauri

there are still spaces in the Editor left untouched, thanks to the reasons Marc and I said before.

Oh, so this space in the names is also affecting the USS? That’s kind of good news for us. it’s more likely to get fixed.

[Mauri]

@Marc-Saubion

Oh, so this space in the names is also affecting the USS? That’s kind of good news for us. it’s more likely to get fixed.

In CSS (USS is based on it), class names can’t contain a space: .your-element or .your_element will work, while .your element won’t.

For instance: I’ve tried changing the Status bar console error text color at the very bottom, because with the above style it will be hard to read:

Internally, it has the name CN StatusError, so I can’t target it like this:

.CN StatusError {
     color: #ffffff;
}

The Status bar background color is coupled with the AppToolbar class (the top area where the Play and Pause button resides, along with the other buttons).

[Marc-Saubion]

This is great informations. I hope whoever gets my bug reports follow my link to that conversation. you should also make you own bug report. We might get more traction this way.

What surprises me is that they made that mistake. Every developer I’ve worked with avoid spaces in names, yet this went through. They must have a way to call these names.

[Mauri]

@Marc-Saubion

You should also make you own bug report.

I just submitted one

@Marc-Saubion

What surprises me is that they made that mistake. Every developer I’ve worked with avoid spaces in names, yet this went through. They must have a way to call these names.

I honestly don’t know why. Of course there could also be a high chance that we’re on the totally wrong path and it has legitimate reasons why some things are named like how they’re named. Thus, I hope that Jonathan - or any other Unity dev - could shed some light on it in the future.

[Antypodish]

Personally I liked your first initial version.

However, not so much the second one. Too much blue.

Custom Editor Theme(s)

Btw. I am not using them