Changing Primary Color Theme in wiki.js V2

Currently, custom theming in wiki.js V2 is not there yet.

It does offer 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 and very specific selectors in hopes of overriding it. 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; }
.__bar-is-vertical { background: rgba(255,255,255,.75) !important; }
</style>

Changing the favicons

To override the favicon on a docker setup, bind mount the entire /wiki/assets/favicons folder

/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