From 0ea0dcadc04cfc27913cf330444581170341ec10 Mon Sep 17 00:00:00 2001
From: ArtemDzhereleiko <adzhereleiko@thingsboard.io>
Date: Tue, 23 Dec 2025 18:41:40 +0200
Subject: [PATCH] UI: overide alarm severity colors from widget and dashboard
 css settings

---
 ui-ngx/src/app/core/services/utils.service.ts                 | 4 ++--
 .../components/dashboard-page/dashboard-page.component.ts     | 1 +
 .../home/components/dashboard-page/dashboard-page.models.ts   | 1 +
 .../widget/lib/alarm/alarms-table-widget.component.ts         | 2 +-
 .../home/components/widget/widget-container.component.ts      | 4 ++--
 ui-ngx/src/app/modules/home/models/widget-component.models.ts | 2 ++
 6 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/ui-ngx/src/app/core/services/utils.service.ts b/ui-ngx/src/app/core/services/utils.service.ts
index a57e3480b1..045725271c 100644
--- a/ui-ngx/src/app/core/services/utils.service.ts
+++ b/ui-ngx/src/app/core/services/utils.service.ts
@@ -454,11 +454,11 @@ export class UtilsService {
     return base64toObj(b64Encoded);
   }
 
-  public applyCssToElement(renderer: Renderer2, element: any, cssClassPrefix: string, css: string): string {
+  public applyCssToElement(renderer: Renderer2, element: any, cssClassPrefix: string, css: string, addTbDefaultClass: boolean = false): string {
     const cssParser = new cssjs();
     cssParser.testMode = false;
     const cssClass = `${cssClassPrefix}-${guid()}`;
-    cssParser.cssPreviewNamespace = cssClass;
+    cssParser.cssPreviewNamespace = addTbDefaultClass ? 'tb-default .' + cssClass : cssClass;
     cssParser.createStyleElement(cssClass, css);
     renderer.addClass(element, cssClass);
     return cssClass;
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
index d0c3325c72..090822a146 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
@@ -548,6 +548,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
       const cssParser = new cssjs();
       cssParser.testMode = false;
       this.dashboardPageClass  = 'tb-dashboard-page-css-' + guid();
+      this.dashboardCtx.dashboardCssClass = this.dashboardPageClass;
       cssParser.cssPreviewNamespace = 'tb-default .' + this.dashboardPageClass;
       cssParser.createStyleElement(this.dashboardPageClass, cssString);
     }
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts
index a0fa516374..fec05ff2dd 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts
@@ -51,6 +51,7 @@ export interface DashboardContext {
   stateChanged: Observable<string>;
   stateId: Observable<string>;
   runChangeDetection: () => void;
+  dashboardCssClass?: string;
 }
 
 export interface IDashboardController {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts
index bf715330a7..357eed49d2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts
@@ -968,7 +968,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
       (AlarmDetailsDialogComponent,
         {
           disableClose: true,
-          panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
+          panelClass: ['tb-dialog', 'tb-fullscreen-dialog', this.ctx.stateController.dashboardCtrl.dashboardCtx.dashboardCssClass, this.ctx.widgetCssClass],
           data: {
             alarmId: alarm.id.id,
             allowAcknowledgment: this.allowAcknowledgment,
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts
index 51ed592e7e..6edac690e7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts
@@ -151,8 +151,8 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
     this.widget.widgetContext.containerChangeDetector = this.cd;
     const cssString = this.widget.widget.config.widgetCss;
     if (isNotEmptyStr(cssString)) {
-      this.cssClass =
-        this.utils.applyCssToElement(this.renderer, this.gridsterItem.el, 'tb-widget-css', cssString);
+      this.cssClass = this.utils.applyCssToElement(this.renderer, this.gridsterItem.el, 'tb-widget-css', cssString, true);
+      this.widget.widgetContext.widgetCssClass = this.cssClass;
     }
     $(this.gridsterItem.el).on('mousedown', (e) => this.onMouseDown(e.originalEvent));
     $(this.gridsterItem.el).on('click', (e) => this.onClicked(e.originalEvent));
diff --git a/ui-ngx/src/app/modules/home/models/widget-component.models.ts b/ui-ngx/src/app/modules/home/models/widget-component.models.ts
index 293381194e..d3349b2ed4 100644
--- a/ui-ngx/src/app/modules/home/models/widget-component.models.ts
+++ b/ui-ngx/src/app/modules/home/models/widget-component.models.ts
@@ -308,6 +308,8 @@ export class WidgetContext {
   widgetNamespace?: string;
   subscriptionApi?: WidgetSubscriptionApi;
 
+  widgetCssClass?: string;
+
   actionsApi?: WidgetActionsApi;
   activeEntityInfo?: SubscriptionEntityInfo;