feat: change theme via config
MODIFY
.eslintrc.json
.eslintrc.json
"plugin:prettier/recommended"
],
"rules": {
- "@typescript-eslint/no-unsafe-assignment": "off"
+ "@typescript-eslint/no-unsafe-assignment": "off",
+ "@typescript-eslint/explicit-module-boundary-types": "off",
+ "@typescript-eslint/restrict-plus-operands": "off"
}
},
// NOTE: WE ARE NOT APPLYING PRETTIER IN THIS OVERRIDE, ONLY @ANGULAR-ESLINT/TEMPLATE

MODIFY
src/app/app.module.ts
src/app/app.module.ts
@@ -39,14 +39,15 @@ import { NgxChartsModule } from '@swimlane/ngx-charts';
import { GaugeChartComponent } from './components/charts/gauge-chart/gauge-chart.component';
import { IConfig } from './interfaces/IConfig';
import { ApprovalComponent } from './components/approval/approval.component';
+import { ThemeService } from './services/theme/theme.service';
-export function initializeApp(configService: ConfigService, devPortalInitializer: InitializerService, keycloakHelper: KeycloakHelperService): () => Promise<any> {
+export function initializeApp(configService: ConfigService, devPortalInitializer: InitializerService, keycloakHelper: KeycloakHelperService, themeService: ThemeService): () => Promise<any> {
return () => new Promise((resolve, reject) => {
/* At first fetch the configuration file */
configService.readAndEvaluateConfig().then((config: IConfig) => {
/* After you can list the promises, which depend on the config here */
- return Promise.all([devPortalInitializer.initLanguage(), keycloakHelper.initKeycloak()]).then(() => {
+ return Promise.all([devPortalInitializer.initLanguage(), keycloakHelper.initKeycloak(), themeService.initTheme(config.theme)]).then(() => {
resolve(true);
}).catch((e: Error) => {
reject(e);
@@ -116,7 +117,8 @@ export function createTranslateLoader(http: HttpClient) {
deps: [
ConfigService,
InitializerService,
- KeycloakHelperService
+ KeycloakHelperService,
+ ThemeService,
],
},
],

MODIFY
src/app/interfaces/IConfig.ts
src/app/interfaces/IConfig.ts
export interface IConfig {
language: string;
supportedLanguages: string[];
+ theme: string;
endpoint: string;
hero: IHero;
navigation: INavigation;

MODIFY
src/app/services/config/config.service.ts
src/app/services/config/config.service.ts
@@ -64,8 +64,4 @@ export class ConfigService {
getShowHomeLink(): boolean {
return this.config.navigation.showHomeLink;
}
-
- setConfig(config: IConfig) {
- this.config = config;
- }
}

MODIFY
src/app/services/theme/theme.service.ts
src/app/services/theme/theme.service.ts
import { Injectable } from '@angular/core';
+import { ConfigService } from '../config/config.service';
@Injectable({
providedIn: 'root',
})
export class ThemeService {
- constructor() {}
-
- setTheme(theme: string) {
- document.body.classList.add(theme);
+ initTheme(theme: string) {
+ document.body.classList.add('theme-' + theme);
}
}

MODIFY
src/assets/config.json
src/assets/config.json
{
"language": "en",
"supportedLanguages": ["de", "en"],
+ "theme": "default",
"hero": {
"title": "HOME.TITLE",
"subtitle": "HOME.SUBTITLE",

MODIFY
src/assets/themes/custom.scss
src/assets/themes/custom.scss
@@ -150,4 +150,4 @@ $primary-palette: mat-palette($custom-blue);
$accent-palette: mat-palette($custom-grey);
$warn-palette: mat-palette($custom-red);
-$theme: mat-light-theme($primary-palette,$accent-palette, $warn-palette);
+$theme-custom: mat-light-theme($primary-palette,$accent-palette, $warn-palette);

MODIFY
src/assets/themes/default.scss
src/assets/themes/default.scss
@@ -5,4 +5,4 @@ $primary-palette: mat-palette($mat-indigo);
$accent-palette: mat-palette($mat-pink);
$warn-palette: mat-palette($mat-lime);
-$theme: mat-light-theme($primary-palette, $accent-palette, $warn-palette);
+$theme-default: mat-light-theme($primary-palette, $accent-palette, $warn-palette);

MODIFY
src/index.html
src/index.html
href="//fonts.googleapis.com/css?family=Open+Sans"
/>
</head>
- <body class="theme">
+ <body>
<app-root></app-root>
</body>
</html>

MODIFY
src/styles.scss
src/styles.scss
@use '~@angular/material' as mat;
@import '~@angular/material/theming';
@import 'assets/themes/default';
+@import 'assets/themes/custom';
@include mat-core();
/***** THEMING *****/
// Include theme styles for components.
}
-.theme {
- @include app-theme($theme);
+.theme-default {
+ @include app-theme($theme-default);
}
-$config: mat.get-color-config($theme);
+.theme-custom {
+ @include app-theme($theme-custom);
+}
/***** DEFINITIONS *****/
/** Font **/

feat: change theme via config