Unity UI Clean Light Editor Theme

I modified unity editor's light theme since I don't like how grayish it looks and modified it to make it more cleaner and whiter.



If you want to try it out under the Assets folder create a folder 'Editor/Stylesheets/Extensions' then under the Extensions folder create new USS files named 'common.uss', 'dark.uss', and 'light.uss'. Now open the 'light.uss' file and paste the code:

Code (USS):

1. /*White*/
2. .AppToolbar, .ScrollViewAlt, .Toolbar, .dockArea, .ProjectBrowserBottomBarBg, .ProjectBrowserTopBarBg, .ProjectBrowserIconAreaBg, .TabWindowBackground, .PreToolbar, .IN-Footer, .IN-BigTitle, .SceneTopBarBg, .PreBackground, .RL-Header, .RL-Background, .RL-Footer, .hostview, .ScriptText {
3.     background-image: none;
4.     background-color: rgb(248, 250, 250);
5.     border-top-color: rgb(226, 228, 228);
6.     border-bottom-color: rgb(226, 228, 228);
7.     border-left-color: rgb(226, 228, 228);
8.     border-right-color: rgb(226, 228, 228);
9. }
10.  
11. /*Gray*/
12. .dockHeader, .FoldoutHeader {
13.     background-color: rgb(234, 236, 236);
14.     border-top-color: rgb(226, 228, 228);
15.     border-bottom-color: rgb(226, 228, 228);
16.     border-left-color: rgb(226, 228, 228);
17.     border-right-color: rgb(226, 228, 228);
18. }
19.  
20. /*WhiteBackground*/
21. .WhiteBackground, .TV-Selection {
22.     background-image: none;
23.     background-color: rgba(15, 15, 15, 0.1);
24. }
25.  
26. /*Interactables*/
27. .AppCommand,
28. .AppCommandLeft,
29. .AppCommandMid,
30. .AppCommandRight,
31. .AppToolbarButtonLeft,
32. .AppToolbarButtonMid,
33. .AppToolbarButtonRight,
34. .DropDown,
35. .DropDownButton,
36. .toolbarbutton,
37. .toolbarbuttonLeft,
38. .toolbarbuttonMid,
39. .toolbarbuttonRight,
40. .ToolbarDropDownToggle,
41. .ToolbarDropDownToggleLeft,
42. .ToolbarDropDownToggleMid,
43. .ToolbarDropDownToggleRight,
44. .ToolbarDropDown,
45. .ToolbarDropDownLeft,
46. .ToolbarDropDownMid,
47. .ToolbarDropDownRight,
48. .ToolbarPopup,
49. .ToolbarPopupLeft,
50. .ToolbarPopupMid,
51. .ToolbarPopupRight,
52. .TextField,
53. .MiniPopup,
54. .MiniPullDown,
55. .BoldTextField,
56. .toggle,
57. .Button,
58. .LargeButton,
59. .LargeButtonLeft,
60. .LargeButtonMid,
61. .LargeButtonRight,
62. .minibutton,
63. .minibuttonleft,
64. .minibuttonmid,
65. .minibuttonright,
66. .ButtonLeft,
67. .ButtonMid,
68. .ButtonRight,
69. .ObjectField,
70. .ObjectFieldButton,
71. .ColorField,
72. .AC-Button,
73. .IN-Title,
74. .ToolbarCreateAddNewDropDown,
75. .StatusBarIcon,
76. {
77.     background-color: rgb(248, 250, 250);
78.     border-top-color: rgb(196, 198, 198);
79.     border-bottom-color: rgb(196, 198, 198);
80.     border-left-color: rgb(196, 198, 198);
81.     border-right-color: rgb(196, 198, 198);
82.     color: black;
83. }
84.  
85. .AppCommand:hover, .AppCommand:checked,
86. .AppCommandLeft:hover, .AppCommandLeft:checked,
87. .AppCommandMid:hover, .AppCommandMid:checked,
88. .AppCommandRight:hover, .AppCommandRight:checked,
89. .AppToolbarButtonLeft:hover, .AppToolbarButtonLeft:checked,
90. .AppToolbarButtonMid:hover, .AppToolbarButtonMid:checked,
91. .AppToolbarButtonRight:hover, .AppToolbarButtonRight:checked,
92. .toolbarbutton:hover, .toolbarbutton:checked,
93. .toolbarbuttonLeft:hover, .toolbarbuttonLeft:checked,
94. .toolbarbuttonMid:hover, .toolbarbuttonMid:checked,
95. .toolbarbuttonRight:hover, .toolbarbuttonRight:checked,
96. .ToolbarDropDownToggle:hover, .ToolbarDropDownToggle:checked,
97. .ToolbarDropDownToggleLeft:hover, .ToolbarDropDownToggleLeft:checked,
98. .ToolbarDropDownToggleMid:hover, .ToolbarDropDownToggleMid:checked,
99. .ToolbarDropDownToggleRight:hover, .ToolbarDropDownToggleRight:checked,
100. .ToolbarDropDown:hover, .ToolbarDropDown:checked,
101. .ToolbarDropDownLeft:hover, .ToolbarDropDownLeft:checked,
102. .ToolbarDropDownMid:hover, .ToolbarDropDownMid:checked,
103. .ToolbarDropDownRight:hover, .ToolbarDropDownRight:checked,
104. .ToolbarPopup:hover, .ToolbarPopup:checked,
105. .ToolbarPopupLeft:hover, .ToolbarPopupLeft:checked,
106. .ToolbarPopupMid:hover, .ToolbarPopupMid:checked,
107. .ToolbarPopupRight:hover, .ToolbarPopupRight:checked,
108. .Button:hover, .Button:checked,
109. .LargeButton:hover, .LargeButton:checked,
110. .LargeButtonLeft:hover, .LargeButtonLeft:checked,
111. .LargeButtonMid:hover, .LargeButtonMid:checked,
112. .LargeButtonRight:hover, .LargeButtonRight:checked,
113. .toggle:hover, .toggle:checked,
114. .minibutton:hover, .minibutton:checked,
115. .minibuttonleft:hover, .minibuttonleft:checked,
116. .minibuttonmid:hover, .minibuttonmid:checked,
117. .minibuttonright:hover, .minibuttonright:checked,
118. .ButtonLeft:hover, .ButtonLeft:checked,
119. .ButtonMid:hover, .ButtonMid:checked,
120. .ButtonRight:hover, .ButtonRight:checked,
121. .ObjectFieldButton:hover, .ObjectFieldButton:checked,
122. .ColorField:hover, .ColorField:checked,
123. .AC-Button:hover, .AC-Button:checked,
124. .IN-Title:hover, .IN-Title:checked,
125. .ToolbarCreateAddNewDropDown:hover, .ToolbarCreateAddNewDropDown:checked,
126. .StatusBarIcon:hover, .StatusBarIcon:checked,
127. {
128.     background-color: rgb(228, 230, 230);
129.     border-top-color: rgb(196, 198, 198);
130.     border-bottom-color: rgb(196, 198, 198);
131.     border-left-color: rgb(196, 198, 198);
132.     border-right-color: rgb(196, 198, 198);
133.     background-image: none;
134.     color: black;
135. }
136.  
137. .AppCommand:active,
138. .AppCommandLeft:active,
139. .AppCommandMid:active,
140. .AppCommandRight:active,
141. .AppToolbarButtonLeft:active,
142. .AppToolbarButtonMid:active,
143. .AppToolbarButtonRight:active,
144. .toolbarbutton:active,
145. .toolbarbuttonLeft:active,
146. .toolbarbuttonMid:active,
147. .toolbarbuttonRight:active,
148. .ToolbarDropDownToggle:active,
149. .ToolbarDropDownToggleLeft:active,
150. .ToolbarDropDownToggleMid:active,
151. .ToolbarDropDownToggleRight:active,
152. .ToolbarDropDown:active,
153. .ToolbarDropDownLeft:active,
154. .ToolbarDropDownMid:active,
155. .ToolbarDropDownRight:active,
156. .ToolbarPopup:active,
157. .ToolbarPopupLeft:active,
158. .ToolbarPopupMid:active,
159. .ToolbarPopupRight:active,
160. .Button:active,
161. .LargeButton:active,
162. .LargeButtonLeft:active,
163. .LargeButtonMid:active,
164. .LargeButtonRight:active,
165. .toggle:active,
166. .minibutton:active,
167. .minibuttonleft:active,
168. .minibuttonmid:active,
169. .minibuttonright:active,
170. .ButtonLeft:active,
171. .ButtonMid:active,
172. .ButtonRight:active,
173. .ObjectFieldButton:active,
174. .ColorField:active,
175. .AC-Button:active,
176. .IN-Title:active,
177. .ToolbarCreateAddNewDropDown:active,
178. .StatusBarIcon:active,
179. {
180.     background-color: rgb(248, 250, 250);
181.     border-top-color: rgb(196, 198, 198);
182.     border-bottom-color: rgb(196, 198, 198);
183.     border-left-color: rgb(196, 198, 198);
184.     border-right-color: rgb(196, 198, 198);
185.     background-image: none;
186.     color: black;
187. }
188.  
189. /*Field*/
190. .TextField:hover, .TextField:active, .TextField:checked,
191. .MiniPopup:hover, .MiniPopup:active, .MiniPopup:checked,
192. .BoldTextField:hover, .BoldTextField:active, .BoldTextField:checked
193. .MiniPullDown:hover, .MiniPullDown:active, .MiniPullDown:checked
194. .DropDownButton:hover, .DropDownButton:active, .DropDownButton:checked
195. .DropDown:hover, .DropDown:active, .DropDown:checked
196. {
197.     background-color: rgb(248, 250, 250);
198.     border-top-color: #0F6ECC;
199.     border-bottom-color: #0F6ECC;
200.     border-left-color: #0F6ECC;
201.     border-right-color: #0F6ECC;
202. }
203.  
204. /*Tab*/
205. .dragtab-first, .dragtab {
206.     background-image: none;
207.     background-color: rgb(234, 236, 236);
208.     border-top-width: 1px;
209.     border-bottom-width: 1px;
210.     border-left-width: 1px;
211.     border-right-width: 1px;
212.     border-top-color: rgb(226, 228, 228);
213.     border-bottom-color: rgb(226, 228, 228);
214.     border-left-color: rgb(226, 228, 228);
215.     border-right-color: rgb(226, 228, 228);
216.     border-radius: 5px 5px 0px 0px;
217. }
218.  
219. .dragtab-first:hover, .dragtab-first:active, .dragtab-first:enabled, .dragtab-first:focus, .dragtab-first:checked,
220. .dragtab:hover, .dragtab:active, .dragtab:enabled, .dragtab:focus, .dragtab:checked {
221.     background-color: rgb(248, 250, 250);
222. }

Once done if you haven't switched to the light editor theme do so and restart unity.

If you see any old-styled that isn't modified let me know and I'll try to fix it as soon as possible.

 

Thank you.. I was worried my eye strain wouldn't get worse.