From 6d35b09d4d802fa8cf13f415c833fba5681a9229 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Wed, 1 Jul 2026 18:13:06 +0300
Subject: [PATCH] UI: swap dialog header mat-toolbar color=primary for
 .tb-dialog-header class

Sweep every dialog-context <mat-toolbar color="primary"> (105 toolbars across
104 files) to <mat-toolbar class="tb-dialog-header">, preserving any existing
class list. Add a matching .tb-dialog-header rule to styles.scss with a
1px rgba(0,0,0,0.12) bottom border. Table row-selection toolbars
(mat-mdc-table-toolbar) and the app shell / dashboard-page primary toolbars
are intentionally left as-is. The two dialogs that placed a
tb-toggle-select in the header switch from appearance="fill-invert" to "fill"
now that the header is on a light background.
---
 .../home/components/ai-model/ai-model-dialog.component.html   | 2 +-
 .../alarm-rules/alarm-rule-details-dialog.component.html      | 2 +-
 .../components/alarm-rules/alarm-rule-dialog.component.html   | 2 +-
 .../alarm-rules/cf-alarm-rule-condition-dialog.component.html | 2 +-
 .../alarm-rules/cf-alarm-schedule-dialog.component.html       | 2 +-
 .../alarm-rule-complex-filter-predicate-dialog.component.html | 2 +-
 .../filter/alarm-rule-filter-dialog.component.html            | 2 +-
 .../home/components/alarm/alarm-comment-dialog.component.html | 2 +-
 .../home/components/alarm/alarm-details-dialog.component.html | 2 +-
 .../home/components/alias/entity-alias-dialog.component.html  | 2 +-
 .../components/alias/entity-aliases-dialog.component.html     | 2 +-
 .../home/components/api-key/add-api-key-dialog.component.html | 2 +-
 .../api-key/api-key-generated-dialog.component.html           | 2 +-
 .../components/api-key/api-keys-table-dialog.component.html   | 2 +-
 .../components/attribute/add-attribute-dialog.component.html  | 2 +-
 .../attribute/add-widget-to-dashboard-dialog.component.html   | 2 +-
 .../audit-log/audit-log-details-dialog.component.html         | 2 +-
 .../components/dialog/calculated-field-dialog.component.html  | 2 +-
 .../calculated-field-script-test-dialog.component.html        | 2 +-
 .../dashboard-page/add-widget-dialog.component.html           | 4 ++--
 .../dashboard-page/dashboard-image-dialog.component.html      | 2 +-
 .../dashboard-page/dashboard-settings-dialog.component.html   | 2 +-
 .../layout/add-new-breakpoint-dialog.component.html           | 2 +-
 .../layout/manage-dashboard-layouts-dialog.component.html     | 2 +-
 .../dashboard-page/layout/move-widgets-dialog.component.html  | 2 +-
 .../states/dashboard-state-dialog.component.html              | 2 +-
 .../states/manage-dashboard-states-dialog.component.html      | 2 +-
 .../dashboard/select-target-layout-dialog.component.html      | 2 +-
 .../dashboard/select-target-state-dialog.component.html       | 2 +-
 .../home/components/entity/add-entity-dialog.component.html   | 2 +-
 .../home/components/event/event-content-dialog.component.html | 2 +-
 .../filter/complex-filter-predicate-dialog.component.html     | 2 +-
 .../home/components/filter/filter-dialog.component.html       | 2 +-
 .../components/filter/filter-user-info-dialog.component.html  | 2 +-
 .../home/components/filter/filters-dialog.component.html      | 2 +-
 .../home/components/filter/key-filter-dialog.component.html   | 2 +-
 .../home/components/filter/user-filter-dialog.component.html  | 2 +-
 .../components/iot-hub/iot-hub-add-item-dialog.component.html | 2 +-
 .../profile/add-device-profile-dialog.component.html          | 2 +-
 .../profile/alarm/alarm-rule-condition-dialog.component.html  | 2 +-
 .../profile/alarm/alarm-schedule-dialog.component.html        | 2 +-
 .../profile/alarm/edit-alarm-details-dialog.component.html    | 2 +-
 .../components/profile/asset-profile-dialog.component.html    | 2 +-
 .../components/profile/device-profile-dialog.component.html   | 2 +-
 .../device/lwm2m/lwm2m-attributes-dialog.component.html       | 2 +-
 .../lwm2m-bootstrap-add-config-server-dialog.component.html   | 2 +-
 .../lwm2m/lwm2m-object-add-instances-dialog.component.html    | 2 +-
 .../components/profile/tenant-profile-dialog.component.html   | 2 +-
 .../rate-limits/rate-limits-details-dialog.component.html     | 2 +-
 .../home/components/relation/relation-dialog.component.html   | 2 +-
 .../home/components/resources/resources-dialog.component.html | 2 +-
 .../widget/action/manage-widget-actions-dialog.component.html | 2 +-
 .../widget/action/widget-action-dialog.component.html         | 2 +-
 .../widget/dialog/embed-dashboard-dialog.component.html       | 2 +-
 .../maps-legacy/dialogs/select-entity-dialog.component.html   | 2 +-
 .../widget/lib/rpc/persistent-add-dialog.component.html       | 2 +-
 .../widget/lib/rpc/persistent-details-dialog.component.html   | 2 +-
 .../settings/common/key/data-key-config-dialog.component.html | 4 ++--
 .../settings/common/map/map-data-layer-dialog.component.html  | 2 +-
 .../components/wizard/device-wizard-dialog.component.html     | 2 +-
 .../dialogs/add-entities-to-customer-dialog.component.html    | 2 +-
 .../home/dialogs/add-entities-to-edge-dialog.component.html   | 2 +-
 .../home/dialogs/assign-to-customer-dialog.component.html     | 2 +-
 .../src/app/modules/home/dialogs/events-dialog.component.html | 2 +-
 .../pages/admin/oauth2/clients/client-dialog.component.html   | 2 +-
 .../home/pages/admin/send-test-sms-dialog.component.html      | 2 +-
 .../dashboard/import-dashboard-file-dialog.component.html     | 2 +-
 .../dashboard/make-dashboard-public-dialog.component.html     | 2 +-
 .../manage-dashboard-customers-dialog.component.html          | 2 +-
 .../device/device-check-connectivity-dialog.component.html    | 2 +-
 .../pages/device/device-credentials-dialog.component.html     | 2 +-
 .../home/pages/edge/edge-instructions-dialog.component.html   | 2 +-
 .../mobile/applications/mobile-app-dialog.component.html      | 2 +-
 .../mobile/applications/remove-app-dialog.component.html      | 2 +-
 .../bundes/layout/add-mobile-page-dialog.component.html       | 2 +-
 .../bundes/mobile-app-configuration-dialog.component.html     | 2 +-
 .../pages/mobile/bundes/mobile-bundle-dialog.component.html   | 2 +-
 .../recipient/recipient-notification-dialog.component.html    | 2 +-
 .../notification/rule/rule-notification-dialog.component.html | 2 +-
 .../pages/notification/sent/sent-error-dialog.component.html  | 2 +-
 .../notification/sent/sent-notification-dialog.component.html | 2 +-
 .../template/template-notification-dialog.component.html      | 2 +-
 .../home/pages/rulechain/add-note-dialog.component.html       | 2 +-
 .../home/pages/rulechain/add-rule-node-dialog.component.html  | 2 +-
 .../pages/rulechain/add-rule-node-link-dialog.component.html  | 2 +-
 .../rulechain/create-nested-rulechain-dialog.component.html   | 2 +-
 .../backup-code-auth-dialog.component.html                    | 2 +-
 .../authentication-dialog/email-auth-dialog.component.html    | 2 +-
 .../authentication-dialog/sms-auth-dialog.component.html      | 2 +-
 .../authentication-dialog/totp-auth-dialog.component.html     | 2 +-
 .../home/pages/user/activation-link-dialog.component.html     | 2 +-
 .../modules/home/pages/user/add-user-dialog.component.html    | 2 +-
 .../pages/widget/save-widget-type-as-dialog.component.html    | 2 +-
 .../pages/widget/select-widget-type-dialog.component.html     | 2 +-
 .../home/pages/widget/widgets-bundle-dialog.component.html    | 2 +-
 .../entity-conflict-dialog.component.html                     | 2 +-
 .../components/dialog/json-object-edit-dialog.component.html  | 2 +-
 .../components/dialog/node-script-test-dialog.component.html  | 2 +-
 .../shared/components/image/embed-image-dialog.component.html | 2 +-
 .../app/shared/components/image/image-dialog.component.html   | 2 +-
 .../components/image/upload-image-dialog.component.html       | 2 +-
 .../components/time/timewindow-config-dialog.component.html   | 2 +-
 .../import-export/export-resource-dialog.component.html       | 2 +-
 .../app/shared/import-export/import-dialog-csv.component.html | 2 +-
 .../src/app/shared/import-export/import-dialog.component.html | 2 +-
 ui-ngx/src/styles.scss                                        | 4 ++++
 106 files changed, 111 insertions(+), 107 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.html b/ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.html
