Colors easy

Setting a brand color affects the primary color tone of your repository site. Many UI elements either directly use this color or derive their appearance from it.

In NRP Invenio repositories, the main theme colors are defined in the site.variables file.

@brandColor: rgba(13, 95, 137, 0.8);

Component Colors and Accents

The most prominent and persistent UI elements for branding are the page header, footer, and actionable elements (like buttons). You can either set them to the @brandColor defined above or override their appearance with more specific variables:

/* Override @primaryColor to override the site-wide primary accents on actionable elements. */
@primaryColor: 'blue';
/* Alternatively, use @brandColor for primary accents */
@primaryColor: @brandColor;
 
/* Header can contain either image based or solid color background */
@navbarBackgroundColor: blue;
@navbarBackgroundImage: linear-gradient(12deg, blue, blue 15%, rgba(251, 130, 115, 0.69));
/* You can also reference image assets inside your branding folder. */
@navbarBackgroundImage: url("~@less/images/your_image.png");
 
/* Footer */
@footerLightColor: @brandColor;
/* a shade of your brandColor */
@footerDarkColor: darken(@brandColor, 15%); 

For a full list of available global and component-specific variables, see the global variables and component-specific variables sections.

Workflow Summary

• Edit .variables or .overrides files inside /assets/semantic-ui/less/. Either the global variables file or component-specific files.
• Run development server with assets watcher.