Custom Editor Theme ?

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)

 

You can do this via custom USS styles - see this post:
https://forum.unity.com/threads/uni...ui-look-like-garbage-now.709037/#post-4747730

This thread may also be interesting: https://forum.unity.com/threads/editor-skinning-thread.711059/

 

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

Code (CSharp):

1.  
2.  
3. .AppToolbar
4. {
5.     background-color: #000000;
6. }
7.  
8. .AppCommandLeft
9. {
10.     background-color: #0e3159;
11. }
12.  
13. .AppCommandMid
14. {
15.     background-color: #0e3159;
16. }
17.  
18. .AppCommandRight
19. {
20.     background-color: #0e3159;
21. }
22.  
23. .AppToolbarButtonLeft
24. {
25.     background-color: #0e3159;
26. }
27.  
28. .AppToolbarButtonRight
29. {
30.     background-color: #0e3159;
31. }
32.  
33. .DropDown
34. {
35.     background-color: #0e3159;
36. }
37.  
38.  
39. .dockHeader
40. {
41.     background-color: #000000;
42. }
43.  
44. .dockarea
45. {
46.     background-color: #000000;
47. }
48.  
49. .PaneOptions
50. {
51.     background-color: #000000;
52. }
53.  
54. .TabWindowBackground
55. {
56.     background-color: #000000;
57. }
58.  
59. .Toolbar
60. {
61.     background-color: #0e3159;
62. }
63.  
64. .SceneTopBarBg
65. {
66.     background-color: #000000;
67. }
68.  
69. .ScrollViewAlt
70. {
71.     background-color: #000000;
72. }
73.  
74.  
75. .SceneTopBarBg
76. {
77.     background-color: #0e3159;
78. }
79.  
80. .FoldoutHeader
81. {
82.     background-color: #000000;
83. }
84.  
85.  

 

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.

 

@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.

 

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

 

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.

 

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

 

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

 

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.

 

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.

 

@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.

Spoiler: common.uss

Code (CSharp):

