RED-5484: allow runtime theme config

apps/red-ui/src/app/app.component.ts

@@ -4,8 +4,24 @@ import { REDDocumentViewer } from './modules/pdf-viewer/services/document-viewer
 import { DossiersChangesService } from '@services/dossiers/dossier-changes.service';
 import { DOCUMENT } from '@angular/common';
 import { UserPreferenceService } from '@users/user-preference.service';
-import { IqserPermissionsService } from '@iqser/common-ui';
+import { getConfig, IqserPermissionsService } from '@iqser/common-ui';
 import { ROLES } from '@users/roles';
+import { AppConfig } from '@red/domain';
+
+function loadCustomTheme() {
+    const cssFileName = getConfig<AppConfig>().THEME;
+
+    if (cssFileName) {
+        const head = document.getElementsByTagName('head')[0];
+        const link = document.createElement('link');
+        link.id = cssFileName;
+        link.rel = 'stylesheet';
+        link.type = 'text/css';
+        link.href = 'assets/styles/themes/' + cssFileName + '.css';
+        link.media = 'all';
+        head.appendChild(link);
+    }
+}
 
 @Component({
     selector: 'redaction-root',
@@ -25,6 +41,7 @@ export class AppComponent {
         private readonly _permissionsService: IqserPermissionsService,
     ) {
         this._renderer.addClass(this._document.body, _userPreferenceService.getTheme());
+        loadCustomTheme();
         // TODO: Find a better place to initialize dossiers refresh
         if (_permissionsService.has(ROLES.dossiers.read)) {
             _dossierChangesService.initializeRefresh();

apps/red-ui/src/assets/config/config.json

@@ -16,5 +16,6 @@
   "SELECTION_MODE": "structural",
   "MANUAL_BASE_URL": "https://docs.redactmanager.com/preview",
   "RSS_ENABLED": true,
-  "ANNOTATIONS_THRESHOLD": 1000
+  "ANNOTATIONS_THRESHOLD": 1000,
+  "THEME": "theme-template"
 }

apps/red-ui/src/assets/styles/themes/theme-template.css

@@ -0,0 +1,56 @@
+available-variables {
+    --iqser-primary: lightblue;
+    --iqser-primary-rgb: 220, 230, 234;
+    --iqser-primary-2: orange;
+    --iqser-accent: blue;
+    --iqser-accent-rgb: 123, 234, 111;
+    --iqser-background: white;
+    --iqser-text: black;
+    --iqser-disabled: #9398a0;
+    --iqser-not-disabled-table-item: #f9fafb;
+    --iqser-btn-bg-hover: #e2e4e9;
+    --iqser-btn-bg: #f0f1f4;
+    --iqser-warn: #fdbd00;
+    --iqser-white: white;
+    --iqser-black: black;
+    --iqser-light: white;
+    --iqser-separator: rgba(226, 228, 233, 0.9);
+    --iqser-grey-1: #283241;
+    --iqser-grey-10: #313d4e;
+    --iqser-grey-7: #9398a0;
+    --iqser-grey-3: #aaacb3;
+    --iqser-grey-5: #d3d5da;
+    --iqser-grey-4: #e2e4e9;
+    --iqser-grey-6: #f0f1f4;
+    --iqser-grey-2: #f4f5f7;
+    --iqser-grey-8: #f9fafb;
+    --iqser-green-1: #00ff00;
+    --iqser-green-2: #5ce594;
+    --iqser-orange-1: #ff801a;
+    --iqser-yellow-1: #ffb83b;
+    --iqser-yellow-2: #fdbd00;
+    --iqser-yellow-rgb: 253, 189, 0;
+    --iqser-red-1: #dd4d50;
+    --iqser-red-2: #f16164;
+    --iqser-blue-1: #4875f7;
+    --iqser-blue-2: #48c9f7;
+    --iqser-blue-3: #5b97db;
+    --iqser-blue-4: #374c81;
+    --iqser-blue-5: #c5d3eb;
+    --iqser-pink-1: #f125de;
+    --iqser-helpmode-primary: green;
+    --iqser-font-size: 13px;
+    --iqser-button-radius: 17px;
+    --iqser-button-font-size: 13px;
+    --iqser-button-height: 34px;
+    --iqser-font-family: 'some placeholder value that should be overridden when configuring a theme';
+    --iqser-app-name-font-family: 'some placeholder value that should be overridden when configuring a theme';
+}
+
+body.light {
+    /*Override the default light theme here*/
+}
+
+body.dark {
+    /*Override the default dark theme here*/
+}

libs/red-domain/src/lib/shared/app-config.ts

@@ -17,4 +17,5 @@ export interface AppConfig {
     MANUAL_BASE_URL: string;
     RSS_ENABLED: boolean;
     ANNOTATIONS_THRESHOLD: number;
+    THEME: string;
 }