Changing Primary Color Theme in wiki.js V2
Currently, custom theming in wiki.js V2 is just not there yet so here is how to do it anyways.

Wikijs offers Code Injection in the administration panel.
First I tried putting in CSS override but quickly found that most of the styles in wiki.js are applied at the tag style=""
level or on classes using the !important
flag which makes overriding it very difficult.
So I ended up using the Body HTML Injection to get these CSS styles to be applied at the very end using !important
with some very specific selectors to override the original style.
All you have to do is set the first line’s override color value and it should trickle through to the rest of the overrides.
<style>
:root { --override: #FC5A5E; }
/* ^^^^^^ Update this hex code with your color */
.v-application .primary { background-color: var(--override) !important; border-color: var(--override) !important; }
.v-main .contents h1 { color: var(--override) !important; }
.v-main .contents h1:after { background: linear-gradient(90deg,var(--override),rgba(255,255,255,0)) !important; }
.comments-header { background-color: var(--override) !important; }
<style>
:root { --override: #7ED321; }
.v-application .primary { background-color: var(--override) !important; border-color: var(--override) !important; }
.v-main .contents h1 { color: var(--override) !important; }
.v-main .contents h1:after { background: linear-gradient(90deg,var(--override),rgba(255,255,255,0)) !important; }
.comments-header { background-color: var(--override) !important; }
.__bar-is-vertical { background: rgba(255,255,255,.75) !important; }
.v-list-item__title { color:black !important; }
.v-application .deep-purple { background-color: var(--override) !important; }
.v-application .blue,{background-color: rgba(0,0,0,.1) !important;}
.v-application .blue.darken-2, .v-application .blue.darken-3 {background-color: rgba(0,0,0,.2) !important;}
</style>

Changing the favicons
Now changing the favicons is also difficult. Essentially we need to just overwrite the existing favicons.
If you are running wikijs with docker, bind mount the entire /wiki/assets/favicons
folder
docker run -v /home/ubuntu/wikijs/favicon:/wiki/assets/favicons wikijs requarks/wiki:2
Or if you are running docker-compose : (sample)
volumes:
- /home/ubuntu/wikijs/favicon:/wiki/assets/favicons
/wiki/assets/favicons -rw-r--r-- 1 node node 9553 android-chrome-192x192.png -rw-r--r-- 1 node node 14719 android-chrome-256x256.png -rw-r--r-- 1 node node 7642 apple-touch-icon.png -rw-r--r-- 1 node node 246 browserconfig.xml -rw-r--r-- 1 node node 1055 favicon-16x16.png -rw-r--r-- 1 node node 1817 favicon-32x32.png -rw-r--r-- 1 node node 6096 mstile-150x150.png -rw-r--r-- 1 node node 4639 safari-pinned-tab.svg
Alternatively, most browsers use the primary favicon, so if you don’t feel like creating all of these images you can just edit the favicon-32×32.png image. Be warned, that the other icons are used by mobile devices and you might have a fallthrough of the old logo appearing.
https://<yourdomain>/_assets/favicons/favicon-32x32.png
There are lots of different formats, and I do recommend using a tool to generate all of the different sizes. It’s ok if you have more/fewer images than the list above, but ideally, you should have these images.
https://realfavicongenerator.net/
Thank you, exactly what I was looking for – I couldn’t believe that this was such a hassle.