Change the theme¶
You might also be wondering: How do I change the colors so I can make my instance adopt my institution's theme?
The theme comprises the header, footer and main color(s). We are going to modify them. It's a good example of the workflow for when
assets/ files change.
assets/less/site/globals/site.overrides file and edit it as below:
@brandColor: /* your brand color here */ ; @navbar_background_image: unset; @navbar_background_color: @brandColor; @footerLightColor: @brandColor; @footerDarkColor: /* a shade of your brandColor */;
Less configuration in the future
We plan on requiring even less variable overrides in the future to change the theme.
@navbar_background_color could be preset to the brand color and so on for example.
Then, run the
invenio-cli assets build -d command as above and refresh the page! You should be able to see your theme color(s)!
You can override any styling variables in your
site.overrides file. The available styling variables are found in the
.variables files of the various invenio modules installed. The ones above are originally defined here. The
invenio-theme module defines a large number of them here.
However, you may notice further changes to the
site.overrides file are not picked up unless
invenio-cli assets build is run again each time even though we symlinked these files! That's because
invenio-cli assets build does that. There is a way to get the same workflow as
static/ files, without having to re-run that command over and over: run
invenio-cli assets watch. It watches for changes to assets and rebuilds them automatically.
The workflow for
assets/ files is then:
invenio-cli assets watchin a terminal (you will need a different terminal for the other commands).
- If you add a new file, run
invenio-cli assets build -d.
- If you modify
- If you modify a previously symlinked file, you now don't need to do anything.