{"id":5498,"date":"2022-03-02T10:19:49","date_gmt":"2022-03-02T08:19:49","guid":{"rendered":"https:\/\/unitycoder.com\/blog\/?p=5498"},"modified":"2022-03-06T21:49:24","modified_gmt":"2022-03-06T19:49:24","slug":"customize-unityhub-colors","status":"publish","type":"post","link":"https:\/\/unitycoder.com\/blog\/2022\/03\/02\/customize-unityhub-colors\/","title":{"rendered":"Customize UnityHub colors"},"content":{"rendered":"\n<p>It seems to be common request to have light color theme as an option for the new unity 3.0 hub.. so, while unity is working on that(?), you can edit and customize the hub yourself!<\/p>\n\n\n\n<p><strong>Steps <\/strong>(New 06.03.2022, see comments for info that can edit index.html directly)<br>&#8211; Install 7zip : <a rel=\"noreferrer noopener\" href=\"https:\/\/www.7-zip.org\/download.html\" target=\"_blank\">https:\/\/www.7-zip.org\/download.html<\/a><br>&#8211; Install asar plugin for 7zip : <a rel=\"noreferrer noopener\" href=\"https:\/\/www.tc4shell.com\/en\/7zip\/asar\/\" target=\"_blank\">https:\/\/www.tc4shell.com\/en\/7zip\/asar\/<\/a><br>&#8211; Install Notepad++ : <a rel=\"noreferrer noopener\" href=\"https:\/\/notepad-plus-plus.org\/downloads\/\" target=\"_blank\">https:\/\/notepad-plus-plus.org\/downloads\/<\/a><br>&#8211; Install JSTools for Notepad++ (to beautify js sources) : <a rel=\"noreferrer noopener\" href=\"https:\/\/www.sunjw.us\/jstool\/npp\/\" target=\"_blank\">https:\/\/www.sunjw.us\/jstool\/npp\/<\/a><br>&#8211; Open &#8220;app.asar&#8221; with 7zip from the hub folder, like &#8220;C:\\Program Files\\Unity Hub\\resources&#8221;<br>&#8211; Unzip the asar somewhere<br>&#8211; Edit Builds\/Renderer\/index.html with notepad<br>&#8211; Paste new style tag inside &lt;body>&lt;\/body>, after line &#8220;&lt;script src=&#8221;index.js&#8221;>&lt;\/script> and just before &lt;\/body><br>&#8211; Take ready css style from andrews patcher: <a rel=\"noreferrer noopener\" href=\"https:\/\/gitlab.com\/GuitarBro\/hub-patcher\/-\/blob\/master\/hub_patcher.py\" target=\"_blank\">https:\/\/gitlab.com\/GuitarBro\/hub-patcher\/-\/blob\/master\/hub_patcher.py<\/a> (*the style contents only, not full css string value with quotes, also here for easy copy: <a rel=\"noreferrer noopener\" href=\"https:\/\/gist.github.com\/unitycoder\/13b5323728961dd812c648cb2cf21368\" target=\"_blank\">https:\/\/gist.github.com\/unitycoder\/13b5323728961dd812c648cb2cf21368<\/a> )<br>&#8211; Save index.html (this is your unpacked asar folder)<br>&#8211; Copy app.asar to other drive (as you cannot overwrite it inside program files from 7zip, unless its running as an admin)<br>&#8211; While 7zip has your copied asar package open, drag &amp; drop the modified index.html into same folder inside the asar (build\/renderer\/index.html) to overwrite it<br>&#8211; Notice the app.asar date modified has changed (7zip has updated the package)<br>&#8211; Close hub completely<br>&#8211; Now copy app.asar over the original app.asar at hub installation directory *NOTE: take backup from original app.asar first!<br>&#8211; Run unity hub and enjoy your new colors!<br><\/p>\n\n\n\n<p><br><strong>Steps<\/strong> (Old steps, complicated way)<br>&#8211; Install 7zip : <a rel=\"noreferrer noopener\" href=\"https:\/\/www.7-zip.org\/download.html\" target=\"_blank\">https:\/\/www.7-zip.org\/download.html<\/a><br>&#8211; Install asar plugin for 7zip : <a rel=\"noreferrer noopener\" href=\"https:\/\/www.tc4shell.com\/en\/7zip\/asar\/\" target=\"_blank\">https:\/\/www.tc4shell.com\/en\/7zip\/asar\/<\/a><br>&#8211; Install Notepad++ : <a rel=\"noreferrer noopener\" href=\"https:\/\/notepad-plus-plus.org\/downloads\/\" target=\"_blank\">https:\/\/notepad-plus-plus.org\/downloads\/<\/a><br>&#8211; Install JSTools for Notepad++ (to beautify js sources) : <a rel=\"noreferrer noopener\" href=\"https:\/\/www.sunjw.us\/jstool\/npp\/\" target=\"_blank\">https:\/\/www.sunjw.us\/jstool\/npp\/<\/a><br>&#8211; Open &#8220;app.asar&#8221; with 7zip from the hub folder, like &#8220;C:\\Program Files\\Unity Hub\\resources&#8221;<br>&#8211; Unzip the asar somewhere<br>&#8211; Edit Builds\/Renderer\/index.js with notepad, and use Plugins\/JSTool\/JSFormat to beautify source *(search for #1a1a1a to modify the main color and look for those CSS strings &amp; colors inside the code, look for the html, body in that string.<br>&#8211; Save index.js (this is your unpacked asar folder)<br>&#8211; Copy app.asar to other drive (you cannot overwrite it inside program files from 7zip, unless its running as an admin)<br>&#8211; While 7zip has your copied asar package open, drag &amp; drop the modified index.js into same folder inside the asar (build\/renderer\/index.js) to overwrite it<br>&#8211; Notice the app.asar date modified has changed (7zip has updated the package)<br>&#8211; Close hub completely<br>&#8211; Now copy app.asar over the original app.asar at hub installation directory *NOTE: take backup from original app.asar first!<br>&#8211; Run unity hub and enjoy your new colors!<br><\/p>\n\n\n\n<p><strong>Ideas:<\/strong><br>&#8211; modify the source so that it loads external CSS theme! Then you can easily edit those CSS styles outside hub and without unpacking asar..<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2022\/03\/image-3.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"556\" data-attachment-id=\"5508\" data-permalink=\"https:\/\/unitycoder.com\/blog\/2022\/03\/02\/customize-unityhub-colors\/image-3-7\/\" data-orig-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2022\/03\/image-3.png?fit=680%2C556&amp;ssl=1\" data-orig-size=\"680,556\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-3\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2022\/03\/image-3.png?fit=680%2C556&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2022\/03\/image-3.png?resize=680%2C556&#038;ssl=1\" alt=\"\" class=\"wp-image-5508\" srcset=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2022\/03\/image-3.png?w=680&amp;ssl=1 680w, https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2022\/03\/image-3.png?resize=300%2C245&amp;ssl=1 300w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/a><figcaption>New full style using Andrews patcher CSS<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2022\/03\/image-4.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"409\" data-attachment-id=\"5509\" data-permalink=\"https:\/\/unitycoder.com\/blog\/2022\/03\/02\/customize-unityhub-colors\/image-4-7\/\" data-orig-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2022\/03\/image-4.png?fit=680%2C409&amp;ssl=1\" data-orig-size=\"680,409\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-4\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2022\/03\/image-4.png?fit=680%2C409&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2022\/03\/image-4.png?resize=680%2C409&#038;ssl=1\" alt=\"\" class=\"wp-image-5509\" srcset=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2022\/03\/image-4.png?w=680&amp;ssl=1 680w, https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2022\/03\/image-4.png?resize=300%2C180&amp;ssl=1 300w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/a><figcaption>Insert custom CSS after script tag<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2022\/03\/image-2.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"746\" height=\"194\" data-attachment-id=\"5501\" data-permalink=\"https:\/\/unitycoder.com\/blog\/2022\/03\/02\/customize-unityhub-colors\/image-2-10\/\" data-orig-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2022\/03\/image-2.png?fit=746%2C194&amp;ssl=1\" data-orig-size=\"746,194\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-2\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2022\/03\/image-2.png?fit=746%2C194&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2022\/03\/image-2.png?resize=746%2C194&#038;ssl=1\" alt=\"\" class=\"wp-image-5501\" srcset=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2022\/03\/image-2.png?w=746&amp;ssl=1 746w, https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2022\/03\/image-2.png?resize=300%2C78&amp;ssl=1 300w\" sizes=\"auto, (max-width: 746px) 100vw, 746px\" \/><\/a><figcaption>OLD Image: search for css colors and tags, like html, body and modify those styles<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2022\/03\/image-1.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"557\" data-attachment-id=\"5500\" data-permalink=\"https:\/\/unitycoder.com\/blog\/2022\/03\/02\/customize-unityhub-colors\/image-1-14\/\" data-orig-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2022\/03\/image-1.png?fit=680%2C557&amp;ssl=1\" data-orig-size=\"680,557\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2022\/03\/image-1.png?fit=680%2C557&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2022\/03\/image-1.png?resize=680%2C557&#038;ssl=1\" alt=\"\" class=\"wp-image-5500\" srcset=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2022\/03\/image-1.png?w=680&amp;ssl=1 680w, https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2022\/03\/image-1.png?resize=300%2C246&amp;ssl=1 300w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/a><figcaption>OLD IMAGE: Quick test: replaced 2 main colors, would need to fix font color next..<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>It seems to be common request to have light color theme as an option for the new unity 3.0 hub.. so, while unity is working on that(?), you can edit and customize the hub yourself! Steps (New 06.03.2022, see comments for info that can edit [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5500,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[568,1236,1237,171],"class_list":["post-5498","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-custom","tag-hub","tag-theme","tag-unity"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2022\/03\/image-1.png?fit=680%2C557&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p1KTaT-1qG","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts\/5498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/comments?post=5498"}],"version-history":[{"count":6,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts\/5498\/revisions"}],"predecessor-version":[{"id":5510,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts\/5498\/revisions\/5510"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/media\/5500"}],"wp:attachment":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/media?parent=5498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/categories?post=5498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/tags?post=5498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}