index 6802eaaf8b..d9471ef31d 100644
--- a/ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/ai-model/ai-model-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2>{{ dialogTitle | translate }}</h2>
   <span class="flex-1"></span>
   <div tb-help="aiModels"></div>
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-details-dialog.component.html
index 413b72e614..b7759bb49b 100644
--- a/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-details-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form style="width: 800px">
-  <mat-toolbar class="justify-between" color="primary">
+  <mat-toolbar class="tb-dialog-header justify-between">
     <h2>{{ 'alarm-rule.edit-alarm-rule-additional-info' | translate }}</h2>
     <button mat-icon-button (click)="cancel()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-dialog.component.html
index 48f4e8a5af..af7d921d52 100644
--- a/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div [formGroup]="fieldFormGroup" class="calculated-field-dialog-container flex h-full flex-col">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'alarm-rule.alarm-rule' | translate}}</h2>
     <span class="flex-1"></span>
     <div tb-help="alarmRules"></div>
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition-dialog.component.html
index 3426347595..3b23286118 100644
--- a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="conditionFormGroup" (ngSubmit)="save()">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (readonly ? 'alarm-rule.alarm-rule-condition' : 'alarm-rule.edit-alarm-rule-condition') | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-schedule-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-schedule-dialog.component.html
index 3908d919b3..2795d37a64 100644
--- a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-schedule-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-schedule-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form>
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (readonly ? 'alarm-rule.schedule-title' : 'alarm-rule.edit-schedule') | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-complex-filter-predicate-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-complex-filter-predicate-dialog.component.html
index 5ca3cde37b..ef31db737f 100644
--- a/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-complex-filter-predicate-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-complex-filter-predicate-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="complexFilterFormGroup" (ngSubmit)="save()" style="width: 1200px;">
-  <mat-toolbar class="justify-between" color="primary">
+  <mat-toolbar class="tb-dialog-header justify-between">
     <h2 translate>filter.complex-filter</h2>
     <button mat-icon-button
             (click)="cancel()"
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-dialog.component.html
index 2d971f98ab..5c8bd09b69 100644
--- a/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="filterFormGroup" (ngSubmit)="save()" style="width: 1200px;">
-  <mat-toolbar class="justify-between" color="primary">
+  <mat-toolbar class="tb-dialog-header justify-between">
     <h2>{{(data.isAdd ? 'alarm-rule.add-filter' : 'alarm-rule.edit-filter') | translate}}</h2>
     <button mat-icon-button
             (click)="cancel()"
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html
index a5935e1f2b..b366a785fb 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form style="width: 600px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <span class="flex-1"></span>
     <button mat-icon-button (click)="close()" type="button">
       <mat-icon class="material-icons">close</mat-icon>
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html
index a47de5b3f7..550c42605f 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="alarmFormGroup" style="width: 600px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'alarm.alarm-details' | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html b/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html
index 3394114d88..ce14dfe673 100644
--- a/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="entityAliasFormGroup" (ngSubmit)="save()" style="width: 700px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (isAdd ? 'alias.add' : 'alias.edit') | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html b/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
index 05aba8344a..ad7fcae448 100644
--- a/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="entityAliasesFormGroup" (ngSubmit)="save()" style="width: 800px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ title | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/api-key/add-api-key-dialog.component.html b/ui-ngx/src/app/modules/home/components/api-key/add-api-key-dialog.component.html
index 05549f5260..942d3333bc 100644
--- a/ui-ngx/src/app/modules/home/components/api-key/add-api-key-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/api-key/add-api-key-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar class="min-w-0" color="primary">
+<mat-toolbar class="tb-dialog-header min-w-0">
   <h2>{{ 'api-key.generate-title' | translate }}</h2>
   <span class="flex-1"></span>
   <div tb-help="apiKeys"></div>
