Technology

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


I'm a 33 year old UIUC Computer Engineer building mobile apps, websites and hardware integrations with an interest in 3D printing, biotechnology and Arduinos.

View Comments

This site uses Akismet to reduce spam. Learn how your comment data is processed.