1. /**************************************************/
2. /*                                                */
3. /*    blueish grayish color theme for Unity Editor  */
4. /*                                                */
5. /*                    by Mauri                    */
6. /*                                                */
7. /**************************************************/
8.  
9.  
10.  
11. /*****************************************/
12. /*    Editor Top Toolbar & Button Styling  */
13. /*****************************************/
14.  
15. /* Used for the top bar (Play, Pause and other buttons) and bottom bar */
16. .AppToolbar {
17.     background-color: #5a5e6b;
18. }
19.  
20. /* Tool Handle Position ... */
21. .AppToolbarButtonLeft {
22.     background-color: #9497a6;
23.     border-color: #4b4e58;
24. }
25. .AppToolbarButtonLeft:hover {
26.     background-color: #afb2c1;
27. }
28. .AppToolbarButtonLeft:active {
29.     background-color: #ced1e0;
30.     color: #000000;
31. }
32.  
33. /* ... and Rotation */
34. .AppToolbarButtonRight {
35.     background-color: #9497a6;
36.     border-color: #4b4e58;
37. }
38. .AppToolbarButtonRight:hover {
39.     background-color: #afb2c1;
40. }
41. .AppToolbarButtonRight:active {
42.     background-color: #ced1e0;
43.     color: #000000;
44. }
45.  
46. /* Grid Snapping and Cloud button */
47. .AppCommand {
48.     background-color: #9497a6;
49.     border-color: #4b4e58;
50. }
51. .AppCommand:hover {
52.     background-color: #afb2c1;
53. }
54.  
55. /* Hand Tool and Play button */
56. .AppCommandLeft {
57.     background-color: #9497a6;
58.     border-color: #4b4e58;
59. }
60. .AppCommandLeft:hover {
61.     background-color: #afb2c1;
62. }
63. .AppCommandLeft:active {
64.     background-color: #ced1e0;
65. }
66. /* While in Play mode, the Play button has a different color assigned - here's a fancy red one */
67. .AppCommandLeftOn {
68.     background-color: #db4848;
69.     border-color: #4b4e58;
70. }
71. .AppCommandLeftOn:hover {
72.     background-color: #ff6363;
73. }
74. .AppCommandLeftOn:active {
75.     background-color: #ff8282;
76. }
77.  
78. /* Move Tool, Rotate Tool, ... and Pause button */
79. .AppCommandMid {
80.     background-color: #9497a6;
81.     border-color: #4b4e58;
82. }
83. .AppCommandMid:hover {
84.     background-color: #afb2c1;
85. }
86. .AppCommandMid:active {
87.     background-color: #ced1e0;
88. }
89.  
90. /* Available Custom Editor Tools and Step button (the one next to the Pause button) */
91. .AppCommandRight {
92.     background-color: #9497a6;
93.     border-color: #4b4e58;
94. }
95. .AppCommandRight:hover {
96.     background-color: #afb2c1;
97. }
98. .AppCommandRight:active {
99.     background-color: #ced1e0;
100. }
101.  
102.  
103. /********************************************************/
104. /*  Misc Elements Styling (Dropdowns, Buttons, etc...)  */
105. /********************************************************/
106.  
107. /* Top Account, Layers & Layout buttons */
108. .DropDown {
109.     background-color: #9497a6;
110.     border-color: #4b4e58;
111. }
112. .DropDown:hover {
113.     background-color: #afb2c1;
114. }
115.  
116. .Foldout:active {
117.     background-color: #afb2c1;
118.     color: #ffffff;
119. }
120.  
121. /* Used for some dropdown menus - like the ones in the Lighting Settings */
122. .MiniPullDown {
123.     background-color: #575f6f;
124.     border-color: #4b4e58;
125.     color: #ffffff;
126. }
127. .MiniPullDown:hover {
128.     background-color: #afb2c1;
129.     color: #000000;
130. }
131.  
132. /* Used for some other dropdown menus */
133. .MiniPopup {
134.     background-color: #575f6f;
135.     border-color: #4b4e58;
136.     color: #ffffff;
137. }
138. .MiniPopup:hover {
139.     background-color: #afb2c1;
140.     color: #000000;
141. }
142.  
143. /* Seems to be only used for the Collab dropdown */
144. .OffsetDropDown {
145.     background-color: #9497a6;
146.     border-color: #4b4e58;
147. }
148. .OffsetDropDown:hover {
149.     background-color: #afb2c1;
150. }
151.  
152. .dockarea {
153.     /*background-color: #8e909a;*/
154.     background-color: #3c3f46;
155. }
156. .dockHeader {
157.     background-color: #4b5058;
158. }
159.  
160. .dragtab-first {
161.     background-color: #9497a6;
162.     border-color: transparent;
163. }
164. .dragtab-first:hover {
165.     background-color: #afb2c1;
166. }
167. .dragtab-first:active {
168.     background-color: #ced1e0;
169. }
170.  
171. .dragtab {
172.     background-color: #9497a6;
173.     border-color: transparent;
174. }
175. .dragtab:hover {
176.     background-color: #afb2c1;
177. }
178. .dragtab:active {
179.     background-color: #ced1e0;
180. }
181. .dragtab:focus {
182.     background-color: #ced1e0;
183. }
184.  
185. /* Colors everything: Hierarchy, Inspectors, Console, ... */
186. .ScrollViewAlt,
187. .TabWindowBackground,
188. .ProjectBrowserIconAreaBg {
189.     background-color: #6c717f;
190. }
191.  
192. /* Both colors most of the text in Windows, Inspectors, etc */
193. .BoldLabel {
194.     color: #ffffff;
195. }
196. .ControlLabel {
197.     color: #ffffff;
198. }
199.  
200. /* Used for clickable external links */
201. .LinkLabel {
202.     color: #96d7ff;
203. }
204.  
205. .ProjectBrowserTopBarBg {
206.     background-color: #4b5058;
207.     color: #ff0;
208. }
209. /* Asset file names */
210. .ProjectBrowserGridLabel {
211.     color: #ffffff;
212. }
213.  
214. /* Used for the "Auto Generate Lighting On" etc text */
215. #ProgressBarText {
216.     color: #ffffff;
217. }
218.  
219. /* Used by the wide border in the Hierarchy and its hover effect */
220. .WhiteBackground {
221.     background-color: #b8c1d9; /* 5a5e6b gives a nice color, but makes text hard to read */
222. }
223.  
224. /* Used by the Build Settings window and likely other windows */
225. .hostview {
226.     background-color: #6c717f;
227. }
228.  
229.  
230.  
231. /*************************************/
232. /*  Project Settings Window Styling  */
233. /*************************************/
234.  
235. #SettingsHeader {
236.     color: #ffffff;
237. }
238.  
239. #SettingsListItem {
240.     color: #ffffff;
241. }

