theme-env as string

angular.json

@@ -35,9 +35,9 @@
             "styles": [
               "src/styles.scss",
               {
-                "input": "src/theme/themes/orange/style.scss",
+                "input": "src/theme/themes/default/style.scss",
                 "lazy": true,
-                "bundleName": "orange"
+                "bundleName": "default"
               },
               {
                 "input": "src/theme/themes/blue/style.scss",

src/app/app.component.spec.ts

@@ -5,7 +5,6 @@ import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { CookieLawModule } from 'angular2-cookie-law';
 import { MockComponent } from 'ng-mocks';
 
-import { THEMES } from 'ish-core/configurations/injection-keys';
 import { ServerHtmlDirective } from 'ish-core/directives/server-html.directive';
 import { coreReducers } from 'ish-core/store/core-store.module';
 import { findAllIshElements } from 'ish-core/utils/dev/html-query-utils';
@@ -37,7 +36,6 @@ describe('App Component', () => {
         TranslateModule.forRoot(),
         ngrxTesting({ reducers: coreReducers }),
       ],
-      providers: [{ provide: THEMES, useValue: [{ name: 'ish', default: true }] }],
     }).compileComponents();
   }));
 

src/app/core/configuration.module.ts

@@ -35,7 +35,7 @@ import { ThemeService } from './utils/theme/theme.service';
     { provide: injectionKeys.MEDIUM_BREAKPOINT_WIDTH, useValue: environment.mediumBreakpointWidth },
     { provide: injectionKeys.LARGE_BREAKPOINT_WIDTH, useValue: environment.largeBreakpointWidth },
     { provide: injectionKeys.EXTRALARGE_BREAKPOINT_WIDTH, useValue: environment.extralargeBreakpointWidth },
-    { provide: injectionKeys.THEMES, useValue: environment.themes },
+    { provide: injectionKeys.THEME, useValue: environment.theme },
   ],
 })
 export class ConfigurationModule {

src/app/core/configurations/injection-keys.ts

@@ -1,7 +1,6 @@
 import { InjectionToken } from '@angular/core';
 
 import { Locale } from 'ish-core/models/locale/locale.model';
-import { Theme } from 'ish-core/models/theme/theme.model';
 import { ViewType } from 'ish-core/models/viewtype/viewtype.types';
 
 /**
@@ -50,4 +49,4 @@ export const CAPTCHA_SITE_KEY = new InjectionToken<string>('captchaSiteKey');
 /**
  * Array of themes that are available in the application
  */
-export const THEMES = new InjectionToken<Theme[]>('themes');
+export const THEME = new InjectionToken<string>('theme');

src/app/core/store/configuration/configuration.effects.ts

@@ -4,7 +4,6 @@ import { ActivatedRouteSnapshot, ActivationStart, NavigationEnd, ParamMap, Route
 import { Actions, Effect, ROOT_EFFECTS_INIT, ofType } from '@ngrx/effects';
 import { filter, map, mergeMap, take, takeWhile, tap, withLatestFrom } from 'rxjs/operators';
 
-import { Theme } from 'ish-core/models/theme/theme.model';
 import { SelectLocale } from 'ish-core/store/locale';
 import { whenTruthy } from 'ish-core/utils/operators';
 import { StatePropertiesService } from 'ish-core/utils/state-transfer/state-properties.service';
@@ -51,9 +50,7 @@ export class ConfigurationEffects {
       this.stateProperties
         .getStateOrEnvOrDefault<string | string[]>('FEATURES', 'features')
         .pipe(map(x => (typeof x === 'string' ? x.split(/,/g) : x))),
-      this.stateProperties
-        .getStateOrEnvOrDefault<string | Theme[]>('THEME', 'themes')
-        .pipe(map(x => (typeof x === 'string' ? x : x.find(t => t.default).name)))
+      this.stateProperties.getStateOrEnvOrDefault<string>('THEME', 'theme').pipe(map(x => x || 'default'))
     ),
     map(
       ([, baseURL, server, serverStatic, channel, application, features, theme]) =>

src/app/core/store/configuration/configuration.reducer.ts

@@ -19,6 +19,7 @@ const initialState: ConfigurationState = {
   application: undefined,
   features: [],
   gtmToken: undefined,
+  theme: undefined,
 };
 
 export function configurationReducer(state = initialState, action: ConfigurationAction): ConfigurationState {

src/environments/environment.model.ts

@@ -1,5 +1,4 @@
 import { Locale } from 'ish-core/models/locale/locale.model';
-import { Theme } from 'ish-core/models/theme/theme.model';
 import { ViewType } from 'ish-core/models/viewtype/viewtype.types';
 
 export interface Environment {
@@ -75,6 +74,6 @@ export interface Environment {
   // configuration of the available locales - hard coded for now
   locales: Locale[];
 
-  // themes
-  themes: Theme[];
+  // theme
+  theme: 'default' | 'blue';
 }

src/environments/environment.prod.ts

@@ -26,5 +26,5 @@ export const environment: Environment = {
     { lang: 'de_DE', currency: 'EUR', value: 'de', displayName: 'German', displayLong: 'German (Germany)' },
     { lang: 'fr_FR', currency: 'EUR', value: 'fr', displayName: 'French', displayLong: 'French (France)' },
   ],
-  themes: [{ name: 'orange', default: true }, { name: 'blue' }],
+  theme: 'default',
 };

src/environments/environment.ts

@@ -33,5 +33,5 @@ export const environment: Environment = {
     { lang: 'de_DE', currency: 'EUR', value: 'de', displayName: 'German', displayLong: 'German (Germany)' },
     { lang: 'fr_FR', currency: 'EUR', value: 'fr', displayName: 'French', displayLong: 'French (France)' },
   ],
-  themes: [{ name: 'orange', default: true }, { name: 'blue' }],
+  theme: 'default',
 };