Theme

This guide explains how theming works in a InvenioRDM-based NRP repository.
NRP repositories rely on a layered theming architecture built on top of Semantic UI, Invenio Themes, and the oarepo-theme package.
Through this system, you can adapt colors, typography, layouts, and styling of UI components to better match the visual identity of your institution.

NRP repositories use the Semantic UI theming system through a layered setup:

• oarepo-theme — the NRP theme overlay for NRP repositories
• invenio-app-rdm — the RDM UI theme for InvenioRDM-based repositories
• invenio-theme — the core Semantic UI theme for any Invenio applications

NRP theming tries to preserve the default UI elements & look & feel of InvenioRDM, but allows you to extend or override any part of the presentation layer using the mechanisms described below.

Theming Methods

NRP repositories use the standard InvenioRDM theming system. Following methods are available to customize the built-in themes:

1. Modify Invenio application Configuration

Basic theme-related UI settings can be configured via the Invenio configuration files or environment variables:

• myrepo
  • invenio.cfg
  • variables
  • …

This is a simplest way to change site-wide appearance, for cases where a configuration option is available. For a reference on how to configure these settings, please consult the Configuration docs.

2. Create or Override Asset Files

In NRP repositories (following InvenioRDM conventions), repository-level theming customizations are placed in the project’s top-level assets folder.

Your repository structure will typically contain:

• myrepo
  • assets
    • semantic-ui
      • less
      • js
      • templates
    • webpack.py
  • templates
  • invenio.cfg

Customizing the theme when using this method typically involves:

• creating Semantic UI LESS variables (e.g. for colors, fonts, spacing) and using them to override default component styles
• adding or overriding LESS components
• adding custom assets such as images, fonts, or JavaScript files

This structure aligns with the theming approach used in InvenioRDM itself and keeps all visual overrides together at the repository level.

Theme Hierarchy

Invenio applies theming through a layered cascade.
NRP inherits this cascade but adds the oarepo-theme layer as additional wrapper around the RDM base theme. This wrapper extends the theme with NRP-specific adjustments and components.

For each Semantic UI component, the layers are applied in the order listed above, so anything you define at a higher layer wins.

The definitive reference for the exact per-component import order — which differs slightly between .variables and .overrides, and between standard and custom components — is oarepo-theme’s theme.less. It defines the cascade directly; the editable locations in your repository that take part in it are the @import statements using the @{siteFolder} variable (which resolves to assets/less/site/ in your project).

Roughly, from lowest to highest priority, those site locations for a standard component are:

1. assets/less/site/default/…
2. assets/less/site/{theme}/… (e.g. rdm)
3. assets/less/site/…

Custom components registered through ui/components additionally read their .variables/.overrides from assets/less/site/components/default/… and assets/less/site/components/{theme}/… before the standard component locations above. Note also that .variables (defaults a component reads first) and .overrides (style rules applied last) do not share an identical cascade — .overrides omits the site/default and site/components/default layers. Always double-check theme.less when in doubt — in case of any disagreement, the code wins.