creating cutom theme

[Jose Blanco]

I am trying to create a custom theme so that I can show different
metadata on the simple display depending on the collection. I have
not been successful. This is what I have done:

(1) cd dspace-angular/src/themes
(2) cp -rf custom collection-A
(3) cd dspace-angular/src/themes/collection-A/app/item-page/simple/item-types/untyped-item
(4) I noticed that the file I want to change is empty:
-rw-r--r-- 1 blancoj staff 0 May 4 13:43 untyped-item.component.html
(5) So I:
cp src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
src/themes/collection-A/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
(6) Now I made the change I needed in
src/themes/collection-A/app/item-page/simple/item-types/untyped-item/untyped-item.component.html

(7) Also changed
src/themes/collection-A/app/item-page/simple/item-types/untyped-item/untyped-item.component.ts
to reference the html where my change lives:

templateUrl: './untyped-item.component.html',
// templateUrl:
'../../../../../../../app/item-page/simple/item-types/untyped-item/untyped-item.component.html',

(8) Since I am running in dev right now, I went to edit this file:
config/config.development.yml
This is what my themed declaration looks like: ( I want the theme
to apply to items in the the collection with this uuid:
a4d4efe4-d291-4c61-9195-f90b02ee01fe )

themes:
- name: dspace
headTags:
- tagName: link
attributes:
rel: icon
href: assets/dspace/images/favicons/favicon.ico
sizes: any
- tagName: link
attributes:
rel: icon
href: assets/dspace/images/favicons/favicon.svg
type: image/svg+xml
- tagName: link
attributes:
rel: apple-touch-icon
href: assets/dspace/images/favicons/apple-touch-icon.png
- tagName: link
attributes:
rel: manifest
href: assets/dspace/images/favicons/manifest.webmanifest
- name: custom
- name: collection-A
extends: custom
uuid: a4d4efe4-d291-4c61-9195-f90b02ee01fe
(9) I also added this to config.yml

themes:
name: ['custom', 'collection-A']


(11) in angular.json I added:
{
"input": "src/themes/collection-A/styles/theme.scss",
"inject": false,
"bundleName": "collection-A-theme"
}


(12) This is what this file looks like: src/themes/eager-themes.module.ts

import { NgModule } from '@angular/core';
import { EagerThemeModule as DSpaceEagerThemeModule } from
'./dspace/eager-theme.module';
import { EagerThemeModule as CustomEagerThemeModule } from
'./custom/eager-theme.module';
import { EagerThemeModule as CollectionAEagerThemeModule } from
'./collection-A/eager-theme.module';

//import { EagerThemeModule as CollectionAEagerThemeModule } from
'./custom/collection-A-theme.module';

/**
* This module bundles the eager theme modules for all available themes.
* Eager modules contain components that are present on every page (to
speed up initial loading)
* and entry components (to ensure their decorators get picked up).
*
* Themes that aren't in use should not be imported here so they don't
take up unnecessary space in the main bundle.
*/
@NgModule({
imports: [
DSpaceEagerThemeModule,
CustomEagerThemeModule,
CollectionAEagerThemeModule,
// CustomEagerThemeModule,
],
})
export class EagerThemesModule {
}

(13) I then restarted this system:
yarn run start:dev

(14) It seems like the item page is coming from:
src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
rather than:
src/themes/collection-A/app/item-page/simple/item-types/untyped-item/untyped-item.component.html

What am I missing?