License: Do whatever you want with it

 

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:

Code (CSharp):

1. .CN StatusError {
2.      color: #ffffff;
3. }

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).

 

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.

 

I just submitted one

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.

 

Personally I liked your first initial version.

Spoiler

However, not so much the second one. Too much blue.
https://forum.unity.com/threads/custom-editor-theme-s.990047/#post-6430823

Spoiler

Btw. I am not using them

 

There are more than the ones included in that list that I found. Not sure if you just decided to omit them so including them just in case.

Code (CSharp):

1. .ToolbarSearchTextFieldPopup
2. {
3.     background-color: #0e3159;
4. }
5.  
6. .IN-BigTitle
7. {
8.     background-color: #0e3159;
9. }
10.  
11. .IN-Title
12. {
13.     background-color: #000000;
14. }
15.  
16.  
17. .PaneOptions
18. {
19.     background-color: #000000;
20. }
21.  
22. .Toolbar
23. {
24.     background-color: #0e3159;
25. }
26.  
27. .SceneTopBarBg
28. {
29.     background-color: #000000;
30. }
31.  
32. .FoldoutHeader
33. {
34.     background-color: #000000;
35. }
36.  
37.  
38. .TabWindowToolbarBackground
39. {
40.     background-color: #000000;
41. }
42.  
43. .IconButton
44. {
45.     background-color: #0e3159;
46.  
47. }
48.  
49. .toolbarbutton
50. {
51.     background-color: #0e3159;
52. }
53.  
54. .ToolbarPopup
55. {
56.     background-color: #0e3159;
57. }
58.  
59. .ToolbarPopupLeft
60. {
61.     background-color: #0e3159;
62. }
63.  
64. .ToolbarSearch
65. {
66.     background-color: #0e3159;
67. }
68.  
69. .Label
70. {
71.     background-color: #0e3159;
72. }
73.  
74. .ProjectBrowserBottomBarBg
75. {
76.     background-color: #0e3159;
77. }
78.  
79. .BoldTextField
80. {
81.     background-color: #000000;
82. }
83.  
84. .ObjectField
85. {
86.     background-color: #000000;
87. }
88.  
89. .TV-Selection
90. {
91.     background-color: #0e3159;
92. }
93.  
94.  

Yeah I toned it down a little yesterday after spending a few hours working on something in the editor.

 

I know, it's not perfect @Aviryx and it misses a lot I'll keep improving it, though.

So, using a dash (-) does work for most names with a space in it...

E.g.

Code (CSharp):

1. .CN-StatusError {
2.     color: #ff0;
3. }

gives me a nice yellow color (which I always use for visualizing).



Okay... now I feel reeeeeaaaallllyyyyy stupid. @Marc-Saubion

Edit: Still doesn't work for Icons, sadly.

 

That's good news for you but not for me and the icons. I tried the - without success.

 

Is just my opinion, buy I still prefer first one

Yep, seems like you can just follow CSS standard.

And yellow is indeed good for important messages.

 

You're right - hence my edit. It won't work on icons :/

 

Hi @Mauri and everyone else.

I have some good news. Unity answered my bug report about icons with a space in their name and they reproduced. The bug have a dedicated issue tracker you can vote on so we have a chance to get it done.

https://issuetracker.unity3d.com/is...erriding-icons-that-are-in-the-project-window

 

That's awesome! I just left a vote

 

I know this is an old thread but I actully made a free plugin!
you can choose Theme presets or create your own themes.
https://assetstore.unity.com/packages/tools/gui/editor-themes-plugin-free-211041

 

Thank you very much for making this extension.
I downloaded your extension but when I tried to create my own theme I got many (30+) errors.