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
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)
UnityHub: Add support for custom project title (instead of folder name) or use ProductName
UnityHub 3.6.0: Remove Version Control & Cloud Dashboard columns
3 Comments + Add Comment
Leave a comment
Recent posts
- 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)
- Check if point is inside polygon 2D (using line intersection)
- UnityHub: Enable Create Project Button (without having to select Cloud Organization)
- UI: Make Tooltip background fit Text content length
- Pong-Wars in Unity
- Install Android SDK+JDK+NDK for Unity (without AndroidStudio or Unity Hub)
- UnityHub: Add support for custom project title (instead of folder name) or use ProductName
Connect
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.