2
2022
Customize UnityHub colors
An article by 
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 index.html directly)
– Install 7zip : https://www.7-zip.org/download.html
– Install asar plugin for 7zip : https://www.tc4shell.com/en/7zip/asar/
– Install Notepad++ : https://notepad-plus-plus.org/downloads/
– Install JSTools for Notepad++ (to beautify js sources) : https://www.sunjw.us/jstool/npp/
– Open “app.asar” with 7zip from the hub folder, like “C:\Program Files\Unity Hub\resources”
– Unzip the asar somewhere
– Edit Builds/Renderer/index.html with notepad
– Paste new style tag inside <body></body>, after line “<script src=”index.js”></script> and just before </body>
– Take ready css style from andrews patcher: https://gitlab.com/GuitarBro/hub-patcher/-/blob/master/hub_patcher.py (*the style contents only, not full css string value with quotes, also here for easy copy: https://gist.github.com/unitycoder/13b5323728961dd812c648cb2cf21368 )
– Save index.html (this is your unpacked asar folder)
– Copy app.asar to other drive (as you cannot overwrite it inside program files from 7zip, unless its running as an admin)
– While 7zip has your copied asar package open, drag & drop the modified index.html into same folder inside the asar (build/renderer/index.html) to overwrite it
– Notice the app.asar date modified has changed (7zip has updated the package)
– Close hub completely
– Now copy app.asar over the original app.asar at hub installation directory *NOTE: take backup from original app.asar first!
– Run unity hub and enjoy your new colors!
Steps (Old steps, complicated way)
– Install 7zip : https://www.7-zip.org/download.html
– Install asar plugin for 7zip : https://www.tc4shell.com/en/7zip/asar/
– Install Notepad++ : https://notepad-plus-plus.org/downloads/
– Install JSTools for Notepad++ (to beautify js sources) : https://www.sunjw.us/jstool/npp/
– Open “app.asar” with 7zip from the hub folder, like “C:\Program Files\Unity Hub\resources”
– Unzip the asar somewhere
– 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 & colors inside the code, look for the html, body in that string.
– Save index.js (this is your unpacked asar folder)
– Copy app.asar to other drive (you cannot overwrite it inside program files from 7zip, unless its running as an admin)
– While 7zip has your copied asar package open, drag & drop the modified index.js into same folder inside the asar (build/renderer/index.js) to overwrite it
– Notice the app.asar date modified has changed (7zip has updated the package)
– Close hub completely
– Now copy app.asar over the original app.asar at hub installation directory *NOTE: take backup from original app.asar first!
– Run unity hub and enjoy your new colors!
Ideas:
– modify the source so that it loads external CSS theme! Then you can easily edit those CSS styles outside hub and without unpacking asar..
Related Posts
UnityHub: Make Hub application background Translucent
UnityHub: Enable built-in Login Dialog (no more browser login/logout issues!)
Custom Unity Hub Project Template Preview Image/Video (using HTML+CSS in package description)
UnityHub: Enable Create Project Button (without having to select Cloud Organization)
3 Comments + Add Comment
Leave a comment
Recent posts
- [GreaseMonkey] Unity Forum Fixer
- UnityHub: Make Hub application background Translucent
- Customize SpriteShapeRenderer quality (but has issues)
- Editor tool: Copy selected gameobject’s names into clipboard as rows (for Excel)
- Editor tool: Replace string in selected gameobject’s names
- UnityHub: Enable built-in Login Dialog (no more browser login/logout issues!)
- Use TikTok-TTS in Unity (with WebRequest)
- Create Scene Thumbnail Image using OnSceneSaved & OnPreviewGUI
- webgl+javascript TTS
- Using Moonsharp (LUA) + Unity Webgl
- Using 3D gameobject prefabs with Unity Tilemap + NavMesh Surface
- Custom Unity Hub Project Template Preview Image/Video (using HTML+CSS in package description)
Connect
Recent Comments
- on Vector3 maths for dummies!
- on UnityHub: Make Hub application background Translucent
- on UnityHub: Make Hub application background Translucent
- on Install Android SDK+JDK+NDK for Unity (without AndroidStudio or Unity Hub)
- on Install Android SDK+JDK+NDK for Unity (without AndroidStudio or Unity Hub)
- on [Asset Store] Point Cloud Viewer & Tools
- on [Asset Store] Point Cloud Viewer & Tools
- on ffmpeg stream raw video into Unity Texture2D
Stumbled across this and figured it was worth leaving a comment to mention, I created Hub Patcher to give unity 2.x.x a dark theme, but I have now updated it to add a light theme for 3.x.x (if anyone is looking for a theme that’s pre-made):
https://gitlab.com/GuitarBro/hub-patcher
oh nice! so its possible to just edit the index.html? (instead or replacing values inside renderer.js, that makes it much easier/useful then!)
Yup! As long as you add your custom CSS after the style tags that their javascript generates in index.html, it can take priority without having to resort to a bunch of !important rules.