All Versions
- DSpace 7.x (Current Release)
- DSpace 8.x (Unreleased)
- DSpace 6.x (EOL)
- DSpace 5.x (EOL)
- More Versions...
...
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.src/themes/
(choose whatever folder name you want)Modify angular.json
(in the root folder), adding your theme folder's main "theme.scss" file to the "styles" list. The below example is for a new theme folder named src/themes/mydspacesite/
Code Block |
---|
"styles": [ "src/styles/startup.scss", { "input": "src/styles/base-theme.scss", "inject": false, "bundleName": "base-theme" }, ... { "input": "src/themes/mydspacesite/styles/theme.scss", "inject": false, "bundleName": "mydspacesite-theme" }, ] |
NOTE: the "bundleName" for your custom them MUST use the format "${folder-name}-theme". E.g. if the folder is named "arc/themes/amazingtheme", then the "bundleName" MUST be "amazingtheme-theme"
Enable your theme: Modify your src/environments/environment.*.ts
configuration file, adding your new theme to the "themes" array in that file. Pay close attention to modify the correct environment file (e.g. modify environment.dev.ts if running in dev mode, or environment.prod.ts if running in prod mode). We recommend starting in "dev mode" (environment.dev.ts) as this mode lets you see your changes immediately in a browser without a full rebuild of the UI – see next step.
Code Block |
---|
// In this example, we only show one theme enabled. It's possible to enable multiple (see below note) themes: [ { name: 'mydspacesite' }, ] |
src/themes/mydspacesite/
globally. You should also comment out the default "dspace" theme, if you intend to replace it entirely.Verify your settings by starting the UI (ideally in Dev mode): At this point, you should verify the basic settings you've made all "work". We recommend doing your theme work while running the UI in "dev mode", as the UI will auto-restart anytime you save a new change. This will allow you to quickly see the impact of each change in your browser.
Code Block |
---|
# Start in dev mode (which uses environment.dev.ts) yarn start:dev |
...