diff --git a/ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.html b/ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.html
index 70e7ae7396..bf0158dd1d 100644
--- a/ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar class="min-w-0" color="primary">
+<mat-toolbar class="tb-dialog-header min-w-0">
   <h2>{{ 'api-key.generated-api-key-title' | translate }}</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/api-key/api-keys-table-dialog.component.html b/ui-ngx/src/app/modules/home/components/api-key/api-keys-table-dialog.component.html
index 22aea2c7a2..f6d767cfc2 100644
--- a/ui-ngx/src/app/modules/home/components/api-key/api-keys-table-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/api-key/api-keys-table-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div class="api-keys-dialog-container flex flex-col xs:h-full">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'api-key.manage-api-keys' | translate }}</h2>
     <span class="flex-1"></span>
     <div tb-help="apiKeys"></div>
diff --git a/ui-ngx/src/app/modules/home/components/attribute/add-attribute-dialog.component.html b/ui-ngx/src/app/modules/home/components/attribute/add-attribute-dialog.component.html
index eddcf3f9b2..586065baf8 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/add-attribute-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/add-attribute-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="attributeFormGroup" (ngSubmit)="add()" style="min-width: 420px; max-width: 420px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (isTelemetry ? 'attribute.add-telemetry' : 'attribute.add') | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html b/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html
index 41d5d69edb..36f2fb831f 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="addWidgetFormGroup" (ngSubmit)="add()" style="min-width: 400px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>attribute.add-widget-to-dashboard</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html
index 9db295dc26..c084023723 100644
--- a/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 translate>audit-log.audit-log-details</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html
index 503927c71a..ce258b811f 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div [formGroup]="fieldFormGroup" class="calculated-field-dialog-container flex flex-col">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'entity.type-calculated-field' | translate}}</h2>
     <span class="flex-1"></span>
     <div tb-help="calculatedField"></div>
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.html
index 5cb43c752e..fb60ade3c6 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form #testScriptContainer class="cf-test-dialog-container size-full" [formGroup]="calculatedFieldScriptTestFormGroup">
-  <mat-toolbar class="flex justify-between" color="primary">
+  <mat-toolbar class="tb-dialog-header flex justify-between">
     <h2>{{ 'calculated-fields.test-script-function' | translate }} ({{ 'api-usage.tbel' | translate }})</h2>
     <button mat-icon-button
             (click)="cancel()"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html
index ebd73b5388..456b690346 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html
@@ -16,13 +16,13 @@
 
 -->
 <form class="tb-add-widget-dialog" [formGroup]="widgetFormGroup">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <div class="tb-add-widget-toolbar">
       <h2>{{'widget.add' | translate}}:</h2>
       <span class="flex-1">{{data.widgetInfo.widgetName}}</span>
       <div class="flex flex-row items-center justify-start gt-xs:gap-4" style="min-width: fit-content;">
         @if (widgetConfig.hasBasicMode) {
-          <tb-toggle-select appearance="fill-invert" selectMediaBreakpoint="xs"
+          <tb-toggle-select appearance="fill" selectMediaBreakpoint="xs"
                             [(ngModel)]="widgetConfigMode" [ngModelOptions]="{standalone: true}">
             <tb-toggle-option value="basic">{{ 'widget.basic-mode' | translate }}</tb-toggle-option>
             <tb-toggle-option value="advanced">{{ 'widget.advanced-mode' | translate }}</tb-toggle-option>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html
index 35d77e784a..ed2f0fad3d 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-image-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>dashboard.update-image</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html
index 7fb0f3f68d..9221414b45 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" style="width: 750px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>{{settings ? 'dashboard.settings' : 'layout.settings'}}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html
index 14656f6b7c..12d95c89e4 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 translate>layout.add-new-breakpoint</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
index d96f491113..e6abba1a8e 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="layoutsFormGroup" (ngSubmit)="save()">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>layout.manage</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.html
index 1e0d835d4f..9d493adee3 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/move-widgets-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="move()">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>dashboard.move-all-widgets</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html
index 58cb21253d..83040a0cc5 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="stateFormGroup" (ngSubmit)="save()" style="min-width: 480px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>{{ isAdd ? 'dashboard.add-state' : 'dashboard.edit-state' }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
index 40cad0acf3..93881d545c 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/manage-dashboard-states-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 translate>dashboard.manage-states</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html
index bf89db1b8d..4c60f62d98 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard/select-target-layout-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form>
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>layout.select</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html
index fdd4b84397..faeb9811d9 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard/select-target-state-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="stateFormGroup" (ngSubmit)="save()">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>dashboard.select-state</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html b/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html
index 795bde21c1..062f1a6662 100644
--- a/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="add()" style="min-width: 400px; width: 750px;" [style]="entitiesTableConfig.addDialogStyle">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>{{ translations.add }}</h2>
     <span class="flex-1"></span>
     <div [tb-help]="helpLinkId()"></div>
diff --git a/ui-ngx/src/app/modules/home/components/event/event-content-dialog.component.html b/ui-ngx/src/app/modules/home/components/event/event-content-dialog.component.html
index f24d348444..2edadfbb6d 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-content-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/event/event-content-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar class="flex flex-row" color="primary">
+<mat-toolbar class="tb-dialog-header flex flex-row">
   <h2 translate>{{ title }}</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html
index cc86556a26..c9251be922 100644
--- a/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="complexFilterFormGroup" (ngSubmit)="save()" style="width: 1200px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>filter.complex-filter</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html
index 0cd0ea729e..b436a9d9a5 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="filterFormGroup" (ngSubmit)="save()" style="width: 700px;">
-  <mat-toolbar color="primary" class="justify-between">
+  <mat-toolbar class="tb-dialog-header justify-between">
     <h2>{{ (isAdd ? 'filter.add' : 'filter.edit') | translate }}</h2>
     <button mat-icon-button
             (click)="cancel()"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html
index 1190125501..8683ff1e8c 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="filterUserInfoFormGroup" (ngSubmit)="save()" style="width: 500px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{(data.readonly ? 'filter.filter-user-params' : 'filter.edit-filter-user-params') | translate}}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html
index 0a1fd59275..3cc55dd283 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="filtersFormGroup" (ngSubmit)="save()" style="width: 700px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ title | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html
index f7624c873f..c4543dfd22 100644
--- a/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="keyFilterFormGroup" (ngSubmit)="save()" style="width: 1200px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{(data.isAdd ? 'filter.add-key-filter' : (data.readonly ? 'filter.key-filter' : 'filter.edit-key-filter')) | translate}}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html
index f1836ae17e..9c163dc49a 100644
--- a/ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" style="width: 400px;" class="user-filter-dialog">
-  <mat-toolbar color="primary" class="justify-between">
+  <mat-toolbar class="tb-dialog-header justify-between">
     <h2>{{ filter.filter | customTranslate }}</h2>
     <button mat-icon-button
             (click)="cancel()"
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.html
index ebe3f7baef..b81091303d 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form>
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ getTitle() }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html
index de39c93a2f..962cc57478 100644
--- a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 translate>device-profile.add</h2>
   <span class="flex-1"></span>
   <div [tb-help]="'deviceProfiles'"></div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html
index c039992035..49fffd357f 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="conditionFormGroup" (ngSubmit)="save()" style="width: 900px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (readonly ? 'device-profile.alarm-rule-condition' : 'device-profile.edit-alarm-rule-condition') | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html
index 141713832f..db37be5317 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="alarmScheduleFormGroup" (ngSubmit)="save()" style="width: 900px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (readonly ? 'device-profile.schedule' : 'device-profile.edit-schedule') | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html
index 30caafd1aa..ed22f9306d 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="editDetailsFormGroup" (ngSubmit)="save()" style="width: 800px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'device-profile.edit-alarm-rule-additional-info' | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.html
index d47b4fa65c..d2743bebd2 100644
--- a/ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/asset-profile-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" style="width: 600px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (isAdd ? 'asset-profile.add' : 'asset-profile.edit' ) | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.html
index dcb15e48b8..01432d7dfc 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" style="width: 1000px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (isAdd ? 'device-profile.add' : 'device-profile.edit' ) | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.html
index 6a631c8df2..f52e912b13 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="attributeFormGroup" (ngSubmit)="save()" style="min-width: 500px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>
       {{ (readonly ? 'device-profile.lwm2m.view-attributes' : 'device-profile.lwm2m.edit-attributes') | translate : {name: name} }}
     </h2>
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-add-config-server-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-add-config-server-dialog.component.html
index a966d6197b..21201a1b59 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-add-config-server-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-bootstrap-add-config-server-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="addConfigServerFormGroup" style="width: 400px;">
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <h2 translate>device-profile.lwm2m.add-new-server-title</h2>
     <span class="flex-1"></span>
     <button mat-icon-button (click)="cancel()" type="button">
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.html
index 1f36c01fe4..acc86b15e6 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="instancesFormGroup" (ngSubmit)="add()" style="min-width: 400px;">
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <span style="font-weight: 500">{{data.objectName}}</span>&nbsp;#{{data.objectId}}
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.html
index 19ef843762..3942f87c28 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant-profile-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" style="width: 650px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (isAdd ? 'tenant-profile.add' : 'tenant-profile.edit' ) | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.html
index 370849422e..f8b359fc96 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="editDetailsFormGroup">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ title | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html b/ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html
index ffbfb48cf3..c6d05d0d83 100644
--- a/ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="relationFormGroup" (ngSubmit)="save()" style="min-width: 600px;">
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <h2>{{ (isAdd ? 'relation.add' : 'relation.edit' ) | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/resources/resources-dialog.component.html b/ui-ngx/src/app/modules/home/components/resources/resources-dialog.component.html
index a5757e7e58..91cbaff8b7 100644
--- a/ui-ngx/src/app/modules/home/components/resources/resources-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/resources/resources-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" style="width: 600px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'resource.add' | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html
index 8b0ca22543..2a83f7d1c5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="actionsSettings" style="width: 900px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ data.widgetTitle }}: {{ 'widget-config.actions' | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
index 1fc69be0a6..53ca4eb748 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="widgetActionFormGroup" (ngSubmit)="save()" style="width: 900px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (isAdd ? 'widget-config.add-action' : 'widget-config.edit-action' ) | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html
index fb1371b0c1..e05f6f678b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/dialog/embed-dashboard-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div class="dashboard-state-dialog flex flex-col" [style]="dialogStyle">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{title}}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button (click)="close()" type="button">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps-legacy/dialogs/select-entity-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/maps-legacy/dialogs/select-entity-dialog.component.html
index afc11a7633..7e0a84dc81 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps-legacy/dialogs/select-entity-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps-legacy/dialogs/select-entity-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form #addEntityForm="ngForm" [formGroup]="selectEntityFormGroup" (ngSubmit)="save()">
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <h2 translate>widgets.maps.select-entity</h2>
     <span class="flex-1"></span>
     <button mat-icon-button [matDialogClose]="null" type="button">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html
index f98ef7e8c8..fc3d97ce8f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="persistentFormGroup" (ngSubmit)="save()" style="min-width: 480px; max-width: 600px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'widgets.persistent-table.add-title' | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html
index 491cada8cd..c371e06133 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="persistentFormGroup" style="min-width: 480px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ persistentFormGroup.get('rpcId').value }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-key-config-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-key-config-dialog.component.html
index 802adb5211..94360e82af 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-key-config-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-key-config-dialog.component.html
@@ -16,12 +16,12 @@
 
 -->
 <form [formGroup]="dataKeyFormGroup" (ngSubmit)="save()" style="width: 900px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'datakey.configuration' | translate }}</h2>
     <span class="flex-1"></span>
     @if (hasAdvanced) {
       <tb-toggle-select
-        appearance="fill-invert" selectMediaBreakpoint="xs" [options]="dataKeyConfigHeaderOptions"
+        appearance="fill" selectMediaBreakpoint="xs" [options]="dataKeyConfigHeaderOptions"
         [(ngModel)]="dataKeyConfigMode" [ngModelOptions]="{ standalone: true }">
       </tb-toggle-select>
     }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.html
index 8e484c8e3d..975e71517a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" class="tb-map-data-layer-dialog" style="width: 750px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>{{dialogTitle}}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html b/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html
index 01a83e5d11..e49a08ebd3 100644
--- a/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 translate>device.add-device-text</h2>
   <span class="flex-1"></span>
   <div [tb-help]="'devices'"></div>
diff --git a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html
index c397f8b1a0..e45e2add4f 100644
--- a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="addEntitiesToCustomerFormGroup" (ngSubmit)="assign()">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ assignToCustomerTitle | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html
index 4aed4a41b8..f4365bc21b 100644
--- a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="addEntitiesToEdgeFormGroup" (ngSubmit)="assign()">
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <h2>{{ assignToEdgeTitle | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html b/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
index efa6ef3c1c..899372ba14 100644
--- a/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="assignToCustomerFormGroup" (ngSubmit)="assign()">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ assignToCustomerTitle | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/dialogs/events-dialog.component.html b/ui-ngx/src/app/modules/home/dialogs/events-dialog.component.html
index 0b337f0bd9..50d802a0cc 100644
--- a/ui-ngx/src/app/modules/home/dialogs/events-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/dialogs/events-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div class="debug-dialog-container flex flex-col xs:h-full">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ data.title | translate}}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-dialog.component.html b/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-dialog.component.html
index fc26b51e86..580dd004e0 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" style="width: 850px;max-height: 100vh">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'admin.oauth2.add-client' | translate }}</h2>
     <span class="flex-1"></span>
     <div [tb-help]="helpLinkId()"></div>
diff --git a/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html b/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
index 96975f3f70..6827d831b8 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="sendTestSmsFormGroup" style="min-width: 500px; position: relative;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>admin.send-test-sms</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/import-dashboard-file-dialog.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/import-dashboard-file-dialog.component.html
index 3286044628..3156968569 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/import-dashboard-file-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/import-dashboard-file-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="uploadFileFormGroup" (ngSubmit)="save()" style="width: 800px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'dashboard.update-new-version' | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/make-dashboard-public-dialog.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/make-dashboard-public-dialog.component.html
index e21f996584..00eb0cb3d5 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/make-dashboard-public-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/make-dashboard-public-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <div style="min-width: 400px; position: relative;">
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <h2>{{ 'dashboard.public-dashboard-title' | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html
index 691a5250cd..a4aefc8364 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <form style="width: 600px;"
       [formGroup]="dashboardCustomersFormGroup" (ngSubmit)="submit()">
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <h2>{{ titleText | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html b/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html
index 449187e220..dd1fd8b178 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 translate>{{ dialogTitle }}</h2>
   <span class="flex-1"></span>
   <!--  <div [tb-help]="'check-connectivity'"></div>-->
diff --git a/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html b/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html
index 5f679a5389..2ee604d879 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2>{{ 'device.device-credentials' | translate }}</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/edge/edge-instructions-dialog.component.html b/ui-ngx/src/app/modules/home/pages/edge/edge-instructions-dialog.component.html
index 9376ff1b3e..a1df65362f 100644
--- a/ui-ngx/src/app/modules/home/pages/edge/edge-instructions-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/edge/edge-instructions-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 translate>{{ dialogTitle }}</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-dialog.component.html b/ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-dialog.component.html
index 79bd13c8b1..00992def0b 100644
--- a/ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" style="width: 850px;max-height: 100vh;display: grid;grid-template-rows: min-content 4px minmax(auto, 1fr) min-content;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'mobile.add-application' | translate }}</h2>
     <span class="flex-1"></span>
     <div tb-help="mobileApplication"></div>
diff --git a/ui-ngx/src/app/modules/home/pages/mobile/applications/remove-app-dialog.component.html b/ui-ngx/src/app/modules/home/pages/mobile/applications/remove-app-dialog.component.html
index d02a692247..84d5da8531 100644
--- a/ui-ngx/src/app/modules/home/pages/mobile/applications/remove-app-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/mobile/applications/remove-app-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar class="justify-between" color="primary">
+<mat-toolbar class="tb-dialog-header justify-between">
   <h2 translate>mobile.delete-application</h2>
   <button mat-icon-button
           (click)="cancel()"
diff --git a/ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/add-mobile-page-dialog.component.html b/ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/add-mobile-page-dialog.component.html
index 70b3c4d7ad..188e4968cb 100644
--- a/ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/add-mobile-page-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/add-mobile-page-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary" class="justify-between">
+<mat-toolbar class="tb-dialog-header justify-between">
   <h2 translate>mobile.add-specific-page</h2>
   <button mat-icon-button
           (click)="cancel()"
diff --git a/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-app-configuration-dialog.component.html b/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-app-configuration-dialog.component.html
index b6be4742ad..f38b0cb50b 100644
--- a/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-app-configuration-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-app-configuration-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary" class="justify-between">
+<mat-toolbar class="tb-dialog-header justify-between">
   <h2 translate>mobile.configuration-dialog</h2>
   <button mat-icon-button
           (click)="close()"
diff --git a/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-dialog.component.html b/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-dialog.component.html
index 738dd372b7..0015300dac 100644
--- a/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2>{{ dialogTitle | translate }}</h2>
   <span class="flex-1"></span>
   <div tb-help="mobileBundle"></div>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.html
index 9d4a353683..5652b5e2a7 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="targetNotificationForm" class="tb-dialog-container">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (isAdd ? 'notification.add-notification-recipients-group' : 'notification.edit-notification-recipients-group') | translate }}</h2>
     <span class="flex-1"></span>
     <div tb-help="recipientNotifications"></div>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html
index cb2643d893..a30e05b15c 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2>{{ dialogTitle | translate }}</h2>
   <span class="flex-1"></span>
   <div tb-help="ruleNotifications"></div>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-error-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-error-dialog.component.html
index 1c98892b60..6c0fe68d1e 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-error-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-error-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 translate>notification.failed-send</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
index 1a0be821be..68f7dc4701 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2>{{ dialogTitle | translate }}</h2>
   <span class="flex-1"></span>
   <div tb-help="sentNotification"></div>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
index dbe49a6238..18161037a3 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2>{{ dialogTitle | translate }}</h2>
   <span class="flex-1"></span>
   <div tb-help="templateNotifications"></div>
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/add-note-dialog.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/add-note-dialog.component.html
index 33aa61d0e1..33c38208d0 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/add-note-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/add-note-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 translate>rulechain.add-note</h2>
   <span class="flex-1"></span>
   <button mat-icon-button type="button" (click)="cancel()">
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html
index 41e72a14cf..5c287cc66d 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="add()" class="dialog-container">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>rulenode.add</h2>
     <span class="flex-1">: {{ruleNode.component.name}}</span>
     <div [tb-help]="helpLinkIdForRuleNodeType()"></div>
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-link-dialog.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-link-dialog.component.html
index 4fc6469d0e..feacb5b5de 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-link-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-link-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="ruleNodeLinkFormGroup" (ngSubmit)="add()" style="width: 480px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>rulenode.add-link</h2>
     <span class="flex-1"></span>
     <div [tb-help]="'ruleEngine'"></div>
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/create-nested-rulechain-dialog.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/create-nested-rulechain-dialog.component.html
index d0b9c32b2b..4da609f98f 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/create-nested-rulechain-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/create-nested-rulechain-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="add()" style="min-width: 650px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>rulenode.create-nested-rulechain</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html
index bb0eace707..0113e49065 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar class="flex flex-row" color="primary">
+<mat-toolbar class="tb-dialog-header flex flex-row">
   <h2 translate>security.2fa.dialog.get-backup-code-title</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html
index ccf853359c..069b2c566c 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar class="flex flex-row" color="primary">
+<mat-toolbar class="tb-dialog-header flex flex-row">
   <h2 translate>security.2fa.dialog.enable-email-title</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
index a568402d99..9f1ae9d781 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar class="flex flex-row" color="primary">
+<mat-toolbar class="tb-dialog-header flex flex-row">
   <h2 translate>security.2fa.dialog.enable-sms-title</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html
index 03dfc8a112..f7ff8e034e 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar class="flex flex-row" color="primary">
+<mat-toolbar class="tb-dialog-header flex flex-row">
   <h2 translate>security.2fa.dialog.enable-totp-title</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html b/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html
index c8e1b97f5f..77e430d749 100644
--- a/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form style="min-width: 400px; position: relative;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>user.activation-link</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html b/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html
index 60ae3ad1c2..d64863c765 100644
--- a/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="add()" style="min-width: 450px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>user.add</h2>
     <span class="flex-1"></span>
     <div [tb-help]="'users'"></div>
diff --git a/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html b/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html
index 1b316cdc81..ccaec1f89e 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="saveWidgetTypeAsFormGroup" (ngSubmit)="saveAs()" style="min-width: 360px">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>{{ dialogTitle }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.html b/ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.html
index 60ecf4ea6d..b9c559ab05 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/select-widget-type-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form style="width: 800px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>widget.select-widget-type</h2>
     <span class="flex-1"></span>
     <div tb-help="widgetTypes"></div>
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-dialog.component.html b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-dialog.component.html
index c3a965b752..ee709d36cb 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="save()" style="width: 650px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>widgets-bundle.add</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/shared/components/dialog/entity-conflict-dialog/entity-conflict-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/entity-conflict-dialog/entity-conflict-dialog.component.html
index e6029c39ba..73455d26e9 100644
--- a/ui-ngx/src/app/shared/components/dialog/entity-conflict-dialog/entity-conflict-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/entity-conflict-dialog/entity-conflict-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2 class="main-label">
     {{ data.message }}
   </h2>
diff --git a/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html
index 289cf0f05b..6449ff9c50 100644
--- a/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="jsonFormGroup" (ngSubmit)="add()" style="min-width: 400px;" class="h-full">
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <h2>{{ title }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html
index 0878443cfa..ac6976d754 100644
--- a/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <form class="tb-node-script-test-dialog"
       [formGroup]="nodeScriptTestFormGroup" (ngSubmit)="save()">
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <h2>{{ 'rulenode.test-script-function' | translate }} ({{ (scriptLang === scriptLanguage.JS ? 'rulenode.script-lang-java-script' : 'rulenode.script-lang-tbel') | translate }})</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/shared/components/image/embed-image-dialog.component.html b/ui-ngx/src/app/shared/components/image/embed-image-dialog.component.html
index c5a1a749ef..9016b2c8dd 100644
--- a/ui-ngx/src/app/shared/components/image/embed-image-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/image/embed-image-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2>{{ 'image.embed-image' | translate }}</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/shared/components/image/image-dialog.component.html b/ui-ngx/src/app/shared/components/image/image-dialog.component.html
index 0fe1a4be59..d837f4f410 100644
--- a/ui-ngx/src/app/shared/components/image/image-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/image/image-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form class="tb-image-dialog" [formGroup]="imageFormGroup">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ (readonly ? 'image.image-details' : 'image.edit-image') | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html b/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html
index 3e7b85268a..077df3c0d2 100644
--- a/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="uploadImageFormGroup" (ngSubmit)="upload()" style="width: 560px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ ( uploadImage ? (isScada ? 'scada.upload-symbol' : 'image.upload-image') : (isScada ? 'scada.update-symbol' : 'image.update-image') ) | translate }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
index 272fa6239c..c3b638be7a 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="timewindowForm" mat-dialog-content  class="tb-timewindow-form">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2>{{ 'timewindow.timewindow-settings' | translate }}</h2>
     <span class="flex-1"></span>
     <div tb-help="timewindowSettings"></div>
diff --git a/ui-ngx/src/app/shared/import-export/export-resource-dialog.component.html b/ui-ngx/src/app/shared/import-export/export-resource-dialog.component.html
index 7bd900f1cf..f13bb50fa2 100644
--- a/ui-ngx/src/app/shared/import-export/export-resource-dialog.component.html
+++ b/ui-ngx/src/app/shared/import-export/export-resource-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
+<mat-toolbar class="tb-dialog-header">
   <h2>{{ title | translate }}</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
diff --git a/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html b/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html
index bf0f0401c8..72f5d94a56 100644
--- a/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html
+++ b/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form>
-  <mat-toolbar class="flex flex-row" color="primary">
+  <mat-toolbar class="tb-dialog-header flex flex-row">
     <h2 translate>{{ importTitle }}</h2>
     <span class="flex-1"></span>
     <div [tb-help]="'entitiesImport'"></div>
diff --git a/ui-ngx/src/app/shared/import-export/import-dialog.component.html b/ui-ngx/src/app/shared/import-export/import-dialog.component.html
index ec6ed1ff6b..12f20e27b7 100644
--- a/ui-ngx/src/app/shared/import-export/import-dialog.component.html
+++ b/ui-ngx/src/app/shared/import-export/import-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="importFormGroup" (ngSubmit)="importFromJson()" style="width: 500px;">
-  <mat-toolbar color="primary">
+  <mat-toolbar class="tb-dialog-header">
     <h2 translate>{{ importTitle }}</h2>
     <span class="flex-1"></span>
     <button mat-icon-button
diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss
index 6876e564ce..8d22d77393 100644
--- a/ui-ngx/src/styles.scss
+++ b/ui-ngx/src/styles.scss
@@ -1078,6 +1078,10 @@ pre.tb-highlight {
     }
   }
 
+  .tb-dialog-header {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  }
+
   .tb-dialog {
     .mat-mdc-dialog-container {
       padding: 0;