Page History

...

The DSpace UI uses the Bootstrap (v4.x) website framework, which uses Sass, a CSS preprosser. 

Sass is very similar to CSS, but it allows you to nest CSS rules & have variables and functions.  For a brief overview on Sass, see https://sass-lang.com/guide

...

Theme Directories & Configuration

Out of the box, there are three theming layers/directories to be aware of:

• Base Theme (

...

• src/app/ directories):  The primary look & feel of DSpace (e.g. HTML layout, header/footer, etc) is defined by the HTML5 templates under this directory. Each HTML5 template is stored in a subdirectory named for the Angular component where that template is used. The base theme includes very limited styling (CSS, etc), based heavily on default Bootstrap (4.x) styling, and only allowing for minor tweaks to improve WCAG 2.1 AA accessibility.
• Custom Theme (

...

• src/themes/custom directories): This directory acts as the scaffolding or template for creating a new custom theme.  It provides (empty) Angular components/templates which allow you to change the theme of individual components.  Since all files are empty by default, if you enable this theme (without modifying it), it will look identical to the Base Theme.
• DSpace Theme (

...

• src/themes/dspace directories): This is the default theme for DSpace 7.  It's a very simple example theme providing a custom color scheme & homepage on top of the Base Theme. It's important to note that this theme ONLY provides custom CSS/images to override our Base Theme. All HTML5 templates are included at the Base Theme level, as this ensures those HTML5 templates are also available to the Custom Theme.

More information on the UI Design principles/technologies can be found at DSpace UI Design principles and guidelines

The theming configuration can be found in the src/environments/environment.*.ts.  See User Interface Configuration.

Getting Started

The best place to start with a new theme is the "custom" theme folder (src/themes/custom). This folder contains the boilerplate code for all theme-able components. It's a scaffolding for a new theme which doesn't modify any of the "base theme" (src/app/ directories). This means that by default it's a plain Bootstrap look and feel, with a few tweaks for better accessibility.

You can either modify this directory directly, or copy all its contents into a new folder under src/themes/