From 44852fb5d5fcdb61491c9349e59ac32b13d6e581 Mon Sep 17 00:00:00 2001
From: Scott Aslan <scottyaslan@users.noreply.github.com>
Date: Thu, 11 Apr 2024 11:39:37 -0400
Subject: [PATCH] [NIFI-13022] rename semantic color classes to avoid conflict
 with angular material class names (#8628)

* [NIFI-13022] rename semantic color classes to avoid conflict with angular material class names

* remove need for !important

* rename default material sementic color classes

This closes #8628
---
 .../feature/access-policies.component.html    |   2 +-
 ...add-tenant-to-policy-dialog.component.html |   4 +-
 .../policy-table/policy-table.component.html  |   7 +-
 ...onent-access-policies.component-theme.scss |  33 ---
 .../component-access-policies.component.html  |  16 +-
 .../global-access-policies.component.html     |   8 +-
 .../feature/bulletins.component.html          |   2 +-
 .../bulletin-board.component.html             |   7 +-
 .../counters/feature/counters.component.html  |   2 +-
 .../counter-listing.component.html            |   4 +-
 .../counter-table.component.html              |   4 +-
 .../flow-configuration-history.component.html |   2 +-
 .../action-details.component.html             |   6 +-
 ...nfiguration-history-listing.component.html |   6 +-
 ...configuration-history-table.component.html |   2 +-
 .../service/canvas-utils.service.ts           |   2 +-
 .../service/manager/port-manager.service.ts   |   4 +-
 .../manager/process-group-manager.service.ts  |  24 +-
 .../manager/processor-manager.service.ts      |   2 +-
 .../remote-process-group-manager.service.ts   |   2 +-
 .../ui/canvas/_canvas.component-theme.scss    |   4 -
 .../footer/_footer.component-theme.scss       |   2 -
 .../ui/canvas/footer/footer.component.html    |   2 +-
 .../_navigation-control.component-theme.scss  |   9 +-
 .../navigation-control.component.html         |  14 +-
 .../_operation-control.component-theme.scss   |  21 +-
 .../operation-control.component.html          |  27 ++-
 .../_flow-status.component-theme.scss         |   5 -
 .../flow-status/flow-status.component.html    |  34 +--
 .../flow-status/flow-status.component.ts      |  12 +-
 .../search/_search.component-theme.scss       |   3 -
 .../header/search/search.component.html       |   4 +-
 .../destination-funnel.component.html         |   4 +-
 .../destination-output-port.component.html    |   4 +-
 .../destination-process-group.component.html  |   2 +-
 .../destination-processor.component.html      |   4 +-
 ...nation-remote-process-group.component.html |   2 +-
 .../_prioritizers.component-theme.scss        |   2 -
 .../prioritizers/prioritizers.component.html  |   9 +-
 .../source-funnel.component.html              |   4 +-
 .../source-input-port.component.html          |   4 +-
 .../source-process-group.component.html       |   2 +-
 .../source-processor.component.html           |   4 +-
 ...source-remote-process-group.component.html |   2 +-
 .../change-version-dialog.html                |  10 +-
 .../change-version-progress-dialog.html       |   6 +-
 .../import-from-registry.component.html       |   2 +-
 .../local-changes-table.html                  |   7 +-
 .../save-version-dialog.component.html        |   8 +-
 .../create-process-group.component.html       |   4 +-
 .../edit-processor.component.html             |   6 +-
 .../relationship-settings.component.html      |   2 +-
 .../run-duration-slider.component.html        |   4 +-
 .../edit-remote-process-group.component.html  |   4 +-
 .../controller-services.component.html        |   8 +-
 .../edit-remote-port.component.html           |   2 +-
 .../manage-remote-ports.component.html        |  16 +-
 .../ui/login-form/login-form.component.html   |   8 +-
 .../feature/parameter-contexts.component.html |   2 +-
 .../edit-parameter-context.component.html     |   8 +-
 ...r-context-inheritance.component-theme.scss |   1 -
 ...rameter-context-inheritance.component.html |   6 +-
 .../parameter-context-listing.component.html  |   6 +-
 .../parameter-context-table.component.html    |  16 +-
 .../parameter-table.component.html            |  20 +-
 .../process-group-references.component.html   |   2 +-
 .../feature/provenance.component.html         |   2 +-
 .../lineage/lineage.component.ts              |   2 +-
 .../provenance-event-table.component.html     |  20 +-
 .../flowfile-dialog.component.html            |  18 +-
 .../flowfile-table.component.html             |  12 +-
 .../queue-listing.component.html              |   4 +-
 .../settings/feature/settings.component.html  |   2 +-
 .../edit-flow-analysis-rule.component.html    |   6 +-
 .../flow-analysis-rule-table.component.html   |  30 ++-
 .../flow-analysis-rule-table.component.ts     |   2 +-
 .../flow-analysis-rules.component.html        |   6 +-
 ...agement-controller-services.component.html |   6 +-
 .../edit-parameter-provider.component.html    |   6 +-
 ...rameter-provider-parameters.component.html |  46 ++--
 .../parameter-groups-table.component.html     |   4 +-
 ...ameter-providers-references.component.html |   6 +-
 .../parameter-providers-table.component.html  |  16 +-
 .../parameter-providers.component.html        |   5 +-
 .../edit-registry-client.component.html       |   4 +-
 .../registry-client-table.component.html      |  12 +-
 .../registry-clients.component.html           |   6 +-
 .../edit-reporting-task.component.html        |   6 +-
 .../reporting-task-table.component.html       |  37 +++-
 .../reporting-task-table.component.ts         |   2 +-
 .../reporting-tasks.component.html            |   6 +-
 .../summary/feature/summary.component.html    |   2 +-
 .../cluster-summary-dialog.component.html     |   4 +-
 .../port-cluster-table.component.ts           |   2 +-
 .../processor-cluster-table.component.ts      |   2 +-
 ...e-process-group-cluster-table.component.ts |   2 +-
 .../port-status-table.component.html          |   8 +-
 .../port-status-table.component.ts            |   2 +-
 .../summary-table-filter.component.html       |   2 +-
 .../connection-status-table.component.html    |  10 +-
 .../process-group-status-table.component.html |  12 +-
 ...rocessor-status-table.component-theme.scss |   2 -
 .../processor-status-table.component.html     |  14 +-
 .../processor-status-table.component.ts       |   2 +-
 ...-process-group-status-table.component.html |  10 +-
 ...te-process-group-status-table.component.ts |   2 +-
 .../pages/users/feature/users.component.html  |   2 +-
 .../user-access-policies.component.html       |   6 +-
 .../user-listing/user-listing.component.html  |   4 +-
 .../user-table/user-table.component.html      |  15 +-
 .../component-context.component.html          |   6 +-
 .../component-state.component.html            |   8 +-
 .../_context-menu.component-theme.scss        |   8 -
 .../context-menu/context-menu.component.html  |  12 +-
 ...ntroller-service-references.component.html |  18 +-
 ...controller-service-references.component.ts |   4 +-
 .../controller-service-table.component.html   |  18 +-
 .../controller-service-table.component.ts     |   4 +-
 .../disable-controller-service.component.html |  16 +-
 .../edit-controller-service.component.html    |   8 +-
 .../enable-controller-service.component.html  |  14 +-
 .../_extension-creation.component-theme.scss  |  34 ---
 .../extension-creation.component.html         |   6 +-
 .../_navigation.component-theme.scss          |  15 +-
 .../navigation/navigation.component.html      |  32 +--
 .../parameter-references.component.html       |  18 +-
 .../parameter-references.component.ts         |   4 +-
 .../property-table.component.html             |  19 +-
 .../provenance-event-dialog.component.html    |  24 +-
 .../ui/common/spinner/spinner.component.ts    |   2 +-
 .../status-history.component.html             |  14 +-
 .../system-diagnostics-dialog.component.html  |  38 ++--
 .../src/main/nifi/src/assets/styles/_app.scss | 207 ++++++++----------
 .../src/assets/styles/_listing-table.scss     |  10 +-
 .../main/nifi/src/assets/themes/material.scss |   2 +-
 .../src/main/nifi/src/styles.scss             |  18 +-
 136 files changed, 674 insertions(+), 721 deletions(-)
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/component-access-policies/_component-access-policies.component-theme.scss
 delete mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/_extension-creation.component-theme.scss

diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/access-policies.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/access-policies.component.html
index 46839dc1d7..e0d211888d 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/access-policies.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/access-policies.component.html
@@ -20,7 +20,7 @@
         <navigation></navigation>
     </header>
     <div class="px-5">
-        <h3 class="text-xl bold mat-primary">Access Policies</h3>
+        <h3 class="text-xl bold primary-color">Access Policies</h3>
     </div>
     <div class="px-5 flex-1">
         <router-outlet></router-outlet>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/add-tenant-to-policy-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/add-tenant-to-policy-dialog.component.html
index ad87780129..69a1973ce1 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/add-tenant-to-policy-dialog.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/add-tenant-to-policy-dialog.component.html
@@ -36,14 +36,14 @@
                 <mat-selection-list formControlName="userGroups" class="border">
                     @for (userGroup of filteredUserGroups; track userGroup) {
                         <mat-list-option togglePosition="before" [value]="userGroup.id">
-                            <i class="fa fa-users mat-primary mr-3"></i>{{ userGroup.component.identity }}
+                            <i class="fa fa-users primary-color mr-3"></i>{{ userGroup.component.identity }}
                         </mat-list-option>
                     }
                 </mat-selection-list>
             </div>
         }
         @if (filteredUsers.length === 0 && filteredUserGroups.length === 0) {
-            <div class="mat-accent font-medium">All users and groups are assigned to this policy.</div>
+            <div class="accent-color font-medium">All users and groups are assigned to this policy.</div>
         }
     </mat-dialog-content>
     @if ({ value: (saving$ | async)! }; as saving) {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/policy-table/policy-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/policy-table/policy-table.component.html
index 60fe975412..c515f49795 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/policy-table/policy-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/policy-table/policy-table.component.html
@@ -29,7 +29,7 @@
                 <th mat-header-cell *matHeaderCellDef mat-sort-header>User</th>
                 <td mat-cell *matCellDef="let item" class="items-center">
                     @if (item.tenantType === 'userGroup') {
-                        <i class="fa fa-users mr-3"></i>
+                        <i class="fa fa-users primary-color mr-3"></i>
                     }
                     {{ item.user }}
                 </td>
@@ -40,7 +40,10 @@
                 <td mat-cell *matCellDef="let item">
                     <div class="flex items-center gap-x-3">
                         @if (canRemove()) {
-                            <div class="pointer fa fa-trash" title="Remove" (click)="removeClicked(item)"></div>
+                            <div
+                                class="pointer fa fa-trash primary-color"
+                                title="Remove"
+                                (click)="removeClicked(item)"></div>
                         }
                     </div>
                 </td>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/component-access-policies/_component-access-policies.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/component-access-policies/_component-access-policies.component-theme.scss
deleted file mode 100644
index dccef6865d..0000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/component-access-policies/_component-access-policies.component-theme.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-/*!
- *  Licensed to the Apache Software Foundation (ASF) under one or more
- *  contributor license agreements.  See the NOTICE file distributed with
- *  this work for additional information regarding copyright ownership.
- *  The ASF licenses this file to You under the Apache License, Version 2.0
- *  (the "License"); you may not use this file except in compliance with
- *  the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- *  Unless required by applicable law or agreed to in writing, software
- *  distributed under the License is distributed on an "AS IS" BASIS,
- *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *  See the License for the specific language governing permissions and
- *  limitations under the License.
- */
-
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../../../../../assets/utils.scss' as utils;
-
-@mixin generate-theme($nifi-theme) {
-    // Get the color config from the theme.
-    $nifi-theme-color-config: mat.get-color-config($nifi-theme);
-
-    $on-surface: utils.get-on-surface($nifi-theme-color-config);
-
-    .component-access-policies {
-        .operation-context-name {
-            color: $on-surface;
-        }
-    }
-}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/component-access-policies/component-access-policies.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/component-access-policies/component-access-policies.component.html
index 8c706bde44..e32c4d5f87 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/component-access-policies/component-access-policies.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/component-access-policies/component-access-policies.component.html
@@ -24,7 +24,7 @@
         @if (policyComponentState$ | async; as policyComponentState) {
             @if (flowConfiguration$ | async; as flowConfiguration) {
                 <div class="component-access-policies flex flex-col h-full gap-y-2">
-                    <div class="mat-accent font-medium">
+                    <div class="accent-color font-medium">
                         <div class="mb-2">
                             @switch (accessPolicyState.policyStatus) {
                                 @case (PolicyStatus.NotFound) {
@@ -57,11 +57,13 @@
                             <div class="flex gap-x-2">
                                 <div class="flex gap-x-1 -mt-2">
                                     <div class="operation-context-logo flex flex-col">
-                                        <i class="mat-accent icon" [class]="getContextIcon()"></i>
+                                        <i class="accent-color icon" [class]="getContextIcon()"></i>
                                     </div>
                                     <div class="flex flex-col">
-                                        <div class="operation-context-name">{{ policyComponentState.label }}</div>
-                                        <div class="operation-context-type mat-primary">
+                                        <div class="operation-context-name on-surface-default">
+                                            {{ policyComponentState.label }}
+                                        </div>
+                                        <div class="operation-context-type primary-color">
                                             {{ getContextType() }}
                                         </div>
                                     </div>
@@ -93,6 +95,7 @@
                             <div class="flex gap-x-2">
                                 <button
                                     mat-icon-button
+                                    color="primary"
                                     title="Add users/groups to this policy"
                                     [disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found"
                                     (click)="addTenantToPolicy()">
@@ -100,6 +103,7 @@
                                 </button>
                                 <button
                                     mat-icon-button
+                                    color="primary"
                                     title="Delete this policy"
                                     [disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found"
                                     (click)="deletePolicy()">
@@ -121,11 +125,11 @@
                     }
                     <div class="flex justify-between">
                         <div class="refresh-container flex items-center gap-x-2">
-                            <button mat-icon-button (click)="refreshGlobalAccessPolicy()">
+                            <button mat-icon-button color="primary" (click)="refreshGlobalAccessPolicy()">
                                 <i class="fa fa-refresh" [class.fa-spin]="accessPolicyState.status === 'loading'"></i>
                             </button>
                             <div>Last updated:</div>
-                            <div class="mat-accent font-medium">
+                            <div class="accent-color font-medium">
                                 {{ accessPolicyState.loadedTimestamp }}
                             </div>
                         </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/global-access-policies/global-access-policies.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/global-access-policies/global-access-policies.component.html
index 751d17d645..77f8a8bc02 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/global-access-policies/global-access-policies.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/global-access-policies/global-access-policies.component.html
@@ -23,7 +23,7 @@
     } @else {
         @if (flowConfiguration$ | async; as flowConfiguration) {
             <div class="global-access-policies flex flex-col h-full gap-y-2">
-                <div class="mat-accent font-medium">
+                <div class="accent-color font-medium">
                     <div class="mb-2">
                         @switch (accessPolicyState.policyStatus) {
                             @case (PolicyStatus.NotFound) {
@@ -109,6 +109,7 @@
                         <div class="flex gap-x-2 items-center">
                             <button
                                 mat-icon-button
+                                color="primary"
                                 title="Add users/groups to this policy"
                                 [disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found"
                                 (click)="addTenantToPolicy()">
@@ -116,6 +117,7 @@
                             </button>
                             <button
                                 mat-icon-button
+                                color="primary"
                                 title="Delete this policy"
                                 [disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found"
                                 (click)="deletePolicy()">
@@ -137,11 +139,11 @@
                 }
                 <div class="flex justify-between">
                     <div class="refresh-container flex items-center gap-x-2">
-                        <button mat-icon-button (click)="refreshGlobalAccessPolicy()">
+                        <button mat-icon-button color="primary" (click)="refreshGlobalAccessPolicy()">
                             <i class="fa fa-refresh" [class.fa-spin]="accessPolicyState.status === 'loading'"></i>
                         </button>
                         <div>Last updated:</div>
-                        <div class="mat-accent font-medium">
+                        <div class="accent-color font-medium">
                             {{ accessPolicyState.loadedTimestamp }}
                         </div>
                     </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/bulletins.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/bulletins.component.html
index ae982b948c..dc47c52572 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/bulletins.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/bulletins.component.html
@@ -20,7 +20,7 @@
         <navigation></navigation>
     </header>
     <div class="px-5 flex-1 flex flex-col">
-        <h3 class="text-xl bold mat-primary">NiFi Bulletin Board</h3>
+        <h3 class="text-xl bold primary-color">NiFi Bulletin Board</h3>
         <bulletin-board class="flex-1"></bulletin-board>
     </div>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board.component.html
index dd13917d86..634734e00b 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board.component.html
@@ -34,11 +34,14 @@
                             >Auto-refresh</mat-slide-toggle
                         >
                     </div>
-                    <button mat-icon-button (click)="refreshBulletinBoard(bulletinBoardState.lastBulletinId)">
+                    <button
+                        mat-icon-button
+                        color="primary"
+                        (click)="refreshBulletinBoard(bulletinBoardState.lastBulletinId)">
                         <i class="fa fa-refresh" [class.fa-spin]="bulletinBoardState.status === 'loading'"></i>
                     </button>
                     <div>Last updated:</div>
-                    <div class="mat-accent font-medium">
+                    <div class="accent-color font-medium">
                         {{ bulletinBoardState.loadedTimestamp }}
                     </div>
                 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/counters.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/counters.component.html
index 44c2c316e1..0d901ec5c8 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/counters.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/counters.component.html
@@ -20,7 +20,7 @@
         <navigation></navigation>
     </header>
     <div class="px-5 flex-1 flex flex-col">
-        <h3 class="text-xl bold mat-primary">NiFi Counters</h3>
+        <h3 class="text-xl bold primary-color">NiFi Counters</h3>
         <counter-listing class="flex-1"></counter-listing>
     </div>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/ui/counter-listing/counter-listing.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/ui/counter-listing/counter-listing.component.html
index c6401a2d99..2720d7b7ee 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/ui/counter-listing/counter-listing.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/ui/counter-listing/counter-listing.component.html
@@ -32,11 +32,11 @@
             }
             <div class="flex justify-between">
                 <div class="refresh-container flex items-center gap-x-2">
-                    <button mat-icon-button (click)="refreshCounterListing()">
+                    <button mat-icon-button color="primary" (click)="refreshCounterListing()">
                         <i class="fa fa-refresh" [class.fa-spin]="counterListingState.status === 'loading'"></i>
                     </button>
                     <div>Last updated:</div>
-                    <div class="mat-accent font-medium">
+                    <div class="accent-color font-medium">
                         {{ counterListingState.loadedTimestamp }}
                     </div>
                 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/ui/counter-listing/counter-table/counter-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/ui/counter-listing/counter-table/counter-table.component.html
index f5cf411edd..6d3424f6cb 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/ui/counter-listing/counter-table/counter-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/ui/counter-listing/counter-table/counter-table.component.html
@@ -16,7 +16,7 @@
 -->
 <div class="counter-table h-full flex flex-col">
     <div class="counter-table-filter-container">
-        <div class="mat-accent font-medium">Displaying {{ filteredCount }} of {{ totalCount }}</div>
+        <div class="accent-color font-medium">Displaying {{ filteredCount }} of {{ totalCount }}</div>
         <form [formGroup]="filterForm">
             <div class="flex pt-2">
                 <div class="mr-2">
@@ -77,7 +77,7 @@
                         <div class="flex items-center gap-x-3">
                             @if (canModifyCounters) {
                                 <div
-                                    class="pointer fa fa-undo"
+                                    class="pointer fa fa-undo primary-color"
                                     title="Reset Counter"
                                     (click)="resetClicked(item, $event)"></div>
                             }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/feature/flow-configuration-history.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/feature/flow-configuration-history.component.html
index 94a8c1b9d0..b597529906 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/feature/flow-configuration-history.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/feature/flow-configuration-history.component.html
@@ -20,7 +20,7 @@
         <navigation></navigation>
     </header>
     <div class="px-5 flex-1 flex flex-col">
-        <h3 class="text-xl bold mat-primary">Flow Configuration History</h3>
+        <h3 class="text-xl bold primary-color">Flow Configuration History</h3>
         <flow-configuration-history-listing class="flex-1"></flow-configuration-history-listing>
     </div>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/action-details/action-details.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/action-details/action-details.component.html
index 78477bc912..d975353a11 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/action-details/action-details.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/action-details/action-details.component.html
@@ -22,7 +22,7 @@
             <div class="panel-content flex flex-col h-full w-full gap-y-4">
                 <div>
                     <div>Id</div>
-                    <div class="mat-accent font-medium">{{ actionEntity.sourceId }}</div>
+                    <div class="accent-color font-medium">{{ actionEntity.sourceId }}</div>
                 </div>
 
                 @if (actionEntity.action; as action) {
@@ -197,9 +197,9 @@
                         <div class="unset nifi-surface-default">Empty string set</div>
                     } @else {
                         @if (title == null) {
-                            <div class="mat-accent font-medium">{{ value }}</div>
+                            <div class="accent-color font-medium">{{ value }}</div>
                         } @else {
-                            <div class="mat-accent font-medium" [title]="title">
+                            <div class="accent-color font-medium" [title]="title">
                                 {{ value }}
                             </div>
                         }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-listing.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-listing.component.html
index 823eb23833..ab130b8092 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-listing.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-listing.component.html
@@ -93,7 +93,7 @@
                 </div>
                 @if ((currentUser$ | async)?.controllerPermissions?.canWrite) {
                     <div class="mt-4">
-                        <button mat-icon-button (click)="purgeHistoryClicked()">
+                        <button mat-icon-button color="primary" (click)="purgeHistoryClicked()">
                             <i class="fa fa-eraser"></i>
                         </button>
                     </div>
@@ -111,11 +111,11 @@
 
             <div class="flex justify-between align-middle">
                 <div class="refresh-container flex items-center gap-x-2">
-                    <button mat-icon-button (click)="refresh()">
+                    <button mat-icon-button color="primary" (click)="refresh()">
                         <i class="fa fa-refresh" [class.fa-spin]="state.status === 'loading'"></i>
                     </button>
                     <div>Last updated:</div>
-                    <div class="mat-accent font-medium">{{ state.loadedTimestamp }}</div>
+                    <div class="accent-color font-medium">{{ state.loadedTimestamp }}</div>
                 </div>
 
                 <div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-table/flow-configuration-history-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-table/flow-configuration-history-table.component.html
index 50e6381b92..e9e8b664d8 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-table/flow-configuration-history-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-table/flow-configuration-history-table.component.html
@@ -32,7 +32,7 @@
                         <div class="flex items-center gap-x-3">
                             @if (canRead(item)) {
                                 <div
-                                    class="pointer fa fa-info-circle"
+                                    class="pointer fa fa-info-circle primary-color"
                                     title="View Details"
                                     (click)="moreDetails(item)"></div>
                             }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts
index dbb8522542..dd838697ed 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts
@@ -1265,7 +1265,7 @@ export class CanvasUtils {
                     if (terminatedThreads > 0) {
                         return `active-thread-count-icon mat-warn`;
                     } else {
-                        return `active-thread-count-icon mat-primary`;
+                        return `active-thread-count-icon primary-color`;
                     }
                 })
                 .style('display', 'block')
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.ts
index 10af874e2b..553c516994 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.ts
@@ -386,7 +386,7 @@ export class PortManager {
         updated
             .select('text.run-status-icon')
             .attr('class', function (d: any) {
-                let clazz = 'mat-primary';
+                let clazz = 'primary-color';
 
                 if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
                     clazz = 'invalid';
@@ -452,7 +452,7 @@ export class PortManager {
             .classed('transmitting nifi-success-default', function (d: any) {
                 return d.status.transmitting === true;
             })
-            .classed('not-transmitting', function (d: any) {
+            .classed('not-transmitting primary-color', function (d: any) {
                 return d.status.transmitting !== true;
             });
 
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts
index 007204cda1..8883e49119 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts
@@ -738,7 +738,7 @@ export class ProcessGroupManager {
                     .classed('nifi-success-default', function (d: any) {
                         return d.permissions.canRead && d.activeRemotePortCount > 0;
                     })
-                    .classed('zero', function (d: any) {
+                    .classed('zero primary-color-lighter', function (d: any) {
                         return d.permissions.canRead && d.activeRemotePortCount === 0;
                     });
                 const transmittingCount = details
@@ -759,10 +759,10 @@ export class ProcessGroupManager {
                 // update not transmitting
                 const notTransmitting = details
                     .select('text.process-group-not-transmitting')
-                    .classed('not-transmitting', function (d: any) {
+                    .classed('not-transmitting primary-color', function (d: any) {
                         return d.permissions.canRead && d.inactiveRemotePortCount > 0;
                     })
-                    .classed('zero', function (d: any) {
+                    .classed('zero primary-color-lighter', function (d: any) {
                         return d.permissions.canRead && d.inactiveRemotePortCount === 0;
                     })
                     .attr('x', function () {
@@ -794,7 +794,7 @@ export class ProcessGroupManager {
                     .classed('nifi-success-lighter', function (d: any) {
                         return d.permissions.canRead && d.component.runningCount > 0;
                     })
-                    .classed('zero', function (d: any) {
+                    .classed('zero primary-color-lighter', function (d: any) {
                         return d.permissions.canRead && d.component.runningCount === 0;
                     })
                     .attr('x', function () {
@@ -826,7 +826,7 @@ export class ProcessGroupManager {
                     .classed('nifi-warn-lighter', function (d: any) {
                         return d.permissions.canRead && d.component.stoppedCount > 0;
                     })
-                    .classed('zero', function (d: any) {
+                    .classed('zero primary-color-lighter', function (d: any) {
                         return d.permissions.canRead && d.component.stoppedCount === 0;
                     })
                     .attr('x', function () {
@@ -858,7 +858,7 @@ export class ProcessGroupManager {
                     .classed('invalid', function (d: any) {
                         return d.permissions.canRead && d.component.invalidCount > 0;
                     })
-                    .classed('zero', function (d: any) {
+                    .classed('zero primary-color-lighter', function (d: any) {
                         return d.permissions.canRead && d.component.invalidCount === 0;
                     })
                     .attr('x', function () {
@@ -890,7 +890,7 @@ export class ProcessGroupManager {
                     .classed('disabled', function (d: any) {
                         return d.permissions.canRead && d.component.disabledCount > 0;
                     })
-                    .classed('zero', function (d: any) {
+                    .classed('zero primary-color-lighter', function (d: any) {
                         return d.permissions.canRead && d.component.disabledCount === 0;
                     })
                     .attr('x', function () {
@@ -922,7 +922,7 @@ export class ProcessGroupManager {
                     .classed('nifi-success-default', function (d: any) {
                         return d.permissions.canRead && d.component.upToDateCount > 0;
                     })
-                    .classed('zero', function (d: any) {
+                    .classed('zero primary-color-lighter', function (d: any) {
                         return d.permissions.canRead && d.component.upToDateCount === 0;
                     });
                 const upToDateCount = details
@@ -946,7 +946,7 @@ export class ProcessGroupManager {
                     .classed('nifi-surface-default', function (d: any) {
                         return d.permissions.canRead && d.component.locallyModifiedCount > 0;
                     })
-                    .classed('zero', function (d: any) {
+                    .classed('zero primary-color-lighter', function (d: any) {
                         return d.permissions.canRead && d.component.locallyModifiedCount === 0;
                     })
                     .attr('x', function () {
@@ -978,7 +978,7 @@ export class ProcessGroupManager {
                     .classed('nifi-warn-lighter', function (d: any) {
                         return d.permissions.canRead && d.component.staleCount > 0;
                     })
-                    .classed('zero', function (d: any) {
+                    .classed('zero primary-color-lighter', function (d: any) {
                         return d.permissions.canRead && d.component.staleCount === 0;
                     })
                     .attr('x', function () {
@@ -1010,7 +1010,7 @@ export class ProcessGroupManager {
                     .classed('nifi-warn-lighter', function (d: any) {
                         return d.permissions.canRead && d.component.locallyModifiedAndStaleCount > 0;
                     })
-                    .classed('zero', function (d: any) {
+                    .classed('zero primary-color-lighter', function (d: any) {
                         return d.permissions.canRead && d.component.locallyModifiedAndStaleCount === 0;
                     })
                     .attr('x', function () {
@@ -1044,7 +1044,7 @@ export class ProcessGroupManager {
                     .classed('nifi-surface-default', function (d: any) {
                         return d.permissions.canRead && d.component.syncFailureCount > 0;
                     })
-                    .classed('zero', function (d: any) {
+                    .classed('zero primary-color-lighter', function (d: any) {
                         return d.permissions.canRead && d.component.syncFailureCount === 0;
                     })
                     .attr('x', function () {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts
index dc05a35530..6f293fe89a 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts
@@ -670,7 +670,7 @@ export class ProcessorManager {
         updated
             .select('text.run-status-icon')
             .attr('class', function (d: any) {
-                let clazz = 'mat-primary';
+                let clazz = 'primary-color';
 
                 if (d.status.aggregateSnapshot.runStatus === 'Validating') {
                     clazz = 'validating nifi-surface-default';
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/remote-process-group-manager.service.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/remote-process-group-manager.service.ts
index 69e5cd58f5..343628f52e 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/remote-process-group-manager.service.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/remote-process-group-manager.service.ts
@@ -616,7 +616,7 @@ export class RemoteProcessGroupManager {
             .classed('transmitting nifi-success-default', function (d: any) {
                 return !self.hasIssues(d) && d.status.transmissionStatus === 'Transmitting';
             })
-            .classed('not-transmitting', function (d: any) {
+            .classed('not-transmitting primary-color', function (d: any) {
                 return !self.hasIssues(d) && d.status.transmissionStatus !== 'Transmitting';
             })
             .each(function (this: any, d: any) {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
index 4db62a0826..066c78eba4 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
@@ -441,10 +441,6 @@
             stroke: $nifi-theme-success-palette-A700;
         }
 
-        text.process-group-contents-icon {
-            fill: $material-theme-primary-palette-default;
-        }
-
         /* remote process group */
 
         rect.remote-process-group-stats-border {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss
index 9a84ed3e99..8a72fa993b 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss
@@ -29,13 +29,11 @@
     // Get hues from palette
     $nifi-theme-surface-palette-A200: mat.get-color-from-palette($nifi-theme-surface-palette, 'A200');
     $surface: utils.get-surface($nifi-theme-color-config);
-    $on-surface: utils.get-on-surface($nifi-theme-color-config);
     $on-surface-lighter: utils.get-on-surface($nifi-theme-color-config, lighter);
 
     .breadcrumb-container {
         box-shadow: 0 1px 6px $nifi-theme-surface-palette-A200;
         background-color: $surface;
         border-top: 1px solid $on-surface-lighter;
-        color: $on-surface;
     }
 }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/footer.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/footer.component.html
index ad39551472..c09de72fa9 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/footer.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/footer.component.html
@@ -16,7 +16,7 @@
   -->
 
 <footer>
-    <div class="breadcrumb-container">
+    <div class="breadcrumb-container on-surface-default">
         <breadcrumbs
             [entity]="(breadcrumbs$ | async)!"
             [currentProcessGroupId]="(currentProcessGroupId$ | async)!"></breadcrumbs>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/_navigation-control.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/_navigation-control.component-theme.scss
index bab12e30c1..1291291c80 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/_navigation-control.component-theme.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/_navigation-control.component-theme.scss
@@ -19,9 +19,8 @@
 @use '@angular/material' as mat;
 @use '../../../../../../../assets/utils.scss' as utils;
 
-@mixin generate-theme($material-theme, $nifi-theme) {
+@mixin generate-theme($nifi-theme) {
     // Get the color config from the theme.
-    $material-theme-color-config: mat.get-color-config($material-theme);
     $nifi-theme-color-config: mat.get-color-config($nifi-theme);
 
     // Get the color palette from the color-config.
@@ -29,7 +28,6 @@
 
     // Get hues from palette
     $surface: utils.get-surface($nifi-theme-color-config);
-    $surface-darker: utils.get-surface($nifi-theme-color-config, darker);
     $surface-highlight: utils.get-on-surface($nifi-theme-color-config, highlight);
     $on-surface-lighter: utils.get-on-surface($nifi-theme-color-config, lighter);
     $nifi-theme-surface-palette-A200: mat.get-color-from-palette($nifi-theme-surface-palette, 'A200');
@@ -39,11 +37,6 @@
         background-color: $surface;
         border: 1px solid $on-surface-lighter;
 
-        .fa,
-        .icon {
-            color: utils.get-color-on-surface($material-theme-color-config, $surface-darker);
-        }
-
         .navigation-control-header {
             &:hover {
                 background: linear-gradient(-90deg, $surface-highlight 34px, transparent 35px);
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.html
index 4d3043afbb..739e057d2f 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.html
@@ -18,14 +18,14 @@
 <div class="navigation-control flex flex-col gap-y-2">
     <div class="navigation-control-header pointer flex justify-between" (click)="toggleCollapsed()">
         <div class="flex items-center">
-            <div class="fa fa-compass"></div>
+            <div class="fa fa-compass primary-color"></div>
             @if (!navigationCollapsed || !shouldDockWhenCollapsed) {
                 <div class="navigation-control-title">Navigation</div>
             }
         </div>
         @if (!navigationCollapsed || !shouldDockWhenCollapsed) {
             <div
-                class="fa navigation-control-expansion"
+                class="fa navigation-control-expansion primary-color"
                 [class.fa-minus-square-o]="!navigationCollapsed"
                 [class.fa-plus-square-o]="navigationCollapsed"></div>
         }
@@ -34,21 +34,21 @@
         <div class="w-72 px-2.5 pb-2.5 flex flex-col gap-y-2">
             <div class="flex justify-between">
                 <div class="flex gap-x-1">
-                    <button mat-icon-button type="button" (click)="zoomIn()">
+                    <button mat-icon-button color="primary" type="button" (click)="zoomIn()">
                         <i class="fa fa-search-plus"></i>
                     </button>
-                    <button mat-icon-button class="mr-2" type="button" (click)="zoomOut()">
+                    <button mat-icon-button color="primary" class="mr-2" type="button" (click)="zoomOut()">
                         <i class="fa fa-search-minus"></i>
                     </button>
-                    <button mat-icon-button type="button" (click)="zoomFit()">
+                    <button mat-icon-button color="primary" type="button" (click)="zoomFit()">
                         <i class="ml-1 icon icon-zoom-fit"></i>
                     </button>
-                    <button mat-icon-button type="button" (click)="zoomActual()">
+                    <button mat-icon-button color="primary" type="button" (click)="zoomActual()">
                         <i class="ml-1 icon icon-zoom-actual"></i>
                     </button>
                 </div>
                 @if (isNotRootGroup()) {
-                    <button mat-icon-button type="button" (click)="leaveProcessGroup()">
+                    <button mat-icon-button color="primary" type="button" (click)="leaveProcessGroup()">
                         <i class="fa fa-level-up"></i>
                     </button>
                 }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/_operation-control.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/_operation-control.component-theme.scss
index b1435ad7a9..69708847c3 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/_operation-control.component-theme.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/_operation-control.component-theme.scss
@@ -19,9 +19,8 @@
 @use '@angular/material' as mat;
 @use '../../../../../../../assets/utils.scss' as utils;
 
-@mixin generate-theme($material-theme, $nifi-theme) {
+@mixin generate-theme($nifi-theme) {
     // Get the color config from the theme.
-    $material-theme-color-config: mat.get-color-config($material-theme);
     $nifi-theme-color-config: mat.get-color-config($nifi-theme);
 
     // Get the color palette from the color-config.
@@ -32,7 +31,6 @@
 
     $surface: utils.get-surface($nifi-theme-color-config);
     $on-surface-lighter: utils.get-on-surface($nifi-theme-color-config, lighter);
-    $on-surface-medium: utils.get-on-surface($nifi-theme-color-config, medium);
     $on-surface-highlight: utils.get-on-surface($nifi-theme-color-config, highlight);
 
     div.operation-control {
@@ -40,27 +38,10 @@
         background-color: $surface;
         border: 1px solid $on-surface-lighter;
 
-        .fa,
-        .icon {
-            color: utils.get-color-on-surface($material-theme-color-config, $surface);
-        }
-
         .operation-control-header {
             &:hover {
                 background: linear-gradient(-90deg, $on-surface-highlight 34px, transparent 35px);
             }
         }
-
-        .operation-control-title {
-            color: $on-surface-medium;
-        }
-
-        .operation-context-name {
-            color: $on-surface-medium;
-        }
-
-        .operation-context-type {
-            color: utils.get-color-on-surface($material-theme-color-config, $surface);
-        }
     }
 }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.html
index 6a33dbb8e7..7dc0e816a1 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.html
@@ -18,14 +18,14 @@
 <div class="operation-control flex flex-col gap-y-2">
     <div class="operation-control-header pointer flex justify-between" (click)="toggleCollapsed()">
         <div class="flex items-center">
-            <div class="fa fa-hand-o-up"></div>
+            <div class="fa fa-hand-o-up primary-color"></div>
             @if (!operationCollapsed || !shouldDockWhenCollapsed) {
-                <div class="operation-control-title">Operation</div>
+                <div class="operation-control-title on-surface-medium">Operation</div>
             }
         </div>
         @if (!operationCollapsed || !shouldDockWhenCollapsed) {
             <div
-                class="fa operation-control-expansion"
+                class="fa operation-control-expansion primary-color"
                 [class.fa-minus-square-o]="!operationCollapsed"
                 [class.fa-plus-square-o]="operationCollapsed"></div>
         }
@@ -36,19 +36,22 @@
                 <div class="operation-context flex flex-col gap-y-1">
                     <div class="flex gap-x-1">
                         <div class="operation-context-logo flex flex-col">
-                            <i class="icon mat-accent" [class]="getContextIcon(selection)"></i>
+                            <i class="icon accent-color" [class]="getContextIcon(selection)"></i>
                         </div>
                         <div class="flex flex-col">
-                            <div class="operation-context-name">{{ getContextName(selection) }}</div>
-                            <div class="operation-context-type">{{ getContextType(selection) }}</div>
+                            <div class="operation-context-name on-surface-medium">{{ getContextName(selection) }}</div>
+                            <div class="operation-context-type primary-color">
+                                {{ getContextType(selection) }}
+                            </div>
                         </div>
                     </div>
-                    <div class="operation-context-id">{{ getContextId(selection) }}</div>
+                    <div class="operation-context-id accent-color">{{ getContextId(selection) }}</div>
                 </div>
                 <div class="flex flex-col gap-y-1">
                     <div class="flex gap-x-1">
                         <button
                             mat-icon-button
+                            color="primary"
                             type="button"
                             [disabled]="!canConfigure(selection)"
                             (click)="configure(selection)">
@@ -57,6 +60,7 @@
                         @if (supportsManagedAuthorizer()) {
                             <button
                                 mat-icon-button
+                                color="primary"
                                 class="mr-2"
                                 type="button"
                                 [disabled]="!canManageAccess(selection)"
@@ -66,6 +70,7 @@
                         }
                         <button
                             mat-icon-button
+                            color="primary"
                             type="button"
                             [disabled]="!canEnable(selection)"
                             (click)="enable(selection)">
@@ -73,6 +78,7 @@
                         </button>
                         <button
                             mat-icon-button
+                            color="primary"
                             class="mr-2"
                             type="button"
                             [disabled]="!canDisable(selection)"
@@ -81,6 +87,7 @@
                         </button>
                         <button
                             mat-icon-button
+                            color="primary"
                             type="button"
                             [disabled]="!canStart(selection)"
                             (click)="start(selection)">
@@ -88,6 +95,7 @@
                         </button>
                         <button
                             mat-icon-button
+                            color="primary"
                             type="button"
                             [disabled]="!canStop(selection)"
                             (click)="stop(selection)">
@@ -97,6 +105,7 @@
                     <div class="flex gap-x-1">
                         <button
                             mat-icon-button
+                            color="primary"
                             type="button"
                             [disabled]="!canCopy(selection)"
                             (click)="copy(selection)">
@@ -104,6 +113,7 @@
                         </button>
                         <button
                             mat-icon-button
+                            color="primary"
                             class="mr-2"
                             type="button"
                             [disabled]="!canPaste(selection)"
@@ -112,6 +122,7 @@
                         </button>
                         <button
                             mat-icon-button
+                            color="primary"
                             class="mr-2"
                             type="button"
                             [disabled]="!canGroup(selection)"
@@ -120,6 +131,7 @@
                         </button>
                         <button
                             mat-icon-button
+                            color="primary"
                             class="mr-2"
                             type="button"
                             [disabled]="!canColor(selection)"
@@ -128,6 +140,7 @@
                         </button>
                         <button
                             mat-icon-button
+                            color="primary"
                             type="button"
                             [disabled]="!canDelete(selection)"
                             (click)="delete(selection)">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss
index 16aee6ef1e..5b2fa50696 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss
@@ -44,11 +44,6 @@
         border-bottom: 1px solid $on-surface-lighter;
         background: $surface-darker;
 
-        .fa,
-        .icon {
-            color: utils.get-color-on-surface($material-theme-color-config, $surface);
-        }
-
         .controller-bulletins {
             border-left: 1px solid $on-surface-lighter;
             background-color: $material-theme-primary-palette-darker;
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.html
index 47b44eb93a..ff5d3bd30f 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.html
@@ -26,25 +26,25 @@
             }
             <div class="flex items-center gap-x-2" [title]="getActiveThreadsTitle()">
                 <div class="icon icon-threads" [class]="getActiveThreadsStyle()"></div>
-                <div class="mat-accent font-medium">{{ formatActiveThreads() }}</div>
+                <div class="accent-color font-medium">{{ formatActiveThreads() }}</div>
             </div>
             <div class="flex items-center gap-x-2" title="Total queued data">
                 <div class="fa fa-list" [class]="getQueuedStyle()"></div>
-                <div class="mat-accent font-medium">{{ controllerStatus.queued }}</div>
+                <div class="accent-color font-medium">{{ controllerStatus.queued }}</div>
             </div>
             <div class="flex items-center gap-x-2" title="Transmitting Remote Process Groups">
                 <div
                     class="fa fa-bullseye"
                     [class]="getActiveStyle(controllerStatus.activeRemotePortCount, 'nifi-success-default')"></div>
-                <div class="mat-accent font-medium">
+                <div class="accent-color font-medium">
                     {{ formatValue(controllerStatus.activeRemotePortCount) }}
                 </div>
             </div>
             <div class="flex items-center gap-x-2" title="Not Transmitting Remote Process Groups">
                 <div
                     class="icon icon-transmit-false"
-                    [class]="getActiveStyle(controllerStatus.inactiveRemotePortCount, 'not-transmitting')"></div>
-                <div class="mat-accent font-medium">
+                    [class]="getActiveStyle(controllerStatus.inactiveRemotePortCount, 'primary-color')"></div>
+                <div class="accent-color font-medium">
                     {{ formatValue(controllerStatus.inactiveRemotePortCount) }}
                 </div>
             </div>
@@ -52,7 +52,7 @@
                 <div
                     class="fa fa-play"
                     [class]="getActiveStyle(controllerStatus.runningCount, 'nifi-success-lighter')"></div>
-                <div class="mat-accent font-medium">
+                <div class="accent-color font-medium">
                     {{ formatValue(controllerStatus.runningCount) }}
                 </div>
             </div>
@@ -60,21 +60,21 @@
                 <div
                     class="fa fa-stop"
                     [class]="getActiveStyle(controllerStatus.stoppedCount, 'nifi-warn-lighter')"></div>
-                <div class="mat-accent font-medium">
+                <div class="accent-color font-medium">
                     {{ formatValue(controllerStatus.stoppedCount) }}
                 </div>
             </div>
             <div class="flex items-center gap-x-2" title="Invalid Components">
                 <div class="fa fa-warning" [class]="getActiveStyle(controllerStatus.invalidCount, 'invalid')"></div>
-                <div class="mat-accent font-medium">
+                <div class="accent-color font-medium">
                     {{ formatValue(controllerStatus.invalidCount) }}
                 </div>
             </div>
             <div class="flex items-center gap-x-2" title="Disabled Components">
                 <div
                     class="icon icon-enable-false"
-                    [class]="getActiveStyle(controllerStatus.disabledCount, 'mat-primary')"></div>
-                <div class="mat-accent font-medium">
+                    [class]="getActiveStyle(controllerStatus.disabledCount, 'primary-color')"></div>
+                <div class="accent-color font-medium">
                     {{ formatValue(controllerStatus.disabledCount) }}
                 </div>
             </div>
@@ -82,7 +82,7 @@
                 <div
                     class="fa fa-check"
                     [class]="getActiveStyle(controllerStatus.upToDateCount, 'nifi-success-default')"></div>
-                <div class="mat-accent font-medium">
+                <div class="accent-color font-medium">
                     {{ formatValue(controllerStatus.upToDateCount) }}
                 </div>
             </div>
@@ -90,7 +90,7 @@
                 <div
                     class="fa fa-asterisk"
                     [class]="getActiveStyle(controllerStatus.locallyModifiedCount, 'nifi-surface-default')"></div>
-                <div class="mat-accent font-medium">
+                <div class="accent-color font-medium">
                     {{ formatValue(controllerStatus.locallyModifiedCount) }}
                 </div>
             </div>
@@ -98,7 +98,7 @@
                 <div
                     class="fa fa-arrow-circle-up"
                     [class]="getActiveStyle(controllerStatus.staleCount, 'nifi-warn-lighter')"></div>
-                <div class="mat-accent font-medium">
+                <div class="accent-color font-medium">
                     {{ formatValue(controllerStatus.staleCount) }}
                 </div>
             </div>
@@ -106,7 +106,7 @@
                 <div
                     class="fa fa-exclamation-circle"
                     [class]="getActiveStyle(controllerStatus.locallyModifiedAndStaleCount, 'nifi-warn-lighter')"></div>
-                <div class="mat-accent font-medium">
+                <div class="accent-color font-medium">
                     {{ formatValue(controllerStatus.locallyModifiedAndStaleCount) }}
                 </div>
             </div>
@@ -114,13 +114,13 @@
                 <div
                     class="fa fa-question"
                     [class]="getActiveStyle(controllerStatus.syncFailureCount, 'nifi-surface-default')"></div>
-                <div class="mat-accent font-medium">
+                <div class="accent-color font-medium">
                     {{ formatValue(controllerStatus.syncFailureCount) }}
                 </div>
             </div>
             <div class="flex items-center gap-x-2" title="Last refresh">
-                <div class="fa fa-refresh" [class.fa-spin]="loadingStatus"></div>
-                <div class="mat-accent font-medium">{{ lastRefreshed }}</div>
+                <div class="fa fa-refresh primary-color" [class.fa-spin]="loadingStatus"></div>
+                <div class="accent-color font-medium">{{ lastRefreshed }}</div>
             </div>
         </div>
         <div class="flex">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.ts
index deff7e14f7..2105d8cf21 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.ts
@@ -62,7 +62,7 @@ export class FlowStatus {
             return 'warning';
         }
 
-        return '';
+        return 'primary-color';
     }
 
     formatActiveThreads(): string {
@@ -85,16 +85,16 @@ export class FlowStatus {
         if (this.hasTerminatedThreads()) {
             return 'warning';
         } else if (this.controllerStatus.activeThreadCount === 0) {
-            return 'zero';
+            return 'zero primary-color-lighter';
         }
-        return '';
+        return 'primary-color';
     }
 
     getQueuedStyle(): string {
         if (this.controllerStatus.queued.indexOf('0 / 0') == 0) {
-            return 'zero';
+            return 'zero primary-color-lighter';
         }
-        return '';
+        return 'primary-color';
     }
 
     formatValue(value: number | undefined) {
@@ -106,7 +106,7 @@ export class FlowStatus {
 
     getActiveStyle(value: number | undefined, activeStyle: string): string {
         if (value === undefined || value <= 0) {
-            return 'zero';
+            return 'zero primary-color-lighter';
         }
         return activeStyle;
     }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss
index a35e9d2047..3ed1a4be0a 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss
@@ -26,8 +26,6 @@
     // Get hues from palette
     $surface: utils.get-surface($nifi-theme-color-config);
     $surface-darker: utils.get-surface($nifi-theme-color-config, 'darker');
-    $on-surface: utils.get-on-surface($nifi-theme-color-config);
-    $on-surface-medium: utils.get-on-surface($nifi-theme-color-config, medium);
     $on-surface-lighter: utils.get-on-surface($nifi-theme-color-config, lighter);
 
     .search-container {
@@ -40,7 +38,6 @@
         }
 
         .search-input {
-            color: $on-surface;
             background-color: $surface;
         }
     }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.html
index dcfc917c21..abf20a2b40 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.html
@@ -16,13 +16,13 @@
   -->
 
 <div class="h-8 flex justify-around search-container" [class.open]="searchInputVisible">
-    <button class="w-8" (click)="toggleSearchVisibility()"><i class="fa fa-search mat-primary"></i></button>
+    <button class="w-8" (click)="toggleSearchVisibility()"><i class="fa fa-search primary-color"></i></button>
     <form [formGroup]="searchForm">
         <input
             type="text"
             matInput
             placeholder="Search"
-            class="search-input"
+            class="search-input on-surface-default"
             [class.open]="searchInputVisible"
             cdkOverlayOrigin
             #searchInput="cdkOverlayOrigin"
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-funnel/destination-funnel.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-funnel/destination-funnel.component.html
index 2985fe4d31..f8585f0727 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-funnel/destination-funnel.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-funnel/destination-funnel.component.html
@@ -18,10 +18,10 @@
 <div class="flex flex-col gap-y-4">
     <div class="flex flex-col mb-5">
         <div>To Funnel</div>
-        <div class="mat-accent font-medium">funnel</div>
+        <div class="accent-color font-medium">funnel</div>
     </div>
     <div class="flex flex-col mb-5">
         <div>Within Group</div>
-        <div class="mat-accent font-medium">{{ groupName }}</div>
+        <div class="accent-color font-medium">{{ groupName }}</div>
     </div>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-output-port/destination-output-port.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-output-port/destination-output-port.component.html
index 01f4552aef..d32331fb77 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-output-port/destination-output-port.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-output-port/destination-output-port.component.html
@@ -18,10 +18,10 @@
 <div class="flex flex-col gap-y-4">
     <div class="flex flex-col mb-5">
         <div>To Output</div>
-        <div class="mat-accent font-medium">{{ name }}</div>
+        <div class="accent-color font-medium">{{ name }}</div>
     </div>
     <div class="flex flex-col mb-5">
         <div>Within Group</div>
-        <div class="mat-accent font-medium">{{ groupName }}</div>
+        <div class="accent-color font-medium">{{ groupName }}</div>
     </div>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-process-group/destination-process-group.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-process-group/destination-process-group.component.html
index 6deeb52a40..2b6b45c275 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-process-group/destination-process-group.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-process-group/destination-process-group.component.html
@@ -49,6 +49,6 @@
     }
     <div class="flex flex-col mb-5">
         <div>Within Group</div>
-        <div class="mat-accent font-medium">{{ groupName }}</div>
+        <div class="accent-color font-medium">{{ groupName }}</div>
     </div>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-processor/destination-processor.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-processor/destination-processor.component.html
index d30c9decab..13f8c5dcf0 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-processor/destination-processor.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-processor/destination-processor.component.html
@@ -18,10 +18,10 @@
 <div class="flex flex-col gap-y-4">
     <div class="flex flex-col mb-5">
         <div>To Processor</div>
-        <div class="mat-accent font-medium">{{ processorName }}</div>
+        <div class="accent-color font-medium">{{ processorName }}</div>
     </div>
     <div class="flex flex-col mb-5">
         <div>Within Group</div>
-        <div class="mat-accent font-medium">{{ groupName }}</div>
+        <div class="accent-color font-medium">{{ groupName }}</div>
     </div>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-remote-process-group/destination-remote-process-group.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-remote-process-group/destination-remote-process-group.component.html
index 54004dfe21..1cc1030bbb 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-remote-process-group/destination-remote-process-group.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-remote-process-group/destination-remote-process-group.component.html
@@ -47,6 +47,6 @@
     }
     <div class="flex flex-col mb-5">
         <div>Within Group</div>
-        <div class="mat-accent font-medium">{{ groupName }}</div>
+        <div class="accent-color font-medium">{{ groupName }}</div>
     </div>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/_prioritizers.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/_prioritizers.component-theme.scss
index 51714ffe6e..674ff0fcaa 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/_prioritizers.component-theme.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/_prioritizers.component-theme.scss
@@ -30,7 +30,6 @@
     // Get hues from palette
     $material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette, default);
     $surface: utils.get-surface($nifi-theme-color-config);
-    $on-surface: utils.get-on-surface($nifi-theme-color-config);
 
     .prioritizers {
         .prioritizers-list {
@@ -38,7 +37,6 @@
         }
 
         .prioritizer-draggable-item {
-            color: $on-surface;
             background: $surface;
         }
     }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.html
index de1077aa90..3dd55c8838 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.html
@@ -26,7 +26,10 @@
             [cdkDropListData]="availablePrioritizers"
             (cdkDropListDropped)="dropAvailable($event)">
             @for (item of availablePrioritizers; track item; let i = $index) {
-                <div class="prioritizer-draggable-item border-b m-1" cdkDrag cdkDragPreviewContainer="parent">
+                <div
+                    class="prioritizer-draggable-item border-b on-surface-default m-1"
+                    cdkDrag
+                    cdkDragPreviewContainer="parent">
                     <ng-container
                         *ngTemplateOutlet="
                             prioritizerItem;
@@ -60,7 +63,7 @@
             <div>{{ getPrioritizerLabel(item) }}</div>
             @if (hasDescription(item)) {
                 <div
-                    class="fa fa-question-circle"
+                    class="fa fa-question-circle primary-color"
                     nifiTooltip
                     [tooltipComponentType]="TextTip"
                     [tooltipInputData]="getDescriptionTipData(item)"></div>
@@ -68,7 +71,7 @@
         </div>
         @if (canClose) {
             <button type="button" (click)="removeSelected(item, i)" [disabled]="isDisabled">
-                <i class="fa fa-times"></i>
+                <i class="fa fa-times primary-color"></i>
             </button>
         }
     </ng-template>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-funnel/source-funnel.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-funnel/source-funnel.component.html
index 9bbd43969a..be229d09e0 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-funnel/source-funnel.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-funnel/source-funnel.component.html
@@ -18,10 +18,10 @@
 <div class="flex flex-col gap-y-4">
     <div class="flex flex-col mb-5">
         <div>From Funnel</div>
-        <div class="mat-accent font-medium">funnel</div>
+        <div class="accent-color font-medium">funnel</div>
     </div>
     <div class="flex flex-col mb-5">
         <div>Within Group</div>
-        <div class="mat-accent font-medium">{{ groupName }}</div>
+        <div class="accent-color font-medium">{{ groupName }}</div>
     </div>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-input-port/source-input-port.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-input-port/source-input-port.component.html
index 6b4a1f27ae..f06311e726 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-input-port/source-input-port.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-input-port/source-input-port.component.html
@@ -18,10 +18,10 @@
 <div class="flex flex-col gap-y-4">
     <div class="flex flex-col mb-5">
         <div>From Input</div>
-        <div class="mat-accent font-medium">{{ name }}</div>
+        <div class="accent-color font-medium">{{ name }}</div>
     </div>
     <div class="flex flex-col mb-5">
         <div>Within Group</div>
-        <div class="mat-accent font-medium">{{ groupName }}</div>
+        <div class="accent-color font-medium">{{ groupName }}</div>
     </div>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-process-group/source-process-group.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-process-group/source-process-group.component.html
index fe7890b684..19a0cb20fd 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-process-group/source-process-group.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-process-group/source-process-group.component.html
@@ -49,6 +49,6 @@
     }
     <div class="flex flex-col mb-5">
         <div>Within Group</div>
-        <div class="mat-accent font-medium">{{ groupName }}</div>
+        <div class="accent-color font-medium">{{ groupName }}</div>
     </div>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-processor/source-processor.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-processor/source-processor.component.html
index fee7758fca..95f849c34d 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-processor/source-processor.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-processor/source-processor.component.html
@@ -18,11 +18,11 @@
 <div class="flex flex-col gap-y-4">
     <div class="flex flex-col mb-5">
         <div>From Processor</div>
-        <div class="mat-accent font-medium">{{ name }}</div>
+        <div class="accent-color font-medium">{{ name }}</div>
     </div>
     <div class="flex flex-col mb-5">
         <div>Within Group</div>
-        <div class="mat-accent font-medium">{{ groupName }}</div>
+        <div class="accent-color font-medium">{{ groupName }}</div>
     </div>
     <div class="flex flex-col">
         <div>Relationships</div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-remote-process-group/source-remote-process-group.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-remote-process-group/source-remote-process-group.component.html
index 023d2b7251..4570315004 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-remote-process-group/source-remote-process-group.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-remote-process-group/source-remote-process-group.component.html
@@ -47,6 +47,6 @@
     }
     <div class="flex flex-col mb-5">
         <div>Within Group</div>
-        <div class="mat-accent font-medium">{{ groupName }}</div>
+        <div class="accent-color font-medium">{{ groupName }}</div>
     </div>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/change-version-dialog/change-version-dialog.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/change-version-dialog/change-version-dialog.html
index 6403e2691f..60a49f1eac 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/change-version-dialog/change-version-dialog.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/change-version-dialog/change-version-dialog.html
@@ -23,27 +23,27 @@
                 <div class="flex flex-1 flex-col gap-y-4">
                     <div>
                         <div>Registry</div>
-                        <div class="mat-accent font-medium">{{ versionControlInformation.registryName }}</div>
+                        <div class="accent-color font-medium">{{ versionControlInformation.registryName }}</div>
                     </div>
                     <div>
                         <div>Flow Name</div>
-                        <div class="mat-accent font-medium">{{ versionControlInformation.flowName }}</div>
+                        <div class="accent-color font-medium">{{ versionControlInformation.flowName }}</div>
                     </div>
                 </div>
                 <div class="flex flex-1 flex-col gap-y-4">
                     <div>
                         <div>Bucket</div>
-                        <div class="mat-accent font-medium">{{ versionControlInformation.bucketName }}</div>
+                        <div class="accent-color font-medium">{{ versionControlInformation.bucketName }}</div>
                     </div>
                     <div>
                         <div>Current Version</div>
-                        <div class="mat-accent font-medium">{{ versionControlInformation.version }}</div>
+                        <div class="accent-color font-medium">{{ versionControlInformation.version }}</div>
                     </div>
                 </div>
             </div>
             <div>
                 <div>Flow Description</div>
-                <div class="mat-accent font-medium">
+                <div class="accent-color font-medium">
                     {{ versionControlInformation.flowDescription || 'No description provided' }}
                 </div>
             </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/change-version-progress-dialog/change-version-progress-dialog.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/change-version-progress-dialog/change-version-progress-dialog.html
index 45346dcd44..cbe532f053 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/change-version-progress-dialog/change-version-progress-dialog.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/change-version-progress-dialog/change-version-progress-dialog.html
@@ -20,7 +20,7 @@
     <mat-dialog-content>
         <div class="flex flex-col gap-y-4">
             @if (flowUpdateRequest$ | async; as versionChangeRequest) {
-                <div class="mat-accent font-medium">
+                <div class="accent-color font-medium">
                     @if (versionChangeRequest.request.complete) {
                         This Process Group version has changed.
                     } @else {
@@ -31,7 +31,9 @@
                     <mat-progress-bar
                         mode="determinate"
                         [value]="versionChangeRequest.request.percentCompleted"></mat-progress-bar>
-                    <div class="mat-accent font-medium">{{ versionChangeRequest.request.percentCompleted }}%</div>
+                    <div class="accent-color font-medium">
+                        {{ versionChangeRequest.request.percentCompleted }}%
+                    </div>
                 </div>
             }
         </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/import-from-registry/import-from-registry.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/import-from-registry/import-from-registry.component.html
index d2fae28869..9ae8c775f3 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/import-from-registry/import-from-registry.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/import-from-registry/import-from-registry.component.html
@@ -92,7 +92,7 @@
         </div>
         <div class="flex flex-col mb-5">
             <div>Flow Description</div>
-            <div class="mat-accent font-medium">
+            <div class="accent-color font-medium">
                 {{ selectedFlowDescription || 'No description provided' }}
             </div>
         </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/local-changes-dialog/local-changes-table/local-changes-table.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/local-changes-dialog/local-changes-table/local-changes-table.html
index ee4d189c81..76f3839cb6 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/local-changes-dialog/local-changes-table/local-changes-table.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/local-changes-dialog/local-changes-table/local-changes-table.html
@@ -17,7 +17,7 @@
 
 <div class="local-changes-table h-full flex flex-col">
     <div>
-        <div class="mat-accent font-medium">Displaying {{ filteredCount }} of {{ totalCount }}</div>
+        <div class="accent-color font-medium">Displaying {{ filteredCount }} of {{ totalCount }}</div>
         <form [formGroup]="filterForm">
             <div class="flex pt-2">
                 <div class="mr-2">
@@ -67,7 +67,10 @@
                     <th mat-header-cell *matHeaderCellDef></th>
                     <td mat-cell *matCellDef="let item">
                         <div class="flex items-center gap-x-3 pointer">
-                            <div class="fa fa-long-arrow-right" title="Go To" (click)="goToClicked(item)"></div>
+                            <div
+                                class="fa fa-long-arrow-right primary-color"
+                                title="Go To"
+                                (click)="goToClicked(item)"></div>
                         </div>
                     </td>
                 </ng-container>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/save-version-dialog/save-version-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/save-version-dialog/save-version-dialog.component.html
index fd976dffb0..84b82fc313 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/save-version-dialog/save-version-dialog.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/save-version-dialog/save-version-dialog.component.html
@@ -23,16 +23,16 @@
             <div class="flex flex-col gap-y-4 mb-6">
                 <div>
                     <div>Registry</div>
-                    <div class="mat-accent font-medium">{{ versionControlInformation.registryName }}</div>
+                    <div class="accent-color font-medium">{{ versionControlInformation.registryName }}</div>
                 </div>
                 <div>
                     <div>Bucket</div>
-                    <div class="mat-accent font-medium">{{ versionControlInformation.bucketName }}</div>
+                    <div class="accent-color font-medium">{{ versionControlInformation.bucketName }}</div>
                 </div>
                 <div class="flex">
                     <div class="flex-1">
                         <div>Flow Name</div>
-                        <div class="mat-accent font-medium">{{ versionControlInformation.flowName }}</div>
+                        <div class="accent-color font-medium">{{ versionControlInformation.flowName }}</div>
                     </div>
                     @if (!forceCommit) {
                         <div class="save-flow-version-label ml-3">{{ versionControlInformation.version + 1 }}</div>
@@ -43,7 +43,7 @@
                     @if (versionControlInformation.flowDescription === '') {
                         <div class="unset nifi-surface-default">Empty string set</div>
                     } @else {
-                        <div class="mat-accent">{{ versionControlInformation.flowDescription }}</div>
+                        <div class="accent-color">{{ versionControlInformation.flowDescription }}</div>
                     }
                 </div>
             </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/create-process-group.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/create-process-group.component.html
index 6e63a7dce5..a4c292e26b 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/create-process-group.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/create-process-group.component.html
@@ -25,7 +25,7 @@
             <button
                 matSuffix
                 type="button"
-                class="upload-flow-definition mat-accent icon icon-template-import mr-2.5 pointer"
+                class="upload-flow-definition accent-color icon icon-template-import mr-2.5 pointer"
                 title="Browse"
                 (click)="flowUploadControl.click()">
                 <input type="file" #flowUploadControl class="hidden" (change)="attachFlow($event)" />
@@ -64,7 +64,7 @@
                     <div class="flex flex-col">
                         <div>File to upload</div>
                         <div class="flex justify-between items-center">
-                            <div class="mat-accent font-medium">{{ flowNameAttached }}</div>
+                            <div class="accent-color font-medium">{{ flowNameAttached }}</div>
                             <div (click)="removeAttachedFlow()">X</div>
                         </div>
                     </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.html
index 0e5842c90f..1aac444331 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.html
@@ -32,17 +32,17 @@
                         </div>
                         <div class="flex flex-col mb-5">
                             <div>Id</div>
-                            <div class="mat-accent font-medium">{{ request.entity.id }}</div>
+                            <div class="accent-color font-medium">{{ request.entity.id }}</div>
                         </div>
                         <div class="flex flex-col mb-5">
                             <div>Type</div>
-                            <div class="mat-accent font-medium">
+                            <div class="accent-color font-medium">
                                 {{ formatType(request.entity) }}
                             </div>
                         </div>
                         <div class="flex flex-col mb-6">
                             <div>Bundle</div>
-                            <div class="mat-accent font-medium">
+                            <div class="accent-color font-medium">
                                 {{ formatBundle(request.entity) }}
                             </div>
                         </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/relationship-settings/relationship-settings.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/relationship-settings/relationship-settings.component.html
index 57199c1aa4..9cb223f05b 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/relationship-settings/relationship-settings.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/relationship-settings/relationship-settings.component.html
@@ -30,7 +30,7 @@
                 @for (relationship of relationships; track relationship; let i = $index) {
                     <div class="flex flex-col gap-y-1.5">
                         <div
-                            class="mat-accent font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
+                            class="accent-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
                             [title]="relationship.name">
                             {{ relationship.name }}
                         </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/run-duration-slider/run-duration-slider.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/run-duration-slider/run-duration-slider.component.html
index 877f80e554..ac4c1daf26 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/run-duration-slider/run-duration-slider.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/run-duration-slider/run-duration-slider.component.html
@@ -29,7 +29,7 @@
         </mat-slider>
     </div>
     <div class="flex justify-between items-center">
-        <div class="mat-accent font-medium">Lower latency</div>
-        <div class="mat-accent font-medium">Higher throughput</div>
+        <div class="accent-color font-medium">Lower latency</div>
+        <div class="accent-color font-medium">Higher throughput</div>
     </div>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/edit-remote-process-group/edit-remote-process-group.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/edit-remote-process-group/edit-remote-process-group.component.html
index 7179fffff0..cf642eb5d4 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/edit-remote-process-group/edit-remote-process-group.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/edit-remote-process-group/edit-remote-process-group.component.html
@@ -21,11 +21,11 @@
     <mat-dialog-content>
         <div class="flex flex-col mb-6">
             <div>Name</div>
-            <div class="mat-accent font-medium">{{ request.entity.component.name }}</div>
+            <div class="accent-color font-medium">{{ request.entity.component.name }}</div>
         </div>
         <div class="flex flex-col mb-6">
             <div>Id</div>
-            <div class="mat-accent font-medium">{{ request.entity.component.id }}</div>
+            <div class="accent-color font-medium">{{ request.entity.component.id }}</div>
         </div>
         <div class="tab-content py-4 flex gap-x-4">
             <div class="w-full">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/controller-service/controller-services.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/controller-service/controller-services.component.html
index f044b7de98..357be8ef22 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/controller-service/controller-services.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/controller-service/controller-services.component.html
@@ -20,7 +20,7 @@
         <navigation></navigation>
     </header>
     <div class="px-5 flex-1 flex flex-col">
-        <h3 class="text-xl bold mat-primary">Controller Services</h3>
+        <h3 class="text-xl bold primary-color">Controller Services</h3>
         @if (serviceState$ | async; as serviceState) {
             @if (isInitialLoading(serviceState)) {
                 <div>
@@ -32,7 +32,7 @@
                         <breadcrumbs
                             [entity]="serviceState.breadcrumb"
                             [currentProcessGroupId]="serviceState.processGroupId"></breadcrumbs>
-                        <button mat-icon-button (click)="openNewControllerServiceDialog()">
+                        <button mat-icon-button color="primary" (click)="openNewControllerServiceDialog()">
                             <i class="fa fa-plus"></i>
                         </button>
                     </div>
@@ -58,11 +58,11 @@
                     }
                     <div class="flex justify-between">
                         <div class="refresh-container flex items-center gap-x-2">
-                            <button mat-icon-button (click)="refreshControllerServiceListing()">
+                            <button mat-icon-button color="primary" (click)="refreshControllerServiceListing()">
                                 <i class="fa fa-refresh" [class.fa-spin]="serviceState.status === 'loading'"></i>
                             </button>
                             <div>Last updated:</div>
-                            <div class="mat-accent font-medium">
+                            <div class="accent-color font-medium">
                                 {{ serviceState.loadedTimestamp }}
                             </div>
                         </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/edit-remote-port/edit-remote-port.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/edit-remote-port/edit-remote-port.component.html
index 5a87f5c660..b8039dce85 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/edit-remote-port/edit-remote-port.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/edit-remote-port/edit-remote-port.component.html
@@ -23,7 +23,7 @@
             <div class="flex flex-col mb-5">
                 <div>Name</div>
                 <div
-                    class="overflow-ellipsis overflow-hidden whitespace-nowrap mat-accent font-medium"
+                    class="overflow-ellipsis overflow-hidden whitespace-nowrap accent-color font-medium"
                     [title]="request.entity.name">
                     {{ request.entity.name }}
                 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/manage-remote-ports.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/manage-remote-ports.component.html
index c1d0dd435b..b9c4ec2477 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/manage-remote-ports.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/manage-remote-ports.component.html
@@ -20,14 +20,14 @@
         <navigation></navigation>
     </header>
     <div class="px-5 flex-1 flex flex-col">
-        <h3 class="text-xl bold mat-primary pb-5">Manage Remote Ports</h3>
+        <h3 class="text-xl bold primary-color pb-5">Manage Remote Ports</h3>
         @if (portsState$ | async; as portsState) {
             <div class="grid-container grid grid-cols-2">
                 <div class="col-span-1 pr-5">
                     <div class="flex flex-col mb-5">
                         <div>Name</div>
                         <div
-                            class="overflow-ellipsis overflow-hidden whitespace-nowrap mat-accent font-medium"
+                            class="overflow-ellipsis overflow-hidden whitespace-nowrap accent-color font-medium"
                             [title]="portsState.rpg?.id">
                             {{ portsState.rpg?.id }}
                         </div>
@@ -37,7 +37,7 @@
                     <div class="flex flex-col mb-5">
                         <div>Urls</div>
                         <div
-                            class="overflow-ellipsis overflow-hidden whitespace-nowrap mat-accent font-medium"
+                            class="overflow-ellipsis overflow-hidden whitespace-nowrap accent-color font-medium"
                             [title]="portsState.rpg?.component?.targetUri">
                             {{ portsState.rpg?.component?.targetUri }}
                         </div>
@@ -69,7 +69,7 @@
                                                 @if (hasComments(item)) {
                                                     <div>
                                                         <div
-                                                            class="pointer fa fa-comment"
+                                                            class="pointer fa fa-comment primary-color"
                                                             nifiTooltip
                                                             [delayClose]="false"
                                                             [tooltipComponentType]="TextTip"
@@ -197,7 +197,7 @@
                                                     port.transmitting === false
                                                 ) {
                                                     <div
-                                                        class="pointer fa fa-pencil"
+                                                        class="pointer fa fa-pencil primary-color"
                                                         (click)="configureClicked(port, $event)"
                                                         title="Edit Port"></div>
                                                 }
@@ -211,7 +211,7 @@
                                                     } @else {
                                                         @if (port.connected && port.exists) {
                                                             <div
-                                                                class="pointer not-transmitting icon icon-transmit-false"
+                                                                class="pointer not-transmitting icon icon-transmit-false primary-color"
                                                                 (click)="toggleTransmission(port)"
                                                                 title="Not Transmitting: click to toggle port transmission"></div>
                                                         }
@@ -234,11 +234,11 @@
                     </div>
                     <div class="flex justify-between">
                         <div class="refresh-container flex items-center gap-x-2">
-                            <button mat-icon-button (click)="refreshManageRemotePortsListing()">
+                            <button mat-icon-button color="primary" (click)="refreshManageRemotePortsListing()">
                                 <i class="fa fa-refresh" [class.fa-spin]="portsState.status === 'loading'"></i>
                             </button>
                             <div>Last updated:</div>
-                            <div class="mat-accent font-medium">
+                            <div class="accent-color font-medium">
                                 {{ portsState.loadedTimestamp }}
                             </div>
                         </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/ui/login-form/login-form.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/ui/login-form/login-form.component.html
index 2545c780c7..8880200579 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/ui/login-form/login-form.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/ui/login-form/login-form.component.html
@@ -17,7 +17,7 @@
 
 <div class="login-form w-96 flex flex-col gap-y-5">
     <div class="flex justify-between items-center">
-        <div class="login-title mat-primary">Log In</div>
+        <div class="login-title primary-color">Log In</div>
         <div class="flex gap-x-2">
             @if (hasToken()) {
                 <a (click)="logout()">log out</a>
@@ -40,11 +40,7 @@
                 </mat-form-field>
             </div>
             <div class="flex justify-end">
-                <button
-                    [disabled]="!loginForm.dirty || loginForm.invalid"
-                    type="submit"
-                    color="primary"
-                    mat-button>
+                <button [disabled]="!loginForm.dirty || loginForm.invalid" type="submit" color="primary" mat-button>
                     Log in
                 </button>
             </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/parameter-contexts.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/parameter-contexts.component.html
index 54eb0134c3..5917e7594d 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/parameter-contexts.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/parameter-contexts.component.html
@@ -20,7 +20,7 @@
         <navigation></navigation>
     </header>
     <div class="px-5 flex-1 flex flex-col">
-        <h3 class="text-xl bold mat-primary">Parameter Contexts</h3>
+        <h3 class="text-xl bold primary-color">Parameter Contexts</h3>
         <parameter-context-listing class="flex-1"></parameter-context-listing>
     </div>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.html
index d1435cafea..4360eaf715 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.html
@@ -26,7 +26,7 @@
                     <div class="flex flex-col gap-y-1.5">
                         @for (updateStep of requestEntity.request.updateSteps; track updateStep) {
                             <div class="flex justify-between items-center">
-                                <div class="mat-accent font-medium">
+                                <div class="accent-color font-medium">
                                     {{ updateStep.description }}
                                 </div>
                                 @if (updateStep.failureReason) {
@@ -35,7 +35,7 @@
                                     @if (updateStep.complete) {
                                         <div class="fa fa-check nifi-success-default"></div>
                                     } @else {
-                                        <div class="fa fa-spin fa-circle-o-notch"></div>
+                                        <div class="fa fa-spin fa-circle-o-notch primary-color"></div>
                                     }
                                 }
                             </div>
@@ -51,7 +51,7 @@
                     <div class="flex flex-col">
                         <div>Parameter</div>
                         @if (parameters && parameters.length > 0) {
-                            <div class="mat-accent font-medium">
+                            <div class="accent-color font-medium">
                                 {{ getUpdatedParameters() }}
                             </div>
                         } @else {
@@ -81,7 +81,7 @@
                             @if (!isNew) {
                                 <div class="flex flex-col mb-5">
                                     <div>Id</div>
-                                    <div class="mat-accent font-medium">
+                                    <div class="accent-color font-medium">
                                         {{ request.parameterContext?.id }}
                                     </div>
                                 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/_parameter-context-inheritance.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/_parameter-context-inheritance.component-theme.scss
index 062d8895fb..6f312aac98 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/_parameter-context-inheritance.component-theme.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/_parameter-context-inheritance.component-theme.scss
@@ -39,7 +39,6 @@
         }
 
         .parameter-context-draggable-item {
-            color: $on-surface;
             background: $surface;
         }
     }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component.html
index a5847bffe5..6a3130209d 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component.html
@@ -27,7 +27,7 @@
             (cdkDropListDropped)="dropAvailable($event)">
             @for (item of availableParameterContexts; track item; let i = $index) {
                 <div
-                    class="parameter-context-draggable-item border-b m-1"
+                    class="parameter-context-draggable-item border-b on-surface-default m-1"
                     cdkDrag
                     cdkDragPreviewContainer="parent"
                     [cdkDragDisabled]="!item.permissions.canRead">
@@ -72,7 +72,7 @@
             <div>{{ item.component.name }}</div>
             @if (hasDescription(item)) {
                 <div
-                    class="fa fa-question-circle"
+                    class="fa fa-question-circle primary-color"
                     nifiTooltip
                     [tooltipComponentType]="TextTip"
                     [tooltipInputData]="getDescriptionTipData(item)"></div>
@@ -80,7 +80,7 @@
         </div>
         @if (canClose) {
             <button type="button" (click)="removeSelected(item, i)" [disabled]="isDisabled">
-                <i class="fa fa-times"></i>
+                <i class="fa fa-times primary-color"></i>
             </button>
         }
     </ng-template>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-listing.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-listing.component.html
index edc684c2fa..3cc3c8261c 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-listing.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-listing.component.html
@@ -23,7 +23,7 @@
     } @else {
         <div class="flex flex-col h-full gap-y-2">
             <div class="flex justify-end">
-                <button mat-icon-button (click)="openNewParameterContextDialog()">
+                <button mat-icon-button color="primary" (click)="openNewParameterContextDialog()">
                     <i class="fa fa-plus"></i>
                 </button>
             </div>
@@ -39,13 +39,13 @@
             </div>
             <div class="flex justify-between">
                 <div class="refresh-container flex items-center gap-x-2">
-                    <button mat-icon-button (click)="refreshParameterContextListing()">
+                    <button mat-icon-button color="primary" (click)="refreshParameterContextListing()">
                         <i
                             class="fa fa-refresh"
                             [class.fa-spin]="parameterContextListingState.status === 'loading'"></i>
                     </button>
                     <div>Last updated:</div>
-                    <div class="mat-accent font-medium">
+                    <div class="accent-color font-medium">
                         {{ parameterContextListingState.loadedTimestamp }}
                     </div>
                 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-table/parameter-context-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-table/parameter-context-table.component.html
index ba94b75694..50364177c5 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-table/parameter-context-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-table/parameter-context-table.component.html
@@ -33,7 +33,7 @@
                         <div class="flex items-center gap-x-3">
                             <!-- TODO - handle read only in configure component? -->
                             @if (canRead(item)) {
-                                <div class="pointer fa fa-info-circle"></div>
+                                <div class="pointer fa fa-info-circle primary-color"></div>
                             }
                         </div>
                     }
@@ -72,21 +72,27 @@
                 <td mat-cell *matCellDef="let item">
                     <div class="flex items-center gap-x-3">
                         @if (canRead(item) && canWrite(item)) {
-                            <div class="pointer fa fa-pencil" (click)="editClicked(item, $event)" title="Edit"></div>
+                            <div
+                                class="pointer fa fa-pencil primary-color"
+                                (click)="editClicked(item, $event)"
+                                title="Edit"></div>
                         }
                         @if (canDelete(item)) {
-                            <div class="pointer fa fa-trash" (click)="deleteClicked(item, $event)" title="Delete"></div>
+                            <div
+                                class="pointer fa fa-trash primary-color"
+                                (click)="deleteClicked(item, $event)"
+                                title="Delete"></div>
                         }
                         @if (canManageAccessPolicies()) {
                             <div
-                                class="pointer fa fa-key"
+                                class="pointer fa fa-key primary-color"
                                 (click)="$event.stopPropagation()"
                                 [routerLink]="getPolicyLink(item)"
                                 title="Access Policies"></div>
                         }
                         @if (canGoToParameterProvider(item)) {
                             <div
-                                class="pointer fa fa-long-arrow-right"
+                                class="pointer fa fa-long-arrow-right primary-color"
                                 (click)="$event.stopPropagation()"
                                 [routerLink]="getParameterProviderLink(item)"
                                 title="Go to Parameter Provider"></div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-table/parameter-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-table/parameter-table.component.html
index 4da30f2428..28fae98e18 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-table/parameter-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-table/parameter-table.component.html
@@ -19,7 +19,7 @@
     <div class="flex basis-2/3 flex-col gap-y-3">
         @if (canAddParameters) {
             <div class="flex justify-end items-center">
-                <button mat-icon-button type="button" (click)="newParameterClicked()">
+                <button mat-icon-button color="primary" type="button" (click)="newParameterClicked()">
                     <i class="fa fa-plus"></i>
                 </button>
             </div>
@@ -38,7 +38,7 @@
                                 <div>
                                     @if (hasDescription(item)) {
                                         <div
-                                            class="fa fa-question-circle"
+                                            class="fa fa-question-circle primary-color"
                                             nifiTooltip
                                             [tooltipComponentType]="TextTip"
                                             [tooltipInputData]="getDescriptionTipData(item)"></div>
@@ -80,7 +80,7 @@
                                         </div>
                                         @if (hasExtraWhitespace(value)) {
                                             <div
-                                                class="fa fa-info"
+                                                class="fa fa-info primary-color"
                                                 nifiTooltip
                                                 [tooltipComponentType]="TextTip"
                                                 [tooltipInputData]="getExtraWhitespaceTipData()"></div>
@@ -98,16 +98,22 @@
                             <div class="flex items-center gap-x-3">
                                 @if (canGoToParameter(item)) {
                                     <div
-                                        class="pointer fa fa-long-arrow-right"
+                                        class="pointer fa fa-long-arrow-right primary-color"
                                         [routerLink]="getParameterLink(item)"
                                         mat-dialog-close="ROUTED"
                                         title="Go to"></div>
                                 }
                                 @if (canEdit(item)) {
-                                    <div class="pointer fa fa-pencil" (click)="editClicked(item)" title="Edit"></div>
+                                    <div
+                                        class="pointer fa fa-pencil primary-color"
+                                        (click)="editClicked(item)"
+                                        title="Edit"></div>
                                 }
                                 @if (canDelete(item)) {
-                                    <div class="pointer fa fa-trash" (click)="deleteClicked(item)" title="Delete"></div>
+                                    <div
+                                        class="pointer fa fa-trash primary-color"
+                                        (click)="deleteClicked(item)"
+                                        title="Delete"></div>
                                 }
                             </div>
                         </td>
@@ -127,7 +133,7 @@
     <div class="flex basis-1/3 flex-col justify-between gap-y-3 w-full">
         <div class="flex flex-col">
             <div>Parameter</div>
-            <div class="mat-accent font-medium">
+            <div class="accent-color font-medium">
                 @if (selectedItem) {
                     <span>{{ selectedItem.entity.parameter.name }}</span>
                 } @else {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/process-group-references/process-group-references.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/process-group-references/process-group-references.component.html
index 3d050f55dd..50bfc5d5ae 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/process-group-references/process-group-references.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/process-group-references/process-group-references.component.html
@@ -17,7 +17,7 @@
 
 <div class="process-group-references">
     @if (!hasBoundProcessGroups()) {
-        <div class="mat-accent font-medium">No referencing Process Groups</div>
+        <div class="accent-color font-medium">No referencing Process Groups</div>
     } @else {
         <ul>
             @if (authorizedProcessGroupReferences.length > 0) {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/provenance.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/provenance.component.html
index 11d4224599..dcb5d0c5d0 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/provenance.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/provenance.component.html
@@ -19,7 +19,7 @@
     <header class="nifi-header">
         <navigation></navigation>
     </header>
-    <h3 class="px-5 text-xl bold mat-primary">Provenance</h3>
+    <h3 class="px-5 text-xl bold primary-color">Provenance</h3>
     <div class="px-5 flex-1">
         <router-outlet></router-outlet>
     </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/lineage.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/lineage.component.ts
index 3003318094..f2b5117d27 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/lineage.component.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/lineage.component.ts
@@ -750,7 +750,7 @@ export class LineageComponent implements OnInit {
 
         flowfiles
             .append('g')
-            .attr('class', 'mat-accent')
+            .attr('class', 'accent-color')
             .attr('transform', function () {
                 return 'translate(-9,-9)';
             })
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/provenance-event-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/provenance-event-table.component.html
index 464d557942..308f48489e 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/provenance-event-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/provenance-event-table.component.html
@@ -19,13 +19,13 @@
     <error-banner></error-banner>
     <div [class.hidden]="showLineage" class="h-full flex flex-col gap-y-2">
         <div class="flex flex-col">
-            <div [class.invisible]="!filterApplied" class="mat-accent font-medium font-bold">
+            <div [class.invisible]="!filterApplied" class="accent-color font-medium font-bold">
                 Filter matched {{ filteredCount }} of {{ totalCount }}
             </div>
             <div class="flex justify-between">
                 <div>
                     Oldest event available:
-                    <span class="mat-accent font-medium">{{ oldestEventAvailable }}</span>
+                    <span class="accent-color font-medium">{{ oldestEventAvailable }}</span>
                 </div>
                 <div>
                     {{ resultsMessage }}
@@ -56,7 +56,7 @@
                     </div>
                 </form>
                 <div class="flex flex-col justify-center">
-                    <button mat-icon-button (click)="searchClicked()">
+                    <button mat-icon-button color="primary" (click)="searchClicked()">
                         <i class="fa fa-search"></i>
                     </button>
                 </div>
@@ -77,7 +77,7 @@
                         <th mat-header-cell *matHeaderCellDef></th>
                         <td mat-cell *matCellDef="let item">
                             <div
-                                class="pointer fa fa-info-circle"
+                                class="pointer fa fa-info-circle primary-color"
                                 title="View Details"
                                 (click)="viewDetailsClicked(item)"></div>
                         </td>
@@ -147,12 +147,12 @@
                         <td mat-cell *matCellDef="let item">
                             <div class="flex items-center gap-x-3">
                                 <div
-                                    class="pointer icon icon-lineage"
+                                    class="pointer icon icon-lineage primary-color"
                                     (click)="showLineageGraph(item)"
                                     title="Show Lineage"></div>
                                 @if (supportsGoTo(item)) {
                                     <div
-                                        class="pointer fa fa-long-arrow-right"
+                                        class="pointer fa fa-long-arrow-right primary-color"
                                         title="Go To"
                                         (click)="goToClicked(item)"></div>
                                 }
@@ -172,11 +172,11 @@
         </div>
         <div class="flex justify-between">
             <div class="refresh-container flex items-center gap-x-2">
-                <button mat-icon-button (click)="refreshClicked()">
+                <button mat-icon-button color="primary" (click)="refreshClicked()">
                     <i class="fa fa-refresh" [class.fa-spin]="loading"></i>
                 </button>
                 <div>Last updated:</div>
-                <div class="mat-accent font-medium">{{ loadedTimestamp }}</div>
+                <div class="accent-color font-medium">{{ loadedTimestamp }}</div>
             </div>
             <div>
                 <mat-paginator [pageSize]="100" [hidePageSize]="true" [showFirstLastButtons]="true"></mat-paginator>
@@ -186,7 +186,7 @@
     <div [class.hidden]="!showLineage" class="lineage h-full relative">
         <div class="lineage-controls flex">
             <div
-                class="pointer fa fa-long-arrow-left mat-primary"
+                class="pointer fa fa-long-arrow-left primary-color"
                 (click)="hideLineageGraph()"
                 title="Go back to event list"></div>
         </div>
@@ -201,7 +201,7 @@
                     <input matSliderThumb [value]="initialEventTimestampThreshold" (input)="handleInput($event)" />
                 </mat-slider>
             </div>
-            <div class="mat-accent font-medium">
+            <div class="accent-color font-medium">
                 {{ formatLabel(currentEventTimestampThreshold) }}
             </div>
         </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html
index 3d68e34b73..5852afa199 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html
@@ -24,7 +24,7 @@
                     <div class="absolute inset-0 flex gap-x-4">
                         <div class="w-full flex flex-col gap-y-3">
                             <div class="flex flex-col">
-                                <div class="flowfile-header mat-primary">FlowFile Details</div>
+                                <div class="flowfile-header primary-color">FlowFile Details</div>
                             </div>
                             <div class="flex flex-col">
                                 <div>UUID</div>
@@ -79,7 +79,7 @@
                             </div>
                             <div class="flex flex-col">
                                 <div>Penalized</div>
-                                <div class="mat-accent font-medium">
+                                <div class="accent-color font-medium">
                                     {{ request.flowfile.penalized ? 'Yes' : 'No' }}
                                 </div>
                             </div>
@@ -95,7 +95,7 @@
                             </ng-container>
                             <ng-template #formatDuration let-duration>
                                 <ng-container *ngIf="duration != null; else noDuration">
-                                    <div class="mat-accent font-medium">
+                                    <div class="accent-color font-medium">
                                         {{ formatDurationValue(duration) }}
                                     </div>
                                 </ng-container>
@@ -106,7 +106,7 @@
                         </div>
                         <div class="w-full flex flex-col gap-y-3">
                             <div class="flex flex-col">
-                                <div class="flowfile-header">Content Claim</div>
+                                <div class="flowfile-header primary-color">Content Claim</div>
                             </div>
                             <div
                                 class="flex flex-col gap-y-3"
@@ -181,7 +181,7 @@
                 <div class="tab-content py-4">
                     <div class="absolute inset-0 flex flex-col gap-y-4">
                         <div class="flex">
-                            <div class="flowfile-header">Attribute Values</div>
+                            <div class="flowfile-header primary-color">Attribute Values</div>
                         </div>
                         <div class="flex flex-col">
                             <div *ngFor="let attribute of request.flowfile.attributes | keyvalue">
@@ -205,11 +205,11 @@
                     <div class="unset nifi-surface-default">Empty string set</div>
                 </ng-container>
                 <ng-template #nonEmptyValue>
-                    <div class="mat-accent font-medium" *ngIf="title == null; else valueWithTitle">
+                    <div class="accent-color font-medium" *ngIf="title == null; else valueWithTitle">
                         {{ value }}
                     </div>
                     <ng-template #valueWithTitle>
-                        <div class="mat-accent font-medium" [title]="title">{{ value }}</div>
+                        <div class="accent-color font-medium" [title]="title">{{ value }}</div>
                     </ng-template>
                 </ng-template>
             </ng-container>
@@ -219,11 +219,11 @@
         </ng-template>
         <ng-template #formatContentValue let-value let-title="title">
             <ng-container *ngIf="value != null; else nullValue">
-                <div class="mat-accent font-medium" *ngIf="title == null; else valueWithTitle">
+                <div class="accent-color font-medium" *ngIf="title == null; else valueWithTitle">
                     {{ value }}
                 </div>
                 <ng-template #valueWithTitle>
-                    <div class="mat-accent font-medium" [title]="title">{{ value }}</div>
+                    <div class="accent-color font-medium" [title]="title">{{ value }}</div>
                 </ng-template>
             </ng-container>
             <ng-template #nullValue>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/flowfile-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/flowfile-table.component.html
index 6e840eaa2f..0ecde1a1dd 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/flowfile-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/flowfile-table.component.html
@@ -16,10 +16,10 @@
   -->
 
 <div class="flowfile-table h-full flex flex-col gap-y-2">
-    <h3 class="text-xl bold queue-listing-header mat-primary">{{ connectionLabel }}</h3>
+    <h3 class="text-xl bold queue-listing-header primary-color">{{ connectionLabel }}</h3>
     <error-banner></error-banner>
     <div class="flex justify-between">
-        <div class="mat-accent font-medium">
+        <div class="accent-color font-medium">
             Display {{ displayObjectCount }} of {{ formatCount(queueSizeObjectCount) }} ({{
                 formatBytes(queueSizeByteCount)
             }}) bytes
@@ -46,7 +46,7 @@
                     <th mat-header-cell *matHeaderCellDef></th>
                     <td mat-cell *matCellDef="let item">
                         <div
-                            class="pointer fa fa-info-circle"
+                            class="pointer fa fa-info-circle primary-color"
                             title="View Details"
                             (click)="viewFlowFileClicked(item)"></div>
                     </td>
@@ -125,19 +125,19 @@
                         <div class="flex items-center gap-x-3">
                             @if (item.size > 0) {
                                 <div
-                                    class="pointer fa fa-download"
+                                    class="pointer fa fa-download primary-color"
                                     title="Download content"
                                     (click)="downloadContentClicked(item)"></div>
                             }
                             @if (contentViewerAvailable && item.size > 0) {
                                 <div
-                                    class="pointer fa fa-eye"
+                                    class="pointer fa fa-eye primary-color"
                                     title="View content"
                                     (click)="viewContentClicked(item)"></div>
                             }
                             @if (currentUser.provenancePermissions.canRead) {
                                 <div
-                                    class="pointer icon icon-provenance"
+                                    class="pointer icon icon-provenance primary-color"
                                     title="Provenance"
                                     [routerLink]="['/provenance']"
                                     [queryParams]="{ flowFileUuid: item.uuid }"></div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/queue-listing.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/queue-listing.component.html
index ca4a55c9a4..d1a01c9799 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/queue-listing.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/queue-listing.component.html
@@ -36,11 +36,11 @@
         </div>
         <div class="flex justify-between">
             <div class="flex items-center gap-x-2">
-                <button mat-icon-button (click)="refreshClicked()">
+                <button mat-icon-button color="primary" (click)="refreshClicked()">
                     <i class="fa fa-refresh" [class.fa-spin]="status === 'loading'"></i>
                 </button>
                 <div>Last updated:</div>
-                <div class="mat-accent font-medium">{{ loadedTimestamp$ | async }}</div>
+                <div class="accent-color font-medium">{{ loadedTimestamp$ | async }}</div>
             </div>
         </div>
     </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/settings.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/settings.component.html
index b674b08196..3a6677ee3d 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/settings.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/settings.component.html
@@ -20,7 +20,7 @@
         <navigation></navigation>
     </header>
     <div class="px-5 flex-1 flex flex-col">
-        <h3 class="text-xl bold mat-primary">NiFi Settings</h3>
+        <h3 class="text-xl bold primary-color">NiFi Settings</h3>
         <div class="settings-tabs">
             <nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel">
                 @for (tab of tabLinks; track tab) {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/edit-flow-analysis-rule/edit-flow-analysis-rule.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/edit-flow-analysis-rule/edit-flow-analysis-rule.component.html
index efa6be4b1e..0f25471b3b 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/edit-flow-analysis-rule/edit-flow-analysis-rule.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/edit-flow-analysis-rule/edit-flow-analysis-rule.component.html
@@ -29,19 +29,19 @@
                         </mat-form-field>
                         <div class="flex flex-col mb-5">
                             <div>Id</div>
-                            <div class="mat-accent font-medium">
+                            <div class="accent-color font-medium">
                                 {{ request.flowAnalysisRule.id }}
                             </div>
                         </div>
                         <div class="flex flex-col mb-5">
                             <div>Type</div>
-                            <div class="mat-accent font-medium">
+                            <div class="accent-color font-medium">
                                 {{ formatType(request.flowAnalysisRule) }}
                             </div>
                         </div>
                         <div class="flex flex-col mb-5">
                             <div>Bundle</div>
-                            <div class="mat-accent font-medium">
+                            <div class="accent-color font-medium">
                                 {{ formatBundle(request.flowAnalysisRule) }}
                             </div>
                         </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rule-table/flow-analysis-rule-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rule-table/flow-analysis-rule-table.component.html
index e0a28098a9..e7ea6e53dc 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rule-table/flow-analysis-rule-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rule-table/flow-analysis-rule-table.component.html
@@ -32,14 +32,14 @@
                     @if (canRead(item)) {
                         <div class="flex items-center gap-x-3">
                             <div
-                                class="pointer fa fa-book"
+                                class="pointer fa fa-book primary-color"
                                 (click)="viewDocumentationClicked(item, $event)"
                                 title="View Documentation"></div>
                             <!-- TODO - handle read only in configure component? -->
                             @if (hasComments(item)) {
                                 <div>
                                     <div
-                                        class="pointer fa fa-comment"
+                                        class="pointer fa fa-comment primary-color"
                                         [delayClose]="false"
                                         nifiTooltip
                                         [tooltipComponentType]="TextTip"
@@ -59,7 +59,7 @@
                             @if (hasBulletins(item)) {
                                 <div>
                                     <div
-                                        class="pointer fa fa-sticky-note-o"
+                                        class="pointer fa fa-sticky-note-o primary-color"
                                         [delayClose]="false"
                                         nifiTooltip
                                         [tooltipComponentType]="BulletinsTip"
@@ -123,26 +123,38 @@
                 <td mat-cell *matCellDef="let item">
                     <div class="flex items-center gap-x-3">
                         @if (canConfigure(item)) {
-                            <div class="pointer fa fa-cog" (click)="configureClicked(item, $event)" title="Edit"></div>
+                            <div
+                                class="pointer fa fa-cog primary-color"
+                                (click)="configureClicked(item, $event)"
+                                title="Edit"></div>
                         }
                         <!-- TODO - handle read only in configure component? -->
                         @if (canDisable(item)) {
                             <div
-                                class="pointer fa icon icon-enable-false"
+                                class="pointer fa icon icon-enable-false primary-color"
                                 (click)="disableClicked(item)"
                                 title="Disable"></div>
                         }
                         @if (canEnable(item)) {
-                            <div class="pointer fa fa-flash" (click)="enabledClicked(item)" title="Enable"></div>
+                            <div
+                                class="pointer fa fa-flash primary-color"
+                                (click)="enabledClicked(item)"
+                                title="Enable"></div>
                         }
                         @if (canChangeVersion(item)) {
-                            <div class="pointer fa fa-exchange" title="Change Version"></div>
+                            <div class="pointer fa fa-exchange primary-color" title="Change Version"></div>
                         }
                         @if (canDelete(item)) {
-                            <div class="pointer fa fa-trash" (click)="deleteClicked(item)" title="Delete"></div>
+                            <div
+                                class="pointer fa fa-trash primary-color"
+                                (click)="deleteClicked(item)"
+                                title="Delete"></div>
                         }
                         @if (canViewState(item)) {
-                            <div class="pointer fa fa-tasks" (click)="viewStateClicked(item)" title="View State"></div>
+                            <div
+                                class="pointer fa fa-tasks primary-color"
+                                (click)="viewStateClicked(item)"
+                                title="View State"></div>
                         }
                     </div>
                 </td>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rule-table/flow-analysis-rule-table.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rule-table/flow-analysis-rule-table.component.ts
index 096894c914..3820103180 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rule-table/flow-analysis-rule-table.component.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rule-table/flow-analysis-rule-table.component.ts
@@ -169,7 +169,7 @@ export class FlowAnalysisRuleTable {
             return 'invalid fa fa-warning';
         } else {
             if (entity.status.runStatus === 'DISABLED') {
-                return 'disabled mat-primary icon icon-enable-false';
+                return 'disabled primary-color icon icon-enable-false';
             } else if (entity.status.runStatus === 'ENABLED') {
                 return 'enabled nifi-success-default fa fa-flash';
             }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rules.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rules.component.html
index ef92ca4da3..e4b84518bb 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rules.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rules.component.html
@@ -25,7 +25,7 @@
             <div class="flex flex-col h-full gap-y-2">
                 @if (currentUser.controllerPermissions.canWrite) {
                     <div class="flex justify-end">
-                        <button mat-icon-button (click)="openNewFlowAnalysisRuleDialog()">
+                        <button mat-icon-button color="primary" (click)="openNewFlowAnalysisRuleDialog()">
                             <i class="fa fa-plus"></i>
                         </button>
                     </div>
@@ -45,11 +45,11 @@
                 </div>
                 <div class="flex justify-between">
                     <div class="refresh-container flex items-center gap-x-2">
-                        <button mat-icon-button (click)="refreshFlowAnalysisRuleListing()">
+                        <button mat-icon-button color="primary" (click)="refreshFlowAnalysisRuleListing()">
                             <i class="fa fa-refresh" [class.fa-spin]="flowAnalysisRuleState.status === 'loading'"></i>
                         </button>
                         <div>Last updated:</div>
-                        <div class="mat-accent font-medium">
+                        <div class="accent-color font-medium">
                             {{ flowAnalysisRuleState.loadedTimestamp }}
                         </div>
                     </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/management-controller-services/management-controller-services.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/management-controller-services/management-controller-services.component.html
index f7877cb959..13c1dc27b1 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/management-controller-services/management-controller-services.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/management-controller-services/management-controller-services.component.html
@@ -25,7 +25,7 @@
             <div class="flex flex-col h-full gap-y-2">
                 @if (currentUser.controllerPermissions.canWrite) {
                     <div class="flex justify-end">
-                        <button mat-icon-button (click)="openNewControllerServiceDialog()">
+                        <button mat-icon-button color="primary" (click)="openNewControllerServiceDialog()">
                             <i class="fa fa-plus"></i>
                         </button>
                     </div>
@@ -50,11 +50,11 @@
                 </div>
                 <div class="flex justify-between">
                     <div class="refresh-container flex items-center gap-x-2">
-                        <button mat-icon-button (click)="refreshControllerServiceListing()">
+                        <button mat-icon-button color="primary" (click)="refreshControllerServiceListing()">
                             <i class="fa fa-refresh" [class.fa-spin]="serviceState.status === 'loading'"></i>
                         </button>
                         <div>Last updated:</div>
-                        <div class="mat-accent font-medium">
+                        <div class="accent-color font-medium">
                             {{ serviceState.loadedTimestamp }}
                         </div>
                     </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/edit-parameter-provider/edit-parameter-provider.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/edit-parameter-provider/edit-parameter-provider.component.html
index 6a4d658573..0c5ed2b361 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/edit-parameter-provider/edit-parameter-provider.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/edit-parameter-provider/edit-parameter-provider.component.html
@@ -31,19 +31,19 @@
                         </div>
                         <div class="flex flex-col mb-5">
                             <div>Id</div>
-                            <div class="mat-accent font-medium">
+                            <div class="accent-color font-medium">
                                 {{ request.parameterProvider.id }}
                             </div>
                         </div>
                         <div class="flex flex-col mb-5">
                             <div>Type</div>
-                            <div class="mat-accent font-medium">
+                            <div class="accent-color font-medium">
                                 {{ formatType(request.parameterProvider) }}
                             </div>
                         </div>
                         <div class="flex flex-col mb-5">
                             <div>Bundle</div>
-                            <div class="mat-accent font-medium">
+                            <div class="accent-color font-medium">
                                 {{ formatBundle(request.parameterProvider) }}
                             </div>
                         </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
index e21e8c8a85..de5bff1f41 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
@@ -25,14 +25,14 @@
                 <div class="flex flex-col flex-1">
                     <div class="flex flex-col mb-4">
                         <div>Name</div>
-                        <div class="mat-accent font-medium">
+                        <div class="accent-color font-medium">
                             {{ parameterProvider.component.name }}
                         </div>
                     </div>
 
                     <div class="flex flex-col mb-4">
                         <div>Parameter Groups</div>
-                        <div class="mat-accent font-medium">
+                        <div class="accent-color font-medium">
                             {{ parameterGroupNames | sort | join }}
                         </div>
                     </div>
@@ -45,14 +45,14 @@
                             <div
                                 *ngFor="let updateStep of requestEntity.updateSteps"
                                 class="flex justify-between items-center">
-                                <div class="mat-accent font-medium">
+                                <div class="accent-color font-medium">
                                     {{ updateStep.description }}
                                 </div>
                                 <div
                                     *ngIf="updateStep.complete; else stepInProgress"
                                     class="fa fa-check complete nifi-success-default"></div>
                                 <ng-template #stepInProgress>
-                                    <div class="fa fa-spin fa-circle-o-notch"></div>
+                                    <div class="fa fa-spin fa-circle-o-notch primary-color"></div>
                                 </ng-template>
                             </div>
                         </div>
@@ -65,12 +65,12 @@
                             <div class="flex flex-row items-center gap-x-2">
                                 Parameter Contexts To Create
                                 <i
-                                    class="fa fa-question-circle"
+                                    class="fa fa-question-circle primary-color"
                                     title="Parameter groups set to be created as parameter contexts, pending apply."></i>
                             </div>
                             <div
                                 *ngIf="Object.keys(parameterContextsToCreate).length > 0; else none"
-                                class="mat-accent font-medium">
+                                class="accent-color font-medium">
                                 {{ Object.values(parameterContextsToCreate) | sort | join }}
                             </div>
                         </div>
@@ -78,10 +78,12 @@
                             <div class="flex flex-row items-center gap-x-2">
                                 Parameter Contexts To Update
                                 <i
-                                    class="fa fa-question-circle"
+                                    class="fa fa-question-circle primary-color"
                                     title="Synced parameter contexts to be updated, pending apply."></i>
                             </div>
-                            <div *ngIf="parameterContextsToUpdate.length > 0; else none" class="mat-accent font-medium">
+                            <div
+                                *ngIf="parameterContextsToUpdate.length > 0; else none"
+                                class="accent-color font-medium">
                                 {{ parameterContextsToUpdate | sort | join }}
                             </div>
                         </div>
@@ -89,7 +91,7 @@
                             <div class="flex flex-row items-center gap-x-2">
                                 Affected Referencing Components
                                 <i
-                                    class="fa fa-question-circle"
+                                    class="fa fa-question-circle primary-color"
                                     title="Affected components referencing this parameter provider."></i>
                             </div>
                             <div class="relative h-full border">
@@ -116,7 +118,7 @@
                     <div class="flex flex-col flex-1">
                         <div class="flex flex-col mb-4">
                             <div>Name</div>
-                            <div class="mat-accent font-medium">
+                            <div class="accent-color font-medium">
                                 {{ parameterProvider.component.name }}
                             </div>
                         </div>
@@ -125,7 +127,7 @@
                             <div class="flex flex-row items-center gap-x-2">
                                 Select To Configure a Parameter Group
                                 <i
-                                    class="fa fa-question-circle"
+                                    class="fa fa-question-circle primary-color"
                                     title="Discovered parameter groups from this parameter provider. Select a group to create a parameter context, then configure its parameter sensitivities."></i>
                             </div>
                             <div class="flex-1">
@@ -173,7 +175,7 @@
                                 <ng-template #paramContextSynced>
                                     <div class="flex flex-col">
                                         <div>Parameter Context Name</div>
-                                        <div class="mat-accent font-medium">
+                                        <div class="accent-color font-medium">
                                             {{ parameterGroupConfig.parameterContextName }}
                                         </div>
                                     </div>
@@ -185,7 +187,7 @@
                                         <div class="flex items-center gap-x-2">
                                             Fetched Parameters
                                             <i
-                                                class="fa fa-question-circle"
+                                                class="fa fa-question-circle primary-color"
                                                 title="Discovered parameters from the selected parameter group."></i>
                                         </div>
                                         <ul class="flex-1 overflow-y-auto border px-2">
@@ -195,7 +197,7 @@
                                                         parameterGroupConfig.parameterSensitivities
                                                     )
                                                 "
-                                                class="mat-accent font-medium">
+                                                class="accent-color font-medium">
                                                 {{ param[0] }}
                                             </li>
                                         </ul>
@@ -207,7 +209,7 @@
                                         <div class="flex flex-row items-center gap-x-2">
                                             Select Parameters To Be Set As Sensitive
                                             <i
-                                                class="fa fa-question-circle"
+                                                class="fa fa-question-circle primary-color"
                                                 title="Only parameters that are not referenced can be modified."></i>
                                         </div>
 
@@ -253,11 +255,11 @@
                                                         <td mat-cell *matCellDef="let item">
                                                             <div class="flex items-center gap-x-3 justify-end">
                                                                 <div
-                                                                    class="fa fa-hashtag"
+                                                                    class="fa fa-hashtag primary-color"
                                                                     title="Parameter is currently referenced by a property. The sensitivity cannot be changed."
                                                                     *ngIf="isReferenced(item)"></div>
                                                                 <div
-                                                                    class="fa fa-asterisk"
+                                                                    class="fa fa-asterisk primary-color"
                                                                     [title]="getAffectedTooltip(item)"
                                                                     *ngIf="isAffected(item)"></div>
                                                             </div>
@@ -287,12 +289,12 @@
                                 <div class="flex flex-row items-center gap-x-2">
                                     Parameter Contexts To Create
                                     <i
-                                        class="fa fa-question-circle"
+                                        class="fa fa-question-circle primary-color"
                                         title="Parameter groups set to be created as parameter contexts, pending apply."></i>
                                 </div>
                                 <div
                                     *ngIf="Object.keys(parameterContextsToCreate).length > 0; else none"
-                                    class="mat-accent font-medium">
+                                    class="accent-color font-medium">
                                     {{ Object.values(parameterContextsToCreate) | sort | join }}
                                 </div>
                             </div>
@@ -300,12 +302,12 @@
                                 <div class="flex flex-row items-center gap-x-2">
                                     Parameter Contexts To Update
                                     <i
-                                        class="fa fa-question-circle"
+                                        class="fa fa-question-circle primary-color"
                                         title="Synced parameter contexts to be updated, pending apply."></i>
                                 </div>
                                 <div
                                     *ngIf="parameterContextsToUpdate.length > 0; else none"
-                                    class="mat-accent font-medium">
+                                    class="accent-color font-medium">
                                     {{ parameterContextsToUpdate | sort | join }}
                                 </div>
                             </div>
@@ -313,7 +315,7 @@
                                 <div class="flex flex-row items-center gap-x-2">
                                     Referencing Components
                                     <i
-                                        class="fa fa-question-circle"
+                                        class="fa fa-question-circle primary-color"
                                         title="Components referencing this selected parameter."></i>
                                 </div>
                                 <div class="relative h-full border">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/parameter-groups-table/parameter-groups-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/parameter-groups-table/parameter-groups-table.component.html
index e7ce6d45a5..fa6854bda4 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/parameter-groups-table/parameter-groups-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/parameter-groups-table/parameter-groups-table.component.html
@@ -38,7 +38,9 @@
                     <td mat-cell *matCellDef="let item">
                         <div class="flex items-center gap-x-3">
                             @if (isSyncedToParameterContext(item)) {
-                                <div class="fa fa-star" title="Synced to a parameter context."></div>
+                                <div
+                                    class="fa fa-star primary-color"
+                                    title="Synced to a parameter context."></div>
                             }
                         </div>
                     </td>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-context-references/parameter-providers-references.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-context-references/parameter-providers-references.component.html
index b27c1fe831..ce0e5a60eb 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-context-references/parameter-providers-references.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-context-references/parameter-providers-references.component.html
@@ -17,7 +17,7 @@
 
 <div class="parameter-provider-references">
     @if (!parameterProviderReferences || parameterProviderReferences.length === 0) {
-        <div class="mat-accent font-medium">No referencing components</div>
+        <div class="accent-color font-medium">No referencing components</div>
     } @else {
         <ul>
             <ng-container
@@ -43,7 +43,7 @@
         @if (references.length > 0) {
             <li>
                 <h4>
-                    <span class="mat-accent font-medium">{{ label }}</span> ({{ references.length }})
+                    <span class="accent-color font-medium">{{ label }}</span> ({{ references.length }})
                 </h4>
                 <div class="references">
                     @for (reference of references; track reference) {
@@ -62,7 +62,7 @@
         @if (references.length > 0) {
             <li>
                 <h4>
-                    <span class="mat-accent font-medium">{{ label }}</span> ({{ references.length }})
+                    <span class="accent-color font-medium">{{ label }}</span> ({{ references.length }})
                 </h4>
                 <div class="references">
                     @for (reference of references; track reference) {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-providers-table/parameter-providers-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-providers-table/parameter-providers-table.component.html
index b74ae2d92b..243e353ce2 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-providers-table/parameter-providers-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-providers-table/parameter-providers-table.component.html
@@ -34,10 +34,12 @@
                             @if (canRead(item)) {
                                 <div class="flex items-center gap-x-3">
                                     <!-- TODO: open details -->
-                                    <div class="pointer fa fa-info-circle" title="View details"></div>
+                                    <div
+                                        class="pointer fa fa-info-circle primary-color"
+                                        title="View details"></div>
 
                                     <div
-                                        class="pointer fa fa-book"
+                                        class="pointer fa fa-book primary-color"
                                         (click)="viewDocumentationClicked(item, $event)"
                                         title="View Documentation"></div>
 
@@ -99,31 +101,31 @@
                             <div class="flex items-center gap-x-3">
                                 @if (canConfigure(item)) {
                                     <div
-                                        class="pointer fa fa-cog"
+                                        class="pointer fa fa-cog primary-color"
                                         (click)="configureClicked(item, $event)"
                                         title="Edit"></div>
                                 }
                                 @if (hasAdvancedUi(item)) {
                                     <div
-                                        class="pointer fa fa-cogs"
+                                        class="pointer fa fa-cogs primary-color"
                                         (click)="advancedClicked(item, $event)"
                                         title="Advanced"></div>
                                 }
                                 @if (canFetch(item)) {
                                     <div
-                                        class="pointer fa fa-arrow-circle-down"
+                                        class="pointer fa fa-arrow-circle-down primary-color"
                                         (click)="fetchClicked(item, $event)"
                                         title="Fetch Parameters"></div>
                                 }
                                 @if (canDelete(item)) {
                                     <div
-                                        class="pointer fa fa-trash"
+                                        class="pointer fa fa-trash primary-color"
                                         (click)="deleteClicked(item, $event)"
                                         title="Remove"></div>
                                 }
                                 @if (canManageAccessPolicies()) {
                                     <div
-                                        class="pointer fa fa-key"
+                                        class="pointer fa fa-key primary-color"
                                         (click)="$event.stopPropagation()"
                                         [routerLink]="getPolicyLink(item)"
                                         title="Access Policies"></div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-providers.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-providers.component.html
index 55d38c3123..3350d21c42 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-providers.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-providers.component.html
@@ -27,6 +27,7 @@
                     <div class="flex justify-end">
                         <button
                             mat-icon-button
+                            color="primary"
                             (click)="openNewParameterProviderDialog()"
                             title="Add a new parameter provider">
                             <i class="fa fa-plus"></i>
@@ -48,11 +49,11 @@
                 </div>
                 <div class="flex justify-between">
                     <div class="refresh-container flex items-center gap-x-2">
-                        <button mat-icon-button (click)="refreshParameterProvidersListing()">
+                        <button mat-icon-button color="primary" (click)="refreshParameterProvidersListing()">
                             <i class="fa fa-refresh" [class.fa-spin]="parameterProvidersState.status === 'loading'"></i>
                         </button>
                         <div>Last updated:</div>
-                        <div class="mat-accent font-medium">
+                        <div class="accent-color font-medium">
                             {{ parameterProvidersState.loadedTimestamp }}
                         </div>
                     </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/edit-registry-client/edit-registry-client.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/edit-registry-client/edit-registry-client.component.html
index cac555da21..308c1804a7 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/edit-registry-client/edit-registry-client.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/edit-registry-client/edit-registry-client.component.html
@@ -24,7 +24,7 @@
                 <div class="tab-content py-4 flex flex-col">
                     <div class="flex flex-col mb-5">
                         <div>Id</div>
-                        <div class="mat-accent font-medium">
+                        <div class="accent-color font-medium">
                             {{ request.registryClient.id }}
                         </div>
                     </div>
@@ -36,7 +36,7 @@
                     </div>
                     <div class="flex flex-col mb-5">
                         <div>Id</div>
-                        <div class="mat-accent font-medium">
+                        <div class="accent-color font-medium">
                             {{ request.registryClient.component.type }}
                         </div>
                     </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-client-table/registry-client-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-client-table/registry-client-table.component.html
index c63dfc89e2..2423a43001 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-client-table/registry-client-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-client-table/registry-client-table.component.html
@@ -41,7 +41,7 @@
                             }
                             @if (hasBulletins(item)) {
                                 <div
-                                    class="mr-3 pointer fa fa-sticky-note-o"
+                                    class="mr-3 pointer fa fa-sticky-note-o primary-color"
                                     nifiTooltip
                                     [tooltipComponentType]="BulletinsTip"
                                     [tooltipInputData]="getBulletinsTipData(item)"></div>
@@ -101,10 +101,16 @@
                 <td mat-cell *matCellDef="let item">
                     <div class="flex items-center gap-x-3">
                         @if (canConfigure(item)) {
-                            <div class="pointer fa fa-cog" (click)="configureClicked(item, $event)" title="Edit"></div>
+                            <div
+                                class="pointer fa fa-cog primary-color"
+                                (click)="configureClicked(item, $event)"
+                                title="Edit"></div>
                         }
                         @if (canDelete(item)) {
-                            <div class="pointer fa fa-trash" (click)="deleteClicked(item, $event)" title="Delete"></div>
+                            <div
+                                class="pointer fa fa-trash primary-color"
+                                (click)="deleteClicked(item, $event)"
+                                title="Delete"></div>
                         }
                     </div>
                 </td>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-clients.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-clients.component.html
index e7ac9c9b5b..f538f16319 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-clients.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-clients.component.html
@@ -25,7 +25,7 @@
             <div class="flex flex-col h-full gap-y-2">
                 @if (currentUser.controllerPermissions.canWrite) {
                     <div class="flex justify-end">
-                        <button mat-icon-button (click)="openNewRegistryClientDialog()">
+                        <button mat-icon-button color="primary" (click)="openNewRegistryClientDialog()">
                             <i class="fa fa-plus"></i>
                         </button>
                     </div>
@@ -40,11 +40,11 @@
                 </div>
                 <div class="flex justify-between">
                     <div class="refresh-container flex items-center gap-x-2">
-                        <button mat-icon-button (click)="refreshRegistryClientListing()">
+                        <button mat-icon-button color="primary" (click)="refreshRegistryClientListing()">
                             <i class="fa fa-refresh" [class.fa-spin]="registryClientState.status === 'loading'"></i>
                         </button>
                         <div>Last updated:</div>
-                        <div class="mat-accent font-medium">
+                        <div class="accent-color font-medium">
                             {{ registryClientState.loadedTimestamp }}
                         </div>
                     </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/edit-reporting-task/edit-reporting-task.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/edit-reporting-task/edit-reporting-task.component.html
index 25a080f37b..f92a2cb13f 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/edit-reporting-task/edit-reporting-task.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/edit-reporting-task/edit-reporting-task.component.html
@@ -32,19 +32,19 @@
                         </div>
                         <div class="flex flex-col mb-5">
                             <div>Id</div>
-                            <div class="mat-accent font-medium">
+                            <div class="accent-color font-medium">
                                 {{ request.reportingTask.id }}
                             </div>
                         </div>
                         <div class="flex flex-col mb-5">
                             <div>Type</div>
-                            <div class="mat-accent font-medium">
+                            <div class="accent-color font-medium">
                                 {{ formatType(request.reportingTask) }}
                             </div>
                         </div>
                         <div class="flex flex-col mb-5">
                             <div>Bundle</div>
-                            <div class="mat-accent font-medium">
+                            <div class="accent-color font-medium">
                                 {{ formatBundle(request.reportingTask) }}
                             </div>
                         </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-task-table/reporting-task-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-task-table/reporting-task-table.component.html
index 737fee71c0..8b22b12092 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-task-table/reporting-task-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-task-table/reporting-task-table.component.html
@@ -32,14 +32,14 @@
                     @if (canRead(item)) {
                         <div class="flex items-center gap-x-3">
                             <div
-                                class="pointer fa fa-book"
+                                class="pointer fa fa-book primary-color"
                                 (click)="viewDocumentationClicked(item, $event)"
                                 title="View Documentation"></div>
                             <!-- TODO - handle read only in configure component? -->
                             @if (hasComments(item)) {
                                 <div>
                                     <div
-                                        class="pointer fa fa-comment"
+                                        class="pointer fa fa-comment primary-color"
                                         [delayClose]="false"
                                         nifiTooltip
                                         [tooltipComponentType]="TextTip"
@@ -59,7 +59,7 @@
                             @if (hasBulletins(item)) {
                                 <div>
                                     <div
-                                        class="pointer fa fa-sticky-note-o"
+                                        class="pointer fa fa-sticky-note-o primary-color"
                                         [delayClose]="false"
                                         nifiTooltip
                                         [tooltipComponentType]="BulletinsTip"
@@ -117,32 +117,47 @@
                 <td mat-cell *matCellDef="let item">
                     <div class="flex items-center gap-x-3">
                         @if (canStop(item)) {
-                            <div class="pointer fa fa-stop" (click)="stopClicked(item)" title="Stop"></div>
+                            <div
+                                class="pointer fa fa-stop primary-color"
+                                (click)="stopClicked(item)"
+                                title="Stop"></div>
                         }
                         @if (canEdit(item)) {
-                            <div class="pointer fa fa-cog" (click)="configureClicked(item, $event)" title="Edit"></div>
+                            <div
+                                class="pointer fa fa-cog primary-color"
+                                (click)="configureClicked(item, $event)"
+                                title="Edit"></div>
                         }
                         @if (hasAdvancedUi(item)) {
                             <div
-                                class="pointer fa fa-cogs"
+                                class="pointer fa fa-cogs primary-color"
                                 (click)="advancedClicked(item, $event)"
                                 title="Advanced"></div>
                         }
                         @if (canStart(item)) {
-                            <div class="pointer fa fa-play" (click)="startClicked(item)" title="Start"></div>
+                            <div
+                                class="pointer fa fa-play primary-color"
+                                (click)="startClicked(item)"
+                                title="Start"></div>
                         }
                         @if (canChangeVersion(item)) {
-                            <div class="pointer fa fa-exchange" title="Change Version"></div>
+                            <div class="pointer fa fa-exchange primary-color" title="Change Version"></div>
                         }
                         @if (canDelete(item)) {
-                            <div class="pointer fa fa-trash" (click)="deleteClicked(item)" title="Delete"></div>
+                            <div
+                                class="pointer fa fa-trash primary-color"
+                                (click)="deleteClicked(item)"
+                                title="Delete"></div>
                         }
                         @if (canViewState(item)) {
-                            <div class="pointer fa fa-tasks" (click)="viewStateClicked(item)" title="View State"></div>
+                            <div
+                                class="pointer fa fa-tasks primary-color"
+                                (click)="viewStateClicked(item)"
+                                title="View State"></div>
                         }
                         @if (canManageAccessPolicies()) {
                             <div
-                                class="pointer fa fa-key"
+                                class="pointer fa fa-key primary-color"
                                 (click)="$event.stopPropagation()"
                                 [routerLink]="getPolicyLink(item)"
                                 title="Access Policies"></div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-task-table/reporting-task-table.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-task-table/reporting-task-table.component.ts
index 3001b7cce0..d0926222f5 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-task-table/reporting-task-table.component.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-task-table/reporting-task-table.component.ts
@@ -129,7 +129,7 @@ export class ReportingTaskTable {
             } else if (entity.status.runStatus === 'RUNNING') {
                 return 'fa fa-play nifi-success-lighter running';
             } else {
-                return 'icon icon-enable-false mat-primary disabled';
+                return 'icon icon-enable-false primary-color disabled';
             }
         }
     }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-tasks.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-tasks.component.html
index 5014fda60b..4105bad1c0 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-tasks.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-tasks.component.html
@@ -25,7 +25,7 @@
             <div class="flex flex-col h-full gap-y-2">
                 @if (currentUser.controllerPermissions.canWrite) {
                     <div class="flex justify-end">
-                        <button mat-icon-button (click)="openNewReportingTaskDialog()">
+                        <button mat-icon-button color="primary" (click)="openNewReportingTaskDialog()">
                             <i class="fa fa-plus"></i>
                         </button>
                     </div>
@@ -47,11 +47,11 @@
                 </div>
                 <div class="flex justify-between">
                     <div class="refresh-container flex items-center gap-x-2">
-                        <button mat-icon-button (click)="refreshReportingTaskListing()">
+                        <button mat-icon-button color="primary" (click)="refreshReportingTaskListing()">
                             <i class="fa fa-refresh" [class.fa-spin]="reportingTaskState.status === 'loading'"></i>
                         </button>
                         <div>Last updated:</div>
-                        <div class="mat-accent font-medium">
+                        <div class="accent-color font-medium">
                             {{ reportingTaskState.loadedTimestamp }}
                         </div>
                     </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/summary.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/summary.component.html
index bcc1aea609..c497390b6c 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/summary.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/summary.component.html
@@ -20,7 +20,7 @@
         <navigation></navigation>
     </header>
     <div class="px-5 flex-1 flex flex-col gap-y-2">
-        <h3 class="text-xl bold mat-primary">
+        <h3 class="text-xl bold primary-color">
             @if (selectedClusterNode$ | async; as selectedNode) {
                 @if (selectedNode.id !== 'All') {
                     {{ selectedNode.address }} Summary
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.html
index 9e394b12ea..83d0af754b 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.html
@@ -72,11 +72,11 @@
     <mat-dialog-actions>
         <div class="flex justify-between align-middle w-full">
             <div class="refresh-container flex items-center gap-x-2">
-                <button mat-icon-button (click)="refresh()">
+                <button mat-icon-button color="primary" (click)="refresh()">
                     <i class="fa fa-refresh" [class.fa-spin]="loading$ | async"></i>
                 </button>
                 <div>Last updated:</div>
-                <div class="mat-accent font-medium">{{ loadedTimestamp$ | async }}</div>
+                <div class="accent-color font-medium">{{ loadedTimestamp$ | async }}</div>
             </div>
 
             <button mat-button mat-dialog-close tabindex="0">Close</button>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/port-cluster-table/port-cluster-table.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/port-cluster-table/port-cluster-table.component.ts
index de0a91091b..f672746fee 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/port-cluster-table/port-cluster-table.component.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/port-cluster-table/port-cluster-table.component.ts
@@ -115,7 +115,7 @@ export class PortClusterTable extends ComponentClusterTable<NodePortStatusSnapsh
             case 'enabled':
                 return 'enabled fa fa-flash nifi-success-default';
             case 'disabled':
-                return 'disabled icon icon-enable-false mat-primary';
+                return 'disabled icon icon-enable-false primary-color';
             case 'validating':
                 return 'validating fa fa-spin fa-circle-notch nifi-surface-default';
             case 'invalid':
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/processor-cluster-table/processor-cluster-table.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/processor-cluster-table/processor-cluster-table.component.ts
index e1db8bae9f..494a43fabf 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/processor-cluster-table/processor-cluster-table.component.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/processor-cluster-table/processor-cluster-table.component.ts
@@ -126,7 +126,7 @@ export class ProcessorClusterTable extends ComponentClusterTable<NodeProcessorSt
             case 'enabled':
                 return 'enabled fa fa-flash nifi-success-default';
             case 'disabled':
-                return 'disabled icon icon-enable-false mat-primary';
+                return 'disabled icon icon-enable-false primary-color';
             case 'validating':
                 return 'validating fa fa-spin fa-circle-notch nifi-surface-default';
             case 'invalid':
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/remote-process-group-cluster-table/remote-process-group-cluster-table.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/remote-process-group-cluster-table/remote-process-group-cluster-table.component.ts
index 0142898439..6fc124b858 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/remote-process-group-cluster-table/remote-process-group-cluster-table.component.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/remote-process-group-cluster-table/remote-process-group-cluster-table.component.ts
@@ -114,7 +114,7 @@ export class RemoteProcessGroupClusterTable extends ComponentClusterTable<NodeRe
         if (rpg.statusSnapshot.transmissionStatus === 'Transmitting') {
             return 'transmitting nifi-success-default fa fa-bullseye';
         } else {
-            return 'not-transmitting icon icon-transmit-false';
+            return 'not-transmitting icon icon-transmit-false primary-color';
         }
     }
 }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/port-status-table/port-status-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/port-status-table/port-status-table.component.html
index e94605cf51..cea9d57082 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/port-status-table/port-status-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/port-status-table/port-status-table.component.html
@@ -142,13 +142,13 @@
                                 <td mat-cell *matCellDef="let item">
                                     <div class="flex items-center gap-x-3">
                                         <div
-                                            class="pointer fa fa-long-arrow-right"
+                                            class="pointer fa fa-long-arrow-right primary-color"
                                             [routerLink]="getPortLink(item)"
                                             (click)="$event.stopPropagation()"
                                             title="Go to {{ portType }} port"></div>
                                         @if (connectedToCluster) {
                                             <div
-                                                class="pointer fa fa-cubes"
+                                                class="pointer fa fa-cubes primary-color"
                                                 title="View Clustered {{ portType | titlecase }} Port Details"
                                                 (click)="viewClusteredDetailsClicked($event, item)"></div>
                                         }
@@ -171,11 +171,11 @@
     </div>
     <div class="flex justify-between align-middle">
         <div class="refresh-container flex items-center gap-x-2">
-            <button mat-icon-button (click)="refresh.next()">
+            <button mat-icon-button color="primary" (click)="refresh.next()">
                 <i class="fa fa-refresh" [class.fa-spin]="summaryListingStatus === 'loading'"></i>
             </button>
             <div>Last updated:</div>
-            <div class="mat-accent font-medium">{{ loadedTimestamp }}</div>
+            <div class="accent-color font-medium">{{ loadedTimestamp }}</div>
         </div>
         <div>
             <mat-paginator
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/port-status-table/port-status-table.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/port-status-table/port-status-table.component.ts
index 4e0ee1b09f..93bc42e6bc 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/port-status-table/port-status-table.component.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/port-status-table/port-status-table.component.ts
@@ -112,7 +112,7 @@ export class PortStatusTable extends ComponentStatusTable<PortStatusSnapshotEnti
             case 'enabled':
                 return 'enabled fa fa-flash nifi-success-default';
             case 'disabled':
-                return 'disabled icon icon-enable-false mat-primary';
+                return 'disabled icon icon-enable-false primary-color';
             case 'validating':
                 return 'validating fa fa-spin fa-circle-notch nifi-surface-default';
             case 'invalid':
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/summary-table-filter/summary-table-filter.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/summary-table-filter/summary-table-filter.component.html
index 662d0a2d26..1c5cc29efc 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/summary-table-filter/summary-table-filter.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/summary-table-filter/summary-table-filter.component.html
@@ -16,7 +16,7 @@
 -->
 
 <div class="summary-table-filter-container">
-    <div class="mat-accent font-medium {{ showFilterMatchedLabel ? 'visible' : 'invisible' }}">
+    <div class="accent-color font-medium {{ showFilterMatchedLabel ? 'visible' : 'invisible' }}">
         Filter matched {{ filteredCount }} of {{ totalCount }}
     </div>
     <form [formGroup]="filterForm">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/connection-status-listing/connection-status-table/connection-status-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/connection-status-listing/connection-status-table/connection-status-table.component.html
index 00dcd8060b..9893020bcb 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/connection-status-listing/connection-status-table/connection-status-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/connection-status-listing/connection-status-table/connection-status-table.component.html
@@ -206,19 +206,19 @@
                                 <td mat-cell *matCellDef="let item">
                                     <div class="flex items-center gap-x-3">
                                         <div
-                                            class="pointer fa fa-long-arrow-right"
+                                            class="pointer fa fa-long-arrow-right primary-color"
                                             [routerLink]="getConnectionLink(item)"
                                             (click)="$event.stopPropagation()"
                                             title="Go to connection"></div>
 
                                         <div
-                                            class="pointer fa fa-area-chart"
+                                            class="pointer fa fa-area-chart primary-color"
                                             title="View Status History"
                                             (click)="viewStatusHistoryClicked($event, item)"></div>
 
                                         @if (connectedToCluster) {
                                             <div
-                                                class="pointer fa fa-cubes"
+                                                class="pointer fa fa-cubes primary-color"
                                                 title="View Clustered Connection Details"
                                                 (click)="viewClusteredDetailsClicked($event, item)"></div>
                                         }
@@ -241,11 +241,11 @@
     </div>
     <div class="flex justify-between align-middle">
         <div class="refresh-container flex items-center gap-x-2">
-            <button mat-icon-button (click)="refresh.next()">
+            <button mat-icon-button color="primary" (click)="refresh.next()">
                 <i class="fa fa-refresh" [class.fa-spin]="summaryListingStatus === 'loading'"></i>
             </button>
             <div>Last updated:</div>
-            <div class="mat-accent font-medium">{{ loadedTimestamp }}</div>
+            <div class="accent-color font-medium">{{ loadedTimestamp }}</div>
         </div>
         <div>
             <mat-paginator
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/process-group-status-listing/process-group-status-table/process-group-status-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/process-group-status-listing/process-group-status-table/process-group-status-table.component.html
index c6b98254e0..a7b4494bb0 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/process-group-status-listing/process-group-status-table/process-group-status-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/process-group-status-listing/process-group-status-table/process-group-status-table.component.html
@@ -48,7 +48,7 @@
                                             <!-- TODO - handle read only in configure component? -->
                                             @if (canRead(item)) {
                                                 <div
-                                                    class="pointer fa fa-info-circle"
+                                                    class="pointer fa fa-info-circle primary-color"
                                                     title="View Process Group Details"></div>
                                             }
                                         </div>
@@ -332,7 +332,7 @@
                                 <td mat-cell *matCellDef="let item">
                                     <div class="flex items-center gap-x-3">
                                         <div
-                                            class="pointer fa fa-long-arrow-right"
+                                            class="pointer fa fa-long-arrow-right primary-color"
                                             [routerLink]="getProcessGroupLink(item)"
                                             (click)="$event.stopPropagation()"
                                             title="Go to Process Group {{
@@ -340,13 +340,13 @@
                                             }}"></div>
 
                                         <div
-                                            class="pointer fa fa-area-chart"
+                                            class="pointer fa fa-area-chart primary-color"
                                             title="View Status History"
                                             (click)="viewStatusHistoryClicked($event, item)"></div>
 
                                         @if (connectedToCluster) {
                                             <div
-                                                class="pointer fa fa-cubes"
+                                                class="pointer fa fa-cubes primary-color"
                                                 title="View Clustered Process Group Details"
                                                 (click)="viewClusteredDetailsClicked($event, item)"></div>
                                         }
@@ -369,11 +369,11 @@
     </div>
     <div class="flex justify-between align-middle">
         <div class="refresh-container flex items-center gap-x-2">
-            <button mat-icon-button (click)="refresh.next()">
+            <button mat-icon-button color="primary" (click)="refresh.next()">
                 <i class="fa fa-refresh" [class.fa-spin]="summaryListingStatus === 'loading'"></i>
             </button>
             <div>Last updated:</div>
-            <div class="mat-accent font-medium">{{ loadedTimestamp }}</div>
+            <div class="accent-color font-medium">{{ loadedTimestamp }}</div>
         </div>
         <div>
             <mat-paginator
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/_processor-status-table.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/_processor-status-table.component-theme.scss
index 4a5446df51..1fee8dbafa 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/_processor-status-table.component-theme.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/_processor-status-table.component-theme.scss
@@ -24,12 +24,10 @@
     $nifi-theme-color-config: mat.get-color-config($nifi-theme);
 
     $surface: utils.get-surface($nifi-theme-color-config);
-    $on-surface: utils.get-on-surface($nifi-theme-color-config);
 
     .processor-status-table {
         .primary-node-only {
             min-width: 16px;
-            color: $on-surface;
             background-color: $surface;
         }
     }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.html
index caf926bd66..a71f5e6082 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.html
@@ -48,7 +48,7 @@
                                             <!-- TODO - handle read only in configure component? -->
                                             @if (canRead(item)) {
                                                 <div
-                                                    class="pointer fa fa-info-circle"
+                                                    class="pointer fa fa-info-circle primary-color"
                                                     title="View Processor Details"></div>
                                             }
                                         </div>
@@ -65,7 +65,7 @@
                                     <div class="flex align-middle">
                                         @if (item.processorStatusSnapshot.executionNode === 'PRIMARY') {
                                             <div
-                                                class="primary-node-only border mt-0.5 mr-1"
+                                                class="primary-node-only border on-surface-default mt-0.5 mr-1"
                                                 title="This component is only scheduled to execute on the Primary Node">
                                                 P
                                             </div>
@@ -248,7 +248,7 @@
                                 <td mat-cell *matCellDef="let item">
                                     <div class="flex items-center gap-x-3">
                                         <div
-                                            class="pointer fa fa-long-arrow-right"
+                                            class="pointer fa fa-long-arrow-right primary-color"
                                             [routerLink]="getProcessorLink(item)"
                                             (click)="$event.stopPropagation()"
                                             title="Go to Processor in {{
@@ -256,13 +256,13 @@
                                             }}"></div>
 
                                         <div
-                                            class="pointer fa fa-area-chart"
+                                            class="pointer fa fa-area-chart primary-color"
                                             title="View Status History"
                                             (click)="viewStatusHistoryClicked($event, item)"></div>
 
                                         @if (connectedToCluster) {
                                             <div
-                                                class="pointer fa fa-cubes"
+                                                class="pointer fa fa-cubes primary-color"
                                                 title="View Clustered Processor Details"
                                                 (click)="viewClusteredDetailsClicked($event, item)"></div>
                                         }
@@ -285,11 +285,11 @@
     </div>
     <div class="flex justify-between align-middle">
         <div class="refresh-container flex items-center gap-x-2">
-            <button mat-icon-button (click)="refresh.next()">
+            <button mat-icon-button color="primary" (click)="refresh.next()">
                 <i class="fa fa-refresh" [class.fa-spin]="summaryListingStatus === 'loading'"></i>
             </button>
             <div>Last updated:</div>
-            <div class="mat-accent font-medium">{{ loadedTimestamp }}</div>
+            <div class="accent-color font-medium">{{ loadedTimestamp }}</div>
         </div>
         <div>
             <mat-paginator
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.ts
index 5325008a7e..a19e78b2fe 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.ts
@@ -118,7 +118,7 @@ export class ProcessorStatusTable extends ComponentStatusTable<ProcessorStatusSn
             case 'enabled':
                 return 'enabled fa fa-flash nifi-success-default';
             case 'disabled':
-                return 'disabled icon icon-enable-false mat-primary';
+                return 'disabled icon icon-enable-false primary-color';
             case 'validating':
                 return 'validating fa fa-spin fa-circle-notch nifi-surface-default';
             case 'invalid':
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.html
index 77a3ede705..16b02a7973 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.html
@@ -148,19 +148,19 @@
                                 <td mat-cell *matCellDef="let item">
                                     <div class="flex items-center gap-x-3">
                                         <div
-                                            class="pointer fa fa-long-arrow-right"
+                                            class="pointer fa fa-long-arrow-right primary-color"
                                             [routerLink]="getRemoteProcessGroupLink(item)"
                                             (click)="$event.stopPropagation()"
                                             title="Go to remote process group"></div>
 
                                         <div
-                                            class="pointer fa fa-area-chart"
+                                            class="pointer fa fa-area-chart primary-color"
                                             title="View Status History"
                                             (click)="viewStatusHistoryClicked($event, item)"></div>
 
                                         @if (connectedToCluster) {
                                             <div
-                                                class="pointer fa fa-cubes"
+                                                class="pointer fa fa-cubes primary-color"
                                                 title="View Clustered Remote Process Group Details"
                                                 (click)="viewClusteredDetailsClicked($event, item)"></div>
                                         }
@@ -183,11 +183,11 @@
     </div>
     <div class="flex justify-between align-middle">
         <div class="refresh-container flex items-center gap-x-2">
-            <button mat-icon-button (click)="refresh.next()">
+            <button mat-icon-button color="primary" (click)="refresh.next()">
                 <i class="fa fa-refresh" [class.fa-spin]="summaryListingStatus === 'loading'"></i>
             </button>
             <div>Last updated:</div>
-            <div class="mat-accent font-medium">{{ loadedTimestamp }}</div>
+            <div class="accent-color font-medium">{{ loadedTimestamp }}</div>
         </div>
         <div>
             <mat-paginator
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.ts
index d5cd5ce242..42dcf8fda5 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.ts
@@ -111,7 +111,7 @@ export class RemoteProcessGroupStatusTable extends ComponentStatusTable<RemotePr
         if (rpg.remoteProcessGroupStatusSnapshot.transmissionStatus === 'Transmitting') {
             return 'transmitting nifi-success-default fa fa-bullseye';
         } else {
-            return 'not-transmitting icon icon-transmit-false';
+            return 'not-transmitting icon icon-transmit-false primary-color';
         }
     }
 
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/users.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/users.component.html
index 99008dda2c..20b8d89fb4 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/users.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/users.component.html
@@ -20,7 +20,7 @@
         <navigation></navigation>
     </header>
     <div class="px-5 flex-1 flex flex-col">
-        <h3 class="text-xl bold user-header mat-primary">NiFi Users</h3>
+        <h3 class="text-xl bold user-header primary-color">NiFi Users</h3>
         <user-listing class="flex-1"></user-listing>
     </div>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-access-policies/user-access-policies.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-access-policies/user-access-policies.component.html
index 1bd4ddfcdf..3a1cc525f0 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-access-policies/user-access-policies.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-access-policies/user-access-policies.component.html
@@ -21,7 +21,7 @@
         <div class="flex flex-col justify-between gap-y-3">
             <div class="flex flex-col">
                 <div>User</div>
-                <div class="mat-accent font-medium">{{ request.identity }}</div>
+                <div class="accent-color font-medium">{{ request.identity }}</div>
             </div>
             <div class="listing-table">
                 <div class="h-96 overflow-y-auto overflow-x-hidden">
@@ -61,7 +61,7 @@
                             <td mat-cell *matCellDef="let item">
                                 @if (canGoToPolicyTarget(item)) {
                                     <div
-                                        class="pointer fa fa-long-arrow-right"
+                                        class="pointer fa fa-long-arrow-right primary-color"
                                         [routerLink]="getPolicyTargetLink(item)"
                                         mat-dialog-close="ROUTED"
                                         title="Go to"></div>
@@ -79,7 +79,7 @@
                     </table>
                 </div>
             </div>
-            <div class="mat-accent font-medium">
+            <div class="accent-color font-medium">
                 Some policies may be inherited by descendant components unless explicitly overridden.
             </div>
         </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-listing.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-listing.component.html
index b26afa10fc..f235a27ebc 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-listing.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-listing.component.html
@@ -41,11 +41,11 @@
             }
             <div class="flex justify-between">
                 <div class="refresh-container flex items-center gap-x-2">
-                    <button mat-icon-button (click)="refreshUserListing()">
+                    <button mat-icon-button color="primary" (click)="refreshUserListing()">
                         <i class="fa fa-refresh" [class.fa-spin]="userListingState.status === 'loading'"></i>
                     </button>
                     <div>Last updated:</div>
-                    <div class="mat-accent font-medium">
+                    <div class="accent-color font-medium">
                         {{ userListingState.loadedTimestamp }}
                     </div>
                 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-table/user-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-table/user-table.component.html
index 644cddd67a..1c298fa5f7 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-table/user-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-table/user-table.component.html
@@ -17,7 +17,7 @@
 <div class="user-table h-full flex flex-col">
     <div class="flex justify-between">
         <div>
-            <div class="mat-accent font-medium">Displaying {{ filteredCount }} of {{ totalCount }}</div>
+            <div class="accent-color font-medium">Displaying {{ filteredCount }} of {{ totalCount }}</div>
             <form [formGroup]="filterForm">
                 <div class="flex pt-2">
                     <div class="mr-2">
@@ -40,7 +40,7 @@
         </div>
         <div class="flex flex-col justify-center">
             @if (canModifyTenants(currentUser)) {
-                <button mat-icon-button (click)="createClicked()">
+                <button mat-icon-button color="primary" (click)="createClicked()">
                     <i class="fa fa-plus"></i>
                 </button>
             }
@@ -61,7 +61,7 @@
                     <th mat-header-cell *matHeaderCellDef mat-sort-header>User</th>
                     <td mat-cell *matCellDef="let item" class="items-center">
                         @if (item.tenantType === 'userGroup') {
-                            <i class="fa fa-users mr-3"></i>
+                            <i class="fa fa-users primary-color mr-3"></i>
                         }
                         {{ item.user }}
                     </td>
@@ -81,16 +81,19 @@
                         <div class="flex items-center gap-x-3">
                             @if (canEditOrDelete(currentUser, item)) {
                                 <div
-                                    class="pointer fa fa-pencil"
+                                    class="pointer fa fa-pencil primary-color"
                                     title="Edit"
                                     (click)="editClicked(item, $event)"></div>
                             }
                             @if (canEditOrDelete(currentUser, item)) {
-                                <div class="pointer fa fa-trash" title="Remove" (click)="deleteClicked(item)"></div>
+                                <div
+                                    class="pointer fa fa-trash primary-color"
+                                    title="Remove"
+                                    (click)="deleteClicked(item)"></div>
                             }
                             @if (hasAccessPolicies(item)) {
                                 <div
-                                    class="pointer fa fa-key"
+                                    class="pointer fa fa-key primary-color"
                                     title="View User Policies"
                                     (click)="viewAccessPoliciesClicked(item, $event)"></div>
                             }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-context/component-context.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-context/component-context.component.html
index 0e940b0beb..37b635efc9 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-context/component-context.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-context/component-context.component.html
@@ -18,16 +18,16 @@
 <div class="component-context flex flex-col">
     <div class="flex gap-x-1 items-center">
         <div class="component-context-logo flex flex-col">
-            <i class="icon mat-accent" [class]="componentIconClass"></i>
+            <i class="icon accent-color" [class]="componentIconClass"></i>
         </div>
         <div class="flex flex-col flex-1">
             <div class="component-context-name w-full">{{ name }}</div>
-            <div class="component-context-type mat-primary w-full">
+            <div class="component-context-type primary-color w-full">
                 {{ type | componentTypeName }}
             </div>
         </div>
     </div>
     @if (id) {
-        <div class="component-context-id mat-accent">{{ id }}</div>
+        <div class="component-context-id accent-color">{{ id }}</div>
     }
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-state/component-state.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-state/component-state.component.html
index cf4e6045ba..d2cac26ff8 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-state/component-state.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-state/component-state.component.html
@@ -22,18 +22,20 @@
             @if (componentName$ | async; as componentName) {
                 <div class="flex flex-col">
                     <div>Name</div>
-                    <div class="mat-accent font-medium">{{ componentName }}</div>
+                    <div class="accent-color font-medium">{{ componentName }}</div>
                 </div>
             }
             <div class="flex flex-col">
                 <div>Description</div>
-                <div class="mat-accent font-medium">
+                <div class="accent-color font-medium">
                     {{ stateDescription }}
                 </div>
             </div>
             <div>
                 <form [formGroup]="filterForm" class="flex flex-col gap-y-2">
-                    <div class="mat-accent font-medium">Displaying {{ filteredEntries }} of {{ totalEntries }}</div>
+                    <div class="accent-color font-medium">
+                        Displaying {{ filteredEntries }} of {{ totalEntries }}
+                    </div>
                     <div class="flex justify-between items-center">
                         <mat-form-field>
                             <mat-label>Filter</mat-label>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss
index 9a7c89e3d0..13363eabfc 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss
@@ -33,7 +33,6 @@
     $material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette, 'default');
     $surface-darker: utils.get-surface($nifi-theme-color-config, darker);
     $nifi-theme-surface-palette-default: mat.get-color-from-palette($nifi-theme-surface-palette, 'default');
-    $on-surface-medium: utils.get-on-surface($nifi-theme-color-config, medium);
     $on-surface-highlight: utils.get-on-surface($nifi-theme-color-config, highlight);
     $nifi-theme-surface-palette-A200: mat.get-color-from-palette($nifi-theme-surface-palette, 'A200');
     $nifi-theme-success-palette-A700: mat.get-color-from-palette($nifi-theme-success-palette, 'A700');
@@ -42,13 +41,6 @@
         background-color: $surface-darker;
         border: 1px solid $material-theme-primary-palette-default;
         box-shadow: 0 3px 6px $nifi-theme-surface-palette-A200;
-        color: utils.get-color-on-surface($material-theme-color-config, $surface-darker);
-
-        .context-menu-item {
-            .context-menu-item-text {
-                color: $on-surface-medium;
-            }
-        }
 
         .context-menu-item:hover {
             background-color: $on-surface-highlight;
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/context-menu.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/context-menu.component.html
index 33af72765a..3ff46b127f 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/context-menu.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/context-menu.component.html
@@ -16,7 +16,11 @@
   -->
 
 <ng-template #menu>
-    <div class="context-menu" [class.show-focused]="showFocused$ | async" (keydown)="keydown()" cdkMenu>
+    <div
+        class="context-menu primary-color-darker"
+        [class.show-focused]="showFocused$ | async"
+        (keydown)="keydown()"
+        cdkMenu>
         @for (item of getMenuItems(menuId); track item) {
             @if (item.isSeparator) {
                 <hr />
@@ -25,8 +29,8 @@
                     @if (menuComponent.menu; as subMenu) {
                         <button class="context-menu-item" cdkMenuItem [cdkMenuTriggerFor]="subMenu">
                             <div class="context-menu-item-img" [class]="item.clazz"></div>
-                            <div class="context-menu-item-text">{{ item.text }}</div>
-                            <div class="context-menu-group-item-img fa fa-caret-right"></div>
+                            <div class="context-menu-item-text on-surface-medium">{{ item.text }}</div>
+                            <div class="context-menu-group-item-img fa fa-caret-right primary-color"></div>
                         </button>
                     }
                     <fd-context-menu
@@ -36,7 +40,7 @@
                 } @else {
                     <button class="context-menu-item" (click)="menuItemClicked(item, $event)" cdkMenuItem>
                         <div class="context-menu-item-img" [class]="item.clazz"></div>
-                        <div class="context-menu-item-text">{{ item.text }}</div>
+                        <div class="context-menu-item-text on-surface-medium">{{ item.text }}</div>
                     </button>
                 }
             }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-references/controller-service-references.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-references/controller-service-references.component.html
index 5c6e914949..f8c0c77649 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-references/controller-service-references.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-references/controller-service-references.component.html
@@ -17,7 +17,7 @@
 
 <div class="controller-service-references">
     @if (serviceReferences == null || serviceReferences.length == 0) {
-        <div class="mat-accent font-medium">No referencing components</div>
+        <div class="accent-color font-medium">No referencing components</div>
     } @else {
         <ng-container
             *ngTemplateOutlet="
@@ -82,7 +82,7 @@
             @if (references.length > 0) {
                 <li>
                     <h4>
-                        <span class="mat-accent font-medium">{{ referenceTypeLabel }}</span>
+                        <span class="accent-color font-medium">{{ referenceTypeLabel }}</span>
                         ({{ references.length }})
                     </h4>
                     <div class="references">
@@ -104,7 +104,7 @@
                                 }}</a>
                                 @if (hasBulletins(reference)) {
                                     <div
-                                        class="pointer fa fa-sticky-note-o"
+                                        class="pointer fa fa-sticky-note-o primary-color"
                                         nifiTooltip
                                         [tooltipComponentType]="BulletinsTip"
                                         [tooltipInputData]="getBulletinsTipData(reference)"></div>
@@ -121,7 +121,11 @@
         <ng-template #service let-references>
             @if (references.length > 0) {
                 <li>
-                    <h4><span class="mat-accent font-medium">Controller Services</span> ({{ references.length }})</h4>
+                    <h4>
+                        <span class="accent-color font-medium">Controller Services</span> ({{
+                            references.length
+                        }})
+                    </h4>
                     <div class="references">
                         @for (service of references; track service) {
                             <div class="flex flex-col">
@@ -144,7 +148,7 @@
                                     >
                                     @if (hasBulletins(service)) {
                                         <div
-                                            class="pointer fa fa-sticky-note-o"
+                                            class="pointer fa fa-sticky-note-o primary-color"
                                             nifiTooltip
                                             [tooltipComponentType]="BulletinsTip"
                                             [tooltipInputData]="getBulletinsTipData(service)"></div>
@@ -175,7 +179,9 @@
         <ng-template #unauthorized let-references>
             @if (references.length > 0) {
                 <li>
-                    <h4><span class="mat-accent font-medium">Unauthorized</span> ({{ references.length }})</h4>
+                    <h4>
+                        <span class="accent-color font-medium">Unauthorized</span> ({{ references.length }})
+                    </h4>
                     <div class="references">
                         @for (reference of references; track reference) {
                             <div class="flex">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-references/controller-service-references.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-references/controller-service-references.component.ts
index dafe9d5a79..8f0a12b9dd 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-references/controller-service-references.component.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-references/controller-service-references.component.ts
@@ -89,7 +89,7 @@ export class ControllerServiceReferences {
         } else if (reference.state == 'RUNNING') {
             return 'running fa fa-play nifi-success-lighter';
         } else {
-            return 'disabled icon icon-enable-false mat-primary';
+            return 'disabled icon icon-enable-false primary-color';
         }
     }
 
@@ -97,7 +97,7 @@ export class ControllerServiceReferences {
         if (reference.state == 'ENABLED') {
             return 'enabled fa fa-flash nifi-success-default';
         } else {
-            return 'disabled mat-primary icon icon-enable-false';
+            return 'disabled primary-color icon icon-enable-false';
         }
     }
 
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.html
index eec28fbcdb..8d06973047 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.html
@@ -32,14 +32,14 @@
                     @if (canRead(item)) {
                         <div class="flex items-center gap-x-3">
                             <div
-                                class="pointer fa fa-book"
+                                class="pointer fa fa-book primary-color"
                                 (click)="viewDocumentationClicked(item, $event)"
                                 title="View Documentation"></div>
 
                             @if (hasComments(item)) {
                                 <div>
                                     <div
-                                        class="pointer fa fa-comment"
+                                        class="pointer fa fa-comment primary-color"
                                         nifiTooltip
                                         [delayClose]="false"
                                         [tooltipComponentType]="TextTip"
@@ -59,7 +59,7 @@
                             @if (hasBulletins(item)) {
                                 <div>
                                     <div
-                                        class="pointer fa fa-sticky-note-o"
+                                        class="pointer fa fa-sticky-note-o primary-color"
                                         nifiTooltip
                                         [delayClose]="false"
                                         [tooltipComponentType]="BulletinsTip"
@@ -137,7 +137,7 @@
                             <!-- TODO - handle read only in configure component? -->
                             @if (canDisable(item)) {
                                 <div
-                                    class="pointer icon icon-enable-false"
+                                    class="pointer icon icon-enable-false primary-color"
                                     (click)="disableClicked(item)"
                                     title="Disable"></div>
                             }
@@ -145,23 +145,23 @@
                                 <div class="pointer fa fa-flash" (click)="enabledClicked(item)" title="Enable"></div>
                             }
                             @if (canChangeVersion(item)) {
-                                <div class="pointer fa fa-exchange" title="Change Version"></div>
+                                <div class="pointer fa fa-exchange primary-color" title="Change Version"></div>
                             }
                             @if (canDelete(item)) {
                                 <div
-                                    class="pointer fa fa-trash"
+                                    class="pointer fa fa-trash primary-color"
                                     (click)="deleteClicked(item, $event)"
                                     title="Delete"></div>
                             }
                             @if (canViewState(item)) {
                                 <div
-                                    class="pointer fa fa-tasks"
+                                    class="pointer fa fa-tasks primary-color"
                                     (click)="viewStateClicked(item)"
                                     title="View State"></div>
                             }
                             @if (canManageAccessPolicies()) {
                                 <div
-                                    class="pointer fa fa-key"
+                                    class="pointer fa fa-key primary-color"
                                     (click)="$event.stopPropagation()"
                                     [routerLink]="getPolicyLink(item)"
                                     title="Delete"></div>
@@ -169,7 +169,7 @@
                         </div>
                     } @else {
                         <div
-                            class="pointer fa fa-long-arrow-right"
+                            class="pointer fa fa-long-arrow-right primary-color"
                             title="Go To"
                             [routerLink]="getServiceLink(item)"></div>
                     }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.ts
index 53e4876828..2080ca5ef3 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.ts
@@ -153,9 +153,9 @@ export class ControllerServiceTable {
             return 'invalid fa fa-warning';
         } else {
             if (entity.status.runStatus === 'DISABLED') {
-                return 'disabled mat-primary icon icon-enable-false';
+                return 'disabled primary-color icon icon-enable-false';
             } else if (entity.status.runStatus === 'DISABLING') {
-                return 'disabled mat-primary icon icon-enable-false';
+                return 'disabled primary-color icon icon-enable-false';
             } else if (entity.status.runStatus === 'ENABLED') {
                 return 'enabled fa fa-flash nifi-success-default';
             } else if (entity.status.runStatus === 'ENABLING') {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/disable-controller-service/disable-controller-service.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/disable-controller-service/disable-controller-service.component.html
index e252d98a12..a86b5d2dd2 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/disable-controller-service/disable-controller-service.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/disable-controller-service/disable-controller-service.component.html
@@ -26,14 +26,14 @@
                             <div class="flex flex-col">
                                 <div>Service</div>
                                 <div
-                                    class="mat-accent font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
+                                    class="accent-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
                                     [title]="controllerService.component.name">
                                     {{ controllerService.component.name }}
                                 </div>
                             </div>
                             <div class="flex flex-col">
                                 <div>Scope</div>
-                                <div class="mat-accent font-medium">Service and referencing components</div>
+                                <div class="accent-color font-medium">Service and referencing components</div>
                             </div>
                         </div>
                         <div class="flex basis-1/3 flex-col">
@@ -61,7 +61,7 @@
                             <div class="flex flex-col">
                                 <div>Service</div>
                                 <div
-                                    class="mat-accent font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
+                                    class="accent-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
                                     [title]="controllerService.component.name">
                                     {{ controllerService.component.name }}
                                 </div>
@@ -74,7 +74,7 @@
                                 </div>
                                 <div class="flex flex-col gap-y-1.5">
                                     <div class="flex justify-between items-center">
-                                        <div class="mat-accent font-medium">
+                                        <div class="accent-color font-medium">
                                             Stopping referencing processors and reporting tasks
                                         </div>
                                         <ng-container
@@ -94,7 +94,7 @@
                                         </div>
                                     }
                                     <div class="flex justify-between items-center">
-                                        <div class="mat-accent font-medium">
+                                        <div class="accent-color font-medium">
                                             Disabling referencing controller services
                                         </div>
                                         <ng-container
@@ -114,7 +114,9 @@
                                         </div>
                                     }
                                     <div class="flex justify-between items-center">
-                                        <div class="mat-accent font-medium">Disabling this controller service</div>
+                                        <div class="accent-color font-medium">
+                                            Disabling this controller service
+                                        </div>
                                         <ng-container
                                             *ngTemplateOutlet="
                                                 getTemplateForStep(SetEnableStep.DisableService, disableRequest)
@@ -157,7 +159,7 @@
     }
 }
 <ng-template #stepInProgress>
-    <div class="fa fa-spin fa-circle-o-notch"></div>
+    <div class="fa fa-spin fa-circle-o-notch primary-color"></div>
 </ng-template>
 <ng-template #stepComplete>
     <div class="complete fa fa-check nifi-success-default"></div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/edit-controller-service/edit-controller-service.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/edit-controller-service/edit-controller-service.component.html
index 7388a5d992..f55d4553fd 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/edit-controller-service/edit-controller-service.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/edit-controller-service/edit-controller-service.component.html
@@ -31,25 +31,25 @@
                         </div>
                         <div class="flex flex-col mb-5">
                             <div>Id</div>
-                            <div class="mat-accent font-medium">
+                            <div class="accent-color font-medium">
                                 {{ request.controllerService.id }}
                             </div>
                         </div>
                         <div class="flex flex-col mb-5">
                             <div>Type</div>
-                            <div class="mat-accent font-medium">
+                            <div class="accent-color font-medium">
                                 {{ formatType(request.controllerService) }}
                             </div>
                         </div>
                         <div class="flex flex-col mb-5">
                             <div>Bundle</div>
-                            <div class="mat-accent font-medium">
+                            <div class="accent-color font-medium">
                                 {{ formatBundle(request.controllerService) }}
                             </div>
                         </div>
                         <div class="supports-controller-services flex flex-col mb-5">
                             <div>Supports Controller Service</div>
-                            <div class="mat-accent font-medium">
+                            <div class="accent-color font-medium">
                                 <ul>
                                     @for (
                                         serviceApi of request.controllerService.component.controllerServiceApis;
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/enable-controller-service/enable-controller-service.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/enable-controller-service/enable-controller-service.component.html
index 8c82da34bf..5edf7f35ee 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/enable-controller-service/enable-controller-service.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/enable-controller-service/enable-controller-service.component.html
@@ -26,7 +26,7 @@
                             <div class="">
                                 <div>Service</div>
                                 <div
-                                    class="mat-accent font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
+                                    class="accent-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
                                     [title]="controllerService.component.name">
                                     {{ controllerService.component.name }}
                                 </div>
@@ -81,7 +81,7 @@
                             <div class="flex flex-col">
                                 <div>Service</div>
                                 <div
-                                    class="mat-accent font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
+                                    class="accent-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
                                     [title]="controllerService.component.name">
                                     {{ controllerService.component.name }}
                                 </div>
@@ -94,7 +94,9 @@
                                 </div>
                                 <div class="flex flex-col gap-y-1.5">
                                     <div class="flex justify-between items-center">
-                                        <div class="mat-accent font-medium">Enabling this controller service</div>
+                                        <div class="accent-color font-medium">
+                                            Enabling this controller service
+                                        </div>
                                         <ng-container
                                             *ngTemplateOutlet="
                                                 getTemplateForStep(SetEnableStep.EnableService, enableRequest)
@@ -109,7 +111,7 @@
                                     }
                                     @if (enableRequest.scope === 'SERVICE_AND_REFERENCING_COMPONENTS') {
                                         <div class="flex justify-between items-center">
-                                            <div class="mat-accent font-medium">
+                                            <div class="accent-color font-medium">
                                                 Enable referencing controller services
                                             </div>
                                             <ng-container
@@ -129,7 +131,7 @@
                                             </div>
                                         }
                                         <div class="flex justify-between items-center">
-                                            <div class="mat-accent font-medium">
+                                            <div class="accent-color font-medium">
                                                 Starting referencing processors and reporting tasks
                                             </div>
                                             <ng-container
@@ -178,7 +180,7 @@
     }
 }
 <ng-template #stepInProgress>
-    <div class="fa fa-spin fa-circle-o-notch"></div>
+    <div class="fa fa-spin fa-circle-o-notch primary-color"></div>
 </ng-template>
 <ng-template #stepComplete>
     <div class="complete fa fa-check nifi-success-default"></div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/_extension-creation.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/_extension-creation.component-theme.scss
deleted file mode 100644
index 7cad9741c7..0000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/_extension-creation.component-theme.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../../../../assets/utils.scss' as utils;
-
-@mixin generate-theme($nifi-theme) {
-    // Get the color config from the theme.
-    $nifi-theme-color-config: mat.get-color-config($nifi-theme);
-
-    // Get hues from palette
-    $on-surface-medium: utils.get-on-surface($nifi-theme-color-config, medium);
-
-    .extension-creation-dialog {
-        .selected-type-bundle {
-            color: $on-surface-medium;
-        }
-    }
-}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.html
index f3535d1025..565a46a69a 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.html
@@ -64,7 +64,7 @@
                             {{ formatVersion(item) }}
                             @if (implementsControllerService(item)) {
                                 <div
-                                    class="fa fa-list"
+                                    class="fa fa-list primary-color"
                                     nifiTooltip
                                     [tooltipComponentType]="ControllerServiceApiTip"
                                     [tooltipInputData]="getControllerServiceApiTipData(item)"></div>
@@ -92,10 +92,10 @@
         <div class="flex flex-col">
             @if (selectedType) {
                 <div class="flex items-center">
-                    <div class="selected-type-name mat-accent">
+                    <div class="selected-type-name accent-color">
                         {{ formatType(selectedType) }}
                     </div>
-                    <div class="selected-type-bundle">{{ formatBundle(selectedType) }}</div>
+                    <div class="selected-type-bundle on-surface-medium">{{ formatBundle(selectedType) }}</div>
                 </div>
                 <div class="selected-type-description" [title]="formatDescription(selectedType)">
                     {{ formatDescription(selectedType) }}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
index 3f6a902ced..032c18bea2 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
@@ -38,9 +38,6 @@
         $navbar-on-surface: mat.get-color-from-palette($material-theme-primary-palette, 'default-contrast');
     }
 
-    // We need this to get the right color value for the global menu items.
-    $surface: inspection.get-theme-color($material-theme, background, background);
-
     .nifi-navigation {
         background-color: $navbar-surface;
 
@@ -49,6 +46,11 @@
             color: $navbar-on-surface;
         }
 
+        .icon:disabled,
+        .icon.global-menu:disabled {
+            @extend .nifi-surface-default;
+        }
+
         .current-user {
             color: $navbar-on-surface;
         }
@@ -62,11 +64,4 @@
             opacity: 0.6;
         }
     }
-
-    button.global-menu-item {
-        .fa,
-        .icon {
-            color: utils.get-color-on-surface($material-theme-color-config, $surface);
-        }
-    }
 }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/navigation.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/navigation.component.html
index 74124da472..6adb28f7c8 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/navigation.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/navigation.component.html
@@ -48,12 +48,12 @@
                 </button>
                 <mat-menu #globalMenu="matMenu" xPosition="before">
                     <button mat-menu-item class="global-menu-item" [routerLink]="getCanvasLink()">
-                        <i class="icon icon-drop mr-2"></i>
+                        <i class="icon icon-drop primary-color mr-2"></i>
                         Canvas
                     </button>
                     <mat-divider></mat-divider>
                     <button mat-menu-item class="global-menu-item" [routerLink]="['/summary']">
-                        <i class="fa fa-fw fa-table mr-2"></i>
+                        <i class="fa fa-fw fa-table primary-color mr-2"></i>
                         Summary
                     </button>
                     <button
@@ -61,11 +61,11 @@
                         class="global-menu-item"
                         [routerLink]="['/counters']"
                         [disabled]="!user.countersPermissions.canRead">
-                        <i class="icon fa-fw icon-counter mr-2"></i>
+                        <i class="icon fa-fw icon-counter primary-color mr-2"></i>
                         Counter
                     </button>
                     <button mat-menu-item class="global-menu-item" [routerLink]="['/bulletins']">
-                        <i class="fa fa-fw fa-sticky-note-o mr-2"></i>
+                        <i class="fa fa-fw fa-sticky-note-o primary-color mr-2"></i>
                         Bulletin Board
                     </button>
                     <mat-divider></mat-divider>
@@ -74,7 +74,7 @@
                         class="global-menu-item"
                         [routerLink]="['/provenance']"
                         [disabled]="!user.provenancePermissions.canRead">
-                        <i class="icon fa-fw icon-provenance mr-2"></i>
+                        <i class="icon fa-fw icon-provenance primary-color mr-2"></i>
                         Data Provenance
                     </button>
                     <mat-divider></mat-divider>
@@ -83,7 +83,7 @@
                         class="global-menu-item"
                         [routerLink]="['/settings']"
                         [disabled]="!user.controllerPermissions.canRead">
-                        <i class="fa fa-fw fa-wrench mr-2"></i>
+                        <i class="fa fa-fw fa-wrench primary-color mr-2"></i>
                         Controller Settings
                     </button>
                     <button mat-menu-item class="global-menu-item" [routerLink]="['/parameter-contexts']">
@@ -91,15 +91,15 @@
                         Parameter Contexts
                     </button>
                     <button mat-menu-item class="global-menu-item">
-                        <i class="fa fa-fw fa-cubes mr-2"></i>
+                        <i class="fa fa-fw fa-cubes primary-color mr-2"></i>
                         Cluster
                     </button>
                     <button mat-menu-item class="global-menu-item" [routerLink]="['/flow-configuration-history']">
-                        <i class="fa fa-fw fa-history mr-2"></i>
+                        <i class="fa fa-fw fa-history primary-color mr-2"></i>
                         Flow Configuration History
                     </button>
                     <button mat-menu-item class="global-menu-item" (click)="viewNodeStatusHistory()">
-                        <i class="fa fa-fw fa-area-chart mr-2"></i>
+                        <i class="fa fa-fw fa-area-chart primary-color mr-2"></i>
                         Node Status History
                     </button>
                     <button
@@ -118,7 +118,7 @@
                                 class="global-menu-item"
                                 [routerLink]="['/users']"
                                 [disabled]="!user.tenantsPermissions.canRead">
-                                <i class="fa fa-fw fa-users mr-2"></i>
+                                <i class="fa fa-fw fa-users primary-color mr-2"></i>
                                 Users
                             </button>
                             <button
@@ -130,18 +130,18 @@
                                     !user.policiesPermissions.canRead ||
                                     !user.policiesPermissions.canWrite
                                 ">
-                                <i class="fa fa-fw fa-key mr-2"></i>
+                                <i class="fa fa-fw fa-key primary-color mr-2"></i>
                                 Policies
                             </button>
                             <mat-divider></mat-divider>
                         }
                     }
                     <button mat-menu-item class="global-menu-item" [routerLink]="['/documentation']">
-                        <i class="fa fa-fw fa-question-circle mr-2"></i>
+                        <i class="fa fa-fw fa-question-circle primary-color mr-2"></i>
                         Help
                     </button>
                     <button mat-menu-item class="global-menu-item">
-                        <i class="fa fa-fw fa-info-circle mr-2"></i>
+                        <i class="fa fa-fw fa-info-circle primary-color mr-2"></i>
                         About
                     </button>
                     <button mat-menu-item [matMenuTriggerFor]="theming">
@@ -152,7 +152,7 @@
                 <mat-menu #theming="matMenu" xPosition="before">
                     <button mat-menu-item class="global-menu-item" (click)="toggleTheme(LIGHT_THEME)">
                         @if (theme === LIGHT_THEME) {
-                            <i class="fa fa-fw fa-check mr-2"></i>
+                            <i class="fa fa-fw fa-check primary-color mr-2"></i>
                         }
                         @if (theme !== LIGHT_THEME) {
                             <i class="fa fa-fw mr-2"></i>
@@ -161,7 +161,7 @@
                     </button>
                     <button mat-menu-item class="global-menu-item" (click)="toggleTheme(DARK_THEME)">
                         @if (theme === DARK_THEME) {
-                            <i class="fa fa-fw fa-check mr-2"></i>
+                            <i class="fa fa-fw fa-check primary-color mr-2"></i>
                         }
                         @if (theme !== DARK_THEME) {
                             <i class="fa fa-fw mr-2"></i>
@@ -170,7 +170,7 @@
                     </button>
                     <button mat-menu-item class="global-menu-item" (click)="toggleTheme(OS_SETTING)">
                         @if (theme === OS_SETTING || theme === null) {
-                            <i class="fa fa-fw fa-check mr-2"></i>
+                            <i class="fa fa-fw fa-check primary-color mr-2"></i>
                         }
                         @if (theme !== OS_SETTING && theme !== null) {
                             <i class="fa fa-fw mr-2"></i>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/parameter-references/parameter-references.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/parameter-references/parameter-references.component.html
index 9a816cb6a0..526c36d819 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/parameter-references/parameter-references.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/parameter-references/parameter-references.component.html
@@ -17,7 +17,7 @@
 
 <div class="parameter-references">
     @if (parameterReferenceMap == null || parameterReferenceMap.size == 0) {
-        <div class="mat-accent font-medium">No referencing components</div>
+        <div class="accent-color font-medium">No referencing components</div>
     } @else {
         @for (pg of processGroups; track pg) {
             <ng-container *ngTemplateOutlet="pgListing; context: { $implicit: pg }"></ng-container>
@@ -53,7 +53,7 @@
         <ng-template #processor let-references>
             @if (references.length > 0) {
                 <li>
-                    <h4><span class="mat-accent font-medium">Processors</span> ({{ references.length }})</h4>
+                    <h4><span class="accent-color font-medium">Processors</span> ({{ references.length }})</h4>
                     <div class="references">
                         @for (reference of references; track reference) {
                             <div class="flex items-center gap-x-2">
@@ -73,7 +73,7 @@
                                 }}</a>
                                 @if (hasBulletins(reference)) {
                                     <div
-                                        class="pointer fa fa-sticky-note-o"
+                                        class="pointer fa fa-sticky-note-o primary-color"
                                         nifiTooltip
                                         [tooltipComponentType]="BulletinsTip"
                                         [tooltipInputData]="getBulletinsTipData(reference)"></div>
@@ -90,7 +90,11 @@
         <ng-template #service let-references>
             @if (references.length > 0) {
                 <li>
-                    <h4><span class="mat-accent font-medium">Controller Services</span> ({{ references.length }})</h4>
+                    <h4>
+                        <span class="accent-color font-medium">Controller Services</span> ({{
+                            references.length
+                        }})
+                    </h4>
                     <div class="references">
                         @for (service of references; track service) {
                             <div class="flex flex-col">
@@ -113,7 +117,7 @@
                                     >
                                     @if (hasBulletins(service)) {
                                         <div
-                                            class="pointer fa fa-sticky-note-o"
+                                            class="pointer fa fa-sticky-note-o primary-color"
                                             nifiTooltip
                                             [tooltipComponentType]="BulletinsTip"
                                             [tooltipInputData]="getBulletinsTipData(service)"></div>
@@ -128,7 +132,9 @@
         <ng-template #unauthorized let-references>
             @if (references.length > 0) {
                 <li>
-                    <h4><span class="mat-accent font-medium">Unauthorized</span> ({{ references.length }})</h4>
+                    <h4>
+                        <span class="accent-color font-medium">Unauthorized</span> ({{ references.length }})
+                    </h4>
                     <div class="references">
                         @for (reference of references; track reference) {
                             <div class="flex">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/parameter-references/parameter-references.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/parameter-references/parameter-references.component.ts
index e14819b02b..bb44f280d6 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/parameter-references/parameter-references.component.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/parameter-references/parameter-references.component.ts
@@ -114,7 +114,7 @@ export class ParameterReferences {
         } else if (reference.state == 'RUNNING') {
             return 'running fa fa-play nifi-success-lighter';
         } else {
-            return 'disabled icon icon-enable-false mat-primary';
+            return 'disabled icon icon-enable-false primary-color';
         }
     }
 
@@ -122,7 +122,7 @@ export class ParameterReferences {
         if (reference.state == 'ENABLED') {
             return 'enabled fa fa-flash nifi-success-default';
         } else {
-            return 'disabled mat-primary icon icon-enable-false';
+            return 'disabled primary-color icon icon-enable-false';
         }
     }
 
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.html
index 97382c6ed2..75286c4738 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.html
@@ -20,7 +20,7 @@
         <div class="font-bold">Required field</div>
         <div>
             <!-- TODO Property Verification -->
-            <button mat-icon-button type="button" (click)="newPropertyClicked()">
+            <button mat-icon-button color="primary" type="button" (click)="newPropertyClicked()">
                 <i class="fa fa-plus"></i>
             </button>
         </div>
@@ -39,7 +39,7 @@
                             <div>
                                 @if (hasInfo(item.descriptor)) {
                                     <div
-                                        class="fa fa-question-circle"
+                                        class="fa fa-question-circle primary-color"
                                         nifiTooltip
                                         [tooltipComponentType]="PropertyTip"
                                         [tooltipInputData]="getPropertyTipData(item)"
@@ -88,7 +88,7 @@
                                         </div>
                                         @if (hasExtraWhitespace(resolvedValue)) {
                                             <div
-                                                class="fa fa-info"
+                                                class="fa fa-info primary-color"
                                                 nifiTooltip
                                                 [tooltipComponentType]="TextTip"
                                                 [tooltipInputData]="getExtraWhitespaceTipData()"></div>
@@ -107,30 +107,33 @@
                         <div class="flex items-center gap-x-3">
                             @if (item.descriptor.identifiesControllerService) {
                                 <div
-                                    class="pointer fa fa-plus"
+                                    class="pointer fa fa-plus primary-color"
                                     (click)="createNewControllerService(item)"
                                     title="Create new service"></div>
                             }
                             @if (canConvertToParameter(item)) {
                                 <div
-                                    class="pointer fa fa-level-up"
+                                    class="pointer fa fa-level-up primary-color"
                                     (click)="convertToParameterClicked(item)"
                                     title="Convert to Parameter"></div>
                             }
                             @if (canGoToParameter(item)) {
                                 <div
-                                    class="pointer fa fa-long-arrow-right"
+                                    class="pointer fa fa-long-arrow-right primary-color"
                                     (click)="goToParameterClicked(item)"
                                     title="Go to Parameter"></div>
                             }
                             @if (canGoToService(item)) {
                                 <div
-                                    class="pointer fa fa-long-arrow-right"
+                                    class="pointer fa fa-long-arrow-right primary-color"
                                     (click)="goToServiceClicked(item)"
                                     title="Go to Service"></div>
                             }
                             @if (item.type == 'userDefined') {
-                                <div class="pointer fa fa-trash" (click)="deleteProperty(item)" title="Delete"></div>
+                                <div
+                                    class="pointer fa fa-trash primary-color"
+                                    (click)="deleteProperty(item)"
+                                    title="Delete"></div>
                             }
                         </div>
                     </td>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
index d7defacf28..3bd0bc376a 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
@@ -176,7 +176,7 @@
                             </ng-container>
                             <ng-template #formatDuration let-duration>
                                 <ng-container *ngIf="duration != null; else noDuration">
-                                    <div class="mat-accent font-medium">
+                                    <div class="accent-color font-medium">
                                         {{ formatDurationValue(duration) }}
                                     </div>
                                 </ng-container>
@@ -187,7 +187,7 @@
                         </div>
                         <div class="w-full flex flex-col gap-y-3">
                             <div class="flex flex-col">
-                                <div class="event-header mat-primary">
+                                <div class="event-header primary-color">
                                     Parent FlowFiles ({{ request.event.parentUuids.length }})
                                 </div>
                                 <ng-container
@@ -197,7 +197,7 @@
                                     "></ng-container>
                             </div>
                             <div class="flex flex-col">
-                                <div class="event-header mat-primary">
+                                <div class="event-header primary-color">
                                     Child FlowFiles ({{ request.event.childUuids.length }})
                                 </div>
                                 <ng-container
@@ -208,7 +208,7 @@
                             </div>
                             <ng-template #formatUuids let-uuids let-emptyMessage="emptyMessage">
                                 <ng-container *ngIf="uuids.length > 0; else noUuids">
-                                    <div class="mat-accent font-medium">
+                                    <div class="accent-color font-medium">
                                         <div *ngFor="let uuid of uuids">{{ uuid }}</div>
                                     </div>
                                 </ng-container>
@@ -224,7 +224,7 @@
                 <div class="tab-content py-4">
                     <div class="absolute inset-0 flex flex-col gap-y-4">
                         <div class="flex justify-between">
-                            <div class="event-header mat-primary">Attribute Values</div>
+                            <div class="event-header primary-color">Attribute Values</div>
                             <div class="flex items-center gap-x-1">
                                 <mat-checkbox color="primary" [(ngModel)]="onlyShowModifiedAttributes"></mat-checkbox>
                                 <div>Show modified attributes only</div>
@@ -257,7 +257,7 @@
                     <div class="absolute inset-0 flex flex-col gap-y-4">
                         <div class="flex gap-x-4">
                             <div class="w-full">
-                                <div class="event-header mat-primary">Input Claim</div>
+                                <div class="event-header primary-color">Input Claim</div>
                                 <div class="flex flex-col gap-y-3">
                                     <div>
                                         <div>Container</div>
@@ -323,7 +323,7 @@
                                 </div>
                             </div>
                             <div class="w-full">
-                                <div class="event-header mat-primary">Output Claim</div>
+                                <div class="event-header primary-color">Output Claim</div>
                                 <div class="flex flex-col gap-y-3">
                                     <div>
                                         <div>Container</div>
@@ -390,7 +390,7 @@
                             </div>
                         </div>
                         <div class="flex flex-col">
-                            <div class="event-header mat-primary">Replay</div>
+                            <div class="event-header primary-color">Replay</div>
                             <div
                                 *ngIf="request.event.replayAvailable; else replayNotAvailable"
                                 class="flex flex-col gap-y-3">
@@ -423,11 +423,11 @@
                     <div class="unset nifi-surface-default">Empty string set</div>
                 </ng-container>
                 <ng-template #nonEmptyValue>
-                    <div class="mat-accent font-medium" *ngIf="title == null; else valueWithTitle">
+                    <div class="accent-color font-medium" *ngIf="title == null; else valueWithTitle">
                         {{ value }}
                     </div>
                     <ng-template #valueWithTitle>
-                        <div class="mat-accent font-medium" [title]="title">{{ value }}</div>
+                        <div class="accent-color font-medium" [title]="title">{{ value }}</div>
                     </ng-template>
                 </ng-template>
             </ng-container>
@@ -437,11 +437,11 @@
         </ng-template>
         <ng-template #formatContentValue let-value let-title="title">
             <ng-container *ngIf="value != null; else nullValue">
-                <div class="mat-accent font-medium" *ngIf="title == null; else valueWithTitle">
+                <div class="accent-color font-medium" *ngIf="title == null; else valueWithTitle">
                     {{ value }}
                 </div>
                 <ng-template #valueWithTitle>
-                    <div class="mat-accent font-medium" [title]="title">{{ value }}</div>
+                    <div class="accent-color font-medium" [title]="title">{{ value }}</div>
                 </ng-template>
             </ng-container>
             <ng-template #nullValue>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/spinner/spinner.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/spinner/spinner.component.ts
index f791083445..211d4851bf 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/spinner/spinner.component.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/spinner/spinner.component.ts
@@ -20,6 +20,6 @@ import { Component } from '@angular/core';
 @Component({
     selector: 'spinner',
     standalone: true,
-    template: '<i class="fa fa-circle-o-notch fa-spin"></i>'
+    template: '<i class="fa fa-circle-o-notch fa-spin primary-color"></i>'
 })
 export class Spinner {}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html
index 906c84c3ed..8495e4ed14 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html
@@ -34,7 +34,7 @@
                                                 @if (detail.key && detail.value) {
                                                     <div class="flex flex-col">
                                                         <div>{{ detail.key }}</div>
-                                                        <div class="mat-accent font-medium">
+                                                        <div class="accent-color font-medium">
                                                             {{ detail.value }}
                                                         </div>
                                                     </div>
@@ -42,13 +42,13 @@
                                             }
                                             <div class="flex flex-col">
                                                 <div>Start</div>
-                                                <div class="mat-accent font-medium">
+                                                <div class="accent-color font-medium">
                                                     {{ minDate }}
                                                 </div>
                                             </div>
                                             <div class="flex flex-col">
                                                 <div>End</div>
-                                                <div class="mat-accent font-medium">
+                                                <div class="accent-color font-medium">
                                                     {{ maxDate }}
                                                 </div>
                                             </div>
@@ -56,7 +56,7 @@
                                                 <div class="font-bold">NiFi</div>
                                                 <div class="detail-item">
                                                     <div>Min / Max / Mean</div>
-                                                    <div class="mat-accent font-medium">
+                                                    <div class="accent-color font-medium">
                                                         {{ clusterStats.min }} / {{ clusterStats.max }} /
                                                         {{ clusterStats.mean }}
                                                     </div>
@@ -82,7 +82,7 @@
                                                     <div>Nodes</div>
                                                     <div>
                                                         <div>Min / Max / Mean</div>
-                                                        <div class="mat-accent font-medium">
+                                                        <div class="accent-color font-medium">
                                                             {{ nodeStats.min }} / {{ nodeStats.max }} /
                                                             {{ nodeStats.mean }}
                                                         </div>
@@ -167,13 +167,13 @@
                     <div class="flex-1">
                         @if (instances.length > 0) {
                             <div class="refresh-container flex items-center gap-x-2">
-                                <button mat-icon-button (click)="refresh()">
+                                <button mat-icon-button color="primary" (click)="refresh()">
                                     <i
                                         class="fa fa-refresh"
                                         [class.fa-spin]="statusHistoryState.status === 'loading'"></i>
                                 </button>
                                 <div>Last updated:</div>
-                                <div class="mat-accent font-medium">
+                                <div class="accent-color font-medium">
                                     {{ statusHistoryState.loadedTimestamp }}
                                 </div>
                             </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component.html
index 3ba7d95bc8..dd1e7e72b2 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component.html
@@ -30,38 +30,38 @@
                                         <div class="flex flex-col gap-y-3">
                                             <div class="flex flex-col">
                                                 <div>Max</div>
-                                                <div class="mat-accent font-medium">
+                                                <div class="accent-color font-medium">
                                                     {{ systemDiagnostics.maxHeap }}
                                                 </div>
                                             </div>
                                             <div class="flex flex-col">
                                                 <div>Total</div>
-                                                <div class="mat-accent font-medium">
+                                                <div class="accent-color font-medium">
                                                     {{ systemDiagnostics.totalHeap }}
                                                 </div>
                                             </div>
                                             <div class="flex flex-col">
                                                 <div>Used</div>
-                                                <div class="mat-accent font-medium">
+                                                <div class="accent-color font-medium">
                                                     {{ systemDiagnostics.usedHeap }}
                                                 </div>
                                             </div>
                                             <div class="flex flex-col">
                                                 <div>Free</div>
-                                                <div class="mat-accent font-medium">
+                                                <div class="accent-color font-medium">
                                                     {{ systemDiagnostics.freeHeap }}
                                                 </div>
                                             </div>
                                         </div>
                                     </section>
                                     <section>
-                                        <div class="section-header mat-primary">Garbage Collection</div>
+                                        <div class="section-header primary-color">Garbage Collection</div>
                                         @if (sortedGarbageCollections) {
                                             <div class="flex flex-col gap-y-3">
                                                 @for (gc of sortedGarbageCollections; track gc) {
                                                     <div class="flex flex-col">
                                                         <div>{{ gc.name }}</div>
-                                                        <div class="mat-accent font-medium">
+                                                        <div class="accent-color font-medium">
                                                             {{ gc.collectionCount }} times ({{ gc.collectionTime }})
                                                         </div>
                                                     </div>
@@ -76,25 +76,25 @@
                                         <div class="flex flex-col gap-y-3">
                                             <div class="flex flex-col">
                                                 <div>Max</div>
-                                                <div class="mat-accent font-medium">
+                                                <div class="accent-color font-medium">
                                                     {{ systemDiagnostics.maxNonHeap }}
                                                 </div>
                                             </div>
                                             <div class="flex flex-col">
                                                 <div>Total</div>
-                                                <div class="mat-accent font-medium">
+                                                <div class="accent-color font-medium">
                                                     {{ systemDiagnostics.totalNonHeap }}
                                                 </div>
                                             </div>
                                             <div class="flex flex-col">
                                                 <div>Used</div>
-                                                <div class="mat-accent font-medium">
+                                                <div class="accent-color font-medium">
                                                     {{ systemDiagnostics.usedNonHeap }}
                                                 </div>
                                             </div>
                                             <div class="flex flex-col">
                                                 <div>Free</div>
-                                                <div class="mat-accent font-medium">
+                                                <div class="accent-color font-medium">
                                                     {{ systemDiagnostics.freeNonHeap }}
                                                 </div>
                                             </div>
@@ -105,7 +105,7 @@
                                         <div class="flex flex-col gap-y-3">
                                             <div class="flex flex-col">
                                                 <div>Uptime</div>
-                                                <div class="mat-accent font-medium">
+                                                <div class="accent-color font-medium">
                                                     {{ systemDiagnostics.uptime }}
                                                 </div>
                                             </div>
@@ -122,7 +122,7 @@
                                     <div class="flex flex-col gap-y-3">
                                         <div class="flex flex-col">
                                             <div>Available Cores</div>
-                                            <div class="mat-accent font-medium">
+                                            <div class="accent-color font-medium">
                                                 {{ systemDiagnostics.availableProcessors }}
                                             </div>
                                         </div>
@@ -134,12 +134,12 @@
                                             <div class="flex gap-x-3 items-center">
                                                 <div>Core Load Average</div>
                                                 <div
-                                                    class="fa fa-question-circle"
+                                                    class="fa fa-question-circle primary-color"
                                                     nifiTooltip
                                                     [tooltipComponentType]="TextTip"
                                                     [tooltipInputData]="getCoreLoadTooltip()"></div>
                                             </div>
-                                            <div class="mat-accent font-medium">
+                                            <div class="accent-color font-medium">
                                                 {{ formatFloat(systemDiagnostics.processorLoadAverage) }}
                                             </div>
                                         </div>
@@ -158,7 +158,7 @@
                                             )
                                         ">
                                     </mat-progress-bar>
-                                    <div class="mat-accent font-medium">
+                                    <div class="accent-color font-medium">
                                         {{ systemDiagnostics.flowFileRepositoryStorageUsage.utilization }}
                                         ({{ systemDiagnostics.flowFileRepositoryStorageUsage.usedSpace }}
                                         of
@@ -176,7 +176,7 @@
                                                 mode="determinate"
                                                 [value]="getRepositoryStorageUsagePercent(repo)">
                                             </mat-progress-bar>
-                                            <div class="mat-accent font-medium">
+                                            <div class="accent-color font-medium">
                                                 {{ repo.utilization }} ({{ repo.usedSpace }} of {{ repo.totalSpace }})
                                             </div>
                                         </div>
@@ -193,7 +193,7 @@
                                                 mode="determinate"
                                                 [value]="getRepositoryStorageUsagePercent(repo)">
                                             </mat-progress-bar>
-                                            <div class="mat-accent font-medium">
+                                            <div class="accent-color font-medium">
                                                 {{ repo.utilization }} ({{ repo.usedSpace }} of {{ repo.totalSpace }})
                                             </div>
                                         </div>
@@ -249,11 +249,11 @@
         <mat-dialog-actions>
             <div class="flex flex-1 justify-between">
                 <div class="refresh-container flex items-center gap-x-2">
-                    <button mat-icon-button (click)="refreshSystemDiagnostics()">
+                    <button mat-icon-button color="primary" (click)="refreshSystemDiagnostics()">
                         <i class="fa fa-refresh" [class.fa-spin]="(status$ | async) === 'loading'"></i>
                     </button>
                     <div>Last updated:</div>
-                    <div class="mat-accent font-medium">{{ loadedTimestamp$ | async }}</div>
+                    <div class="accent-color font-medium">{{ loadedTimestamp$ | async }}</div>
                 </div>
                 <div>
                     <button mat-button mat-dialog-close>Close</button>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
index 3c07e1e415..23c6231a7f 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
@@ -131,98 +131,82 @@
     }
 }
 
-@mixin generate-material-theme($material-theme, $nifi-theme) {
+@mixin generate-material-theme($material-theme) {
     // Get the color config from the theme.
     $material-theme-color-config: mat.get-color-config($material-theme);
-    $nifi-theme-color-config: mat.get-color-config($nifi-theme);
 
     // Get the palettes
     $material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
-    $nifi-theme-warn-palette: map.get($nifi-theme-color-config, 'warn');
+    $material-theme-accent-palette: map.get($material-theme-color-config, 'accent');
+    $material-theme-warn-palette: map.get($material-theme-color-config, 'warn');
 
     // colors from the theme palettes
+    $material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette, 'default');
     $material-theme-primary-palette-lighter: mat.get-color-from-palette($material-theme-primary-palette, 'lighter');
-    $nifi-theme-warn-palette-A200: mat.get-color-from-palette($nifi-theme-warn-palette, 'A200');
+    $material-theme-primary-palette-darker: mat.get-color-from-palette($material-theme-primary-palette, 'darker');
+    $material-theme-accent-palette-default: mat.get-color-from-palette($material-theme-accent-palette, 'default');
+    $material-theme-accent-palette-lighter: mat.get-color-from-palette($material-theme-accent-palette, 'lighter');
+    $material-theme-accent-palette-darker: mat.get-color-from-palette($material-theme-accent-palette, 'darker');
+    $material-theme-warn-palette-default: mat.get-color-from-palette($material-theme-warn-palette, 'default');
+    $material-theme-warn-palette-lighter: mat.get-color-from-palette($material-theme-warn-palette, 'lighter');
+    $material-theme-warn-palette-darker: mat.get-color-from-palette($material-theme-warn-palette, 'darker');
 
     // semantic classes for the material theme
 
-    .mat-primary {
-        color: utils.get-color-on-surface(
-            $material-theme-color-config,
-            utils.get-surface($nifi-theme-color-config),
-            'primary'
-        ) !important;
-        fill: utils.get-color-on-surface(
-            $material-theme-color-config,
-            utils.get-surface($nifi-theme-color-config),
-            'primary'
-        ) !important;
+    .primary-color {
+        color: $material-theme-primary-palette-default;
+        fill: $material-theme-primary-palette-default;
     }
 
-    .mat-accent {
-        color: utils.get-color-on-surface(
-            $material-theme-color-config,
-            utils.get-surface($nifi-theme-color-config),
-            'accent'
-        ) !important;
-        fill: utils.get-color-on-surface(
-            $material-theme-color-config,
-            utils.get-surface($nifi-theme-color-config),
-            'accent'
-        ) !important;
+    .primary-color-lighter {
+        color: $material-theme-primary-palette-lighter;
+        fill: $material-theme-primary-palette-lighter;
     }
 
-    .mat-warn {
-        color: utils.get-color-on-surface(
-            $material-theme-color-config,
-            utils.get-surface($nifi-theme-color-config),
-            'warn'
-        ) !important;
-        fill: utils.get-color-on-surface(
-            $material-theme-color-config,
-            utils.get-surface($nifi-theme-color-config),
-            'warn'
-        ) !important;
+    .primary-color-darker {
+        color: $material-theme-primary-palette-darker;
+        fill: $material-theme-primary-palette-darker;
+    }
+
+    .accent-color {
+        color: $material-theme-accent-palette-default;
+        fill: $material-theme-accent-palette-default;
+    }
+
+    .accent-color-lighter {
+        color: $material-theme-accent-palette-lighter;
+        fill: $material-theme-accent-palette-lighter;
+    }
+
+    .accent-color-darker {
+        color: $material-theme-accent-palette-darker;
+        fill: $material-theme-accent-palette-darker;
+    }
+
+    .warn-color {
+        color: $material-theme-warn-palette-default;
+        fill: $material-theme-warn-palette-default;
+    }
+
+    .warn-color-lighter {
+        color: $material-theme-warn-palette-lighter;
+        fill: $material-theme-warn-palette-lighter;
+    }
+
+    .warn-color-darker {
+        color: $material-theme-warn-palette-darker;
+        fill: $material-theme-warn-palette-darker;
     }
 
     /* other classes and overriding 3rd party styles */
 
     a {
-        // calculate the color for text on top of a material theme primary palette default color element
-        color: utils.get-color-on-surface(
-            $material-theme-color-config,
-            utils.get-surface($material-theme-color-config)
-        );
-        // get the lighter color from the material theme primary palette
-        text-decoration-color: mat.get-color-from-palette($material-theme-primary-palette, 'lighter');
+        color: $material-theme-primary-palette-default;
+        text-decoration-color: $material-theme-primary-palette-lighter;
     }
 
     a:hover {
-        // calculate the color for text on top of a material theme primary palette default colored element
-        text-decoration-color: utils.get-color-on-surface(
-            $material-theme-color-config,
-            utils.get-surface($material-theme-color-config)
-        );
-    }
-
-    .mat-mdc-icon-button {
-        // calculate the color for text on top of a nifi theme accent palette darker colored element
-        color: utils.get-color-on-surface(
-            $material-theme-color-config,
-            utils.get-surface($nifi-theme-color-config, 'darker')
-        ) !important;
-    }
-
-    .has-errors,
-    .invalid {
-        color: $nifi-theme-warn-palette-A200 !important;
-        fill: $nifi-theme-warn-palette-A200 !important;
-    }
-
-    .zero {
-        color: $material-theme-primary-palette-lighter !important;
-        fill: $material-theme-primary-palette-lighter !important;
-        opacity: 0.5;
+        text-decoration-color: $material-theme-primary-palette-darker;
     }
 
     // Because snackbars have different surface colors, we need to make sure the action color has enough contrast.
@@ -257,86 +241,88 @@
     $nifi-theme-warn-palette-default: mat.get-color-from-palette($nifi-theme-warn-palette, 'default');
     $nifi-theme-warn-palette-lighter: mat.get-color-from-palette($nifi-theme-warn-palette, 'lighter');
     $nifi-theme-warn-palette-darker: mat.get-color-from-palette($nifi-theme-warn-palette, 'darker');
+    $nifi-theme-warn-palette-A200: mat.get-color-from-palette($nifi-theme-warn-palette, 'A200');
 
     // semantic classes for default/lighter/darker colors for each palette in each theme
+
     .surface-default {
-        color: utils.get-surface($nifi-theme-color-config) !important;
-        fill: utils.get-surface($nifi-theme-color-config) !important;
+        color: utils.get-surface($nifi-theme-color-config);
+        fill: utils.get-surface($nifi-theme-color-config);
     }
 
     .surface-darker {
-        color: utils.get-surface($nifi-theme-color-config, darker) !important;
-        fill: utils.get-surface($nifi-theme-color-config, darker) !important;
+        color: utils.get-surface($nifi-theme-color-config, darker);
+        fill: utils.get-surface($nifi-theme-color-config, darker);
     }
 
     .on-surface-default {
-        color: utils.get-on-surface($nifi-theme-color-config) !important;
-        fill: utils.get-on-surface($nifi-theme-color-config) !important;
+        color: utils.get-on-surface($nifi-theme-color-config);
+        fill: utils.get-on-surface($nifi-theme-color-config);
     }
 
     .on-surface-lighter {
-        color: utils.get-on-surface($nifi-theme-color-config, lighter) !important;
-        fill: utils.get-on-surface($nifi-theme-color-config, lighter) !important;
+        color: utils.get-on-surface($nifi-theme-color-config, lighter);
+        fill: utils.get-on-surface($nifi-theme-color-config, lighter);
     }
 
     .on-surface-darker {
-        color: utils.get-on-surface($nifi-theme-color-config, darker) !important;
-        fill: utils.get-on-surface($nifi-theme-color-config, darker) !important;
+        color: utils.get-on-surface($nifi-theme-color-config, darker);
+        fill: utils.get-on-surface($nifi-theme-color-config, darker);
     }
 
     .on-surface-medium {
-        color: utils.get-on-surface($nifi-theme-color-config, medium) !important;
-        fill: utils.get-on-surface($nifi-theme-color-config, medium) !important;
+        color: utils.get-on-surface($nifi-theme-color-config, medium);
+        fill: utils.get-on-surface($nifi-theme-color-config, medium);
     }
 
     .on-surface-highlight {
-        color: utils.get-on-surface($nifi-theme-color-config, highlight) !important;
-        fill: utils.get-on-surface($nifi-theme-color-config, highlight) !important;
+        color: utils.get-on-surface($nifi-theme-color-config, highlight);
+        fill: utils.get-on-surface($nifi-theme-color-config, highlight);
     }
 
     .nifi-surface-default {
-        color: $nifi-theme-surface-palette-default !important;
-        fill: $nifi-theme-surface-palette-default !important;
+        color: $nifi-theme-surface-palette-default;
+        fill: $nifi-theme-surface-palette-default;
     }
 
     .nifi-surface-lighter {
-        color: $nifi-theme-surface-palette-lighter !important;
-        fill: $nifi-theme-surface-palette-lighter !important;
+        color: $nifi-theme-surface-palette-lighter;
+        fill: $nifi-theme-surface-palette-lighter;
     }
 
     .nifi-surface-darker {
-        color: $nifi-theme-surface-palette-darker !important;
-        fill: $nifi-theme-surface-palette-darker !important;
+        color: $nifi-theme-surface-palette-darker;
+        fill: $nifi-theme-surface-palette-darker;
     }
 
     .nifi-success-default {
-        color: $nifi-theme-success-palette-default !important;
-        fill: $nifi-theme-success-palette-default !important;
+        color: $nifi-theme-success-palette-default;
+        fill: $nifi-theme-success-palette-default;
     }
 
     .nifi-success-lighter {
-        color: $nifi-theme-success-palette-lighter !important;
-        fill: $nifi-theme-success-palette-lighter !important;
+        color: $nifi-theme-success-palette-lighter;
+        fill: $nifi-theme-success-palette-lighter;
     }
 
     .nifi-success-darker {
-        color: $nifi-theme-success-palette-darker !important;
-        fill: $nifi-theme-success-palette-darker !important;
+        color: $nifi-theme-success-palette-darker;
+        fill: $nifi-theme-success-palette-darker;
     }
 
     .nifi-warn-default {
-        color: $nifi-theme-warn-palette-default !important;
-        fill: $nifi-theme-warn-palette-default !important;
+        color: $nifi-theme-warn-palette-default;
+        fill: $nifi-theme-warn-palette-default;
     }
 
     .nifi-warn-lighter {
-        color: $nifi-theme-warn-palette-lighter !important;
-        fill: $nifi-theme-warn-palette-lighter !important;
+        color: $nifi-theme-warn-palette-lighter;
+        fill: $nifi-theme-warn-palette-lighter;
     }
 
     .nifi-warn-darker {
-        color: $nifi-theme-warn-palette-darker !important;
-        fill: $nifi-theme-warn-palette-darker !important;
+        color: $nifi-theme-warn-palette-darker;
+        fill: $nifi-theme-warn-palette-darker;
     }
 
     // surface colors based on nifi theme
@@ -362,6 +348,12 @@
         box-shadow: 0 3px 6px $nifi-theme-surface-palette-A200;
     }
 
+    .has-errors,
+    .invalid {
+        color: $nifi-theme-warn-palette-A200;
+        fill: $nifi-theme-warn-palette-A200;
+    }
+
     .tooltip {
         background-color: $surface-primary-default;
         border-color: $on-surface-primary-default;
@@ -374,19 +366,6 @@
         box-shadow: 0 2px 5px $nifi-theme-surface-palette-A200;
     }
 
-    .mat-mdc-icon-button:hover {
-        background-color: $on-surface-primary-highlight !important;
-    }
-
-    .mat-mdc-icon-button:disabled {
-        color: $on-surface-primary-lighter !important;
-        background-color: transparent !important;
-
-        i {
-            color: $on-surface-primary-lighter !important;
-        }
-    }
-
     ngx-skeleton-loader .skeleton-loader {
         background: $on-surface-primary-lighter;
     }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table.scss
index 50116dbe22..3e5d1ff9a8 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table.scss
@@ -130,13 +130,9 @@
                 background-color: $surface-darker;
             }
 
-            .fa {
-                color: utils.get-color-on-surface($material-theme-color-config, $surface);
-            }
-
-            .icon {
-                color: utils.get-color-on-surface($material-theme-color-config, $surface);
-            }
+            //.icon {
+            //    color: utils.get-color-on-surface($material-theme-color-config, $surface);
+            //}
         }
     }
 }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/material.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/material.scss
index 4de252db53..efdb4fa157 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/material.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/material.scss
@@ -31,7 +31,7 @@ $material-primary-light-palette: (
     50: rgba(#F9FAFB, 0.97),
     100: #e5ebed,
     200: #cbd8dd,
-    300: #abbdc5, // "lighter" hue for light mode: .nf-editor.CodeMirror.blank, circle.event-circle, .hint-pattern, .zero
+    300: #abbdc5, // "lighter" hue for light mode: .nf-editor.CodeMirror.blank, circle.event-circle, .hint-pattern,
     400: #8aa2ad,
     500: #728e9b,
     600: #597b8a, // "default" hue for light mode: .splash, text.active-thread-count-icon, text.connection-from-run-status, text.connection-to-run-status, text.expiration-icon, text.load-balance-icon, text.penalized-icon, rect.process-group-banner, rect.remote-process-group-banner, text.process-group-name, text.remote-process-group-name, text.process-group-contents-icon, text.remote-process-group-transmission-status, .prioritizers.prioritizers-list, .parameter-context-inheritance.parameter-context-inheritance-list, div.context-menu, .nf-editor.CodeMirror.blank,
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss
index ecabea1eee..1bad5b0310 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss
@@ -22,7 +22,6 @@
 @use 'assets/styles/app' as app;
 @use 'assets/styles/listing-table' as listing-table;
 @use 'app/app.component-theme' as app-component;
-@use 'app/pages/access-policies/ui/component-access-policies/component-access-policies.component-theme' as component-access-policies;
 @use 'app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component-theme' as bulletin-board-list;
 @use 'app/pages/flow-designer/ui/canvas/canvas.component-theme' as canvas;
 @use 'app/pages/flow-designer/ui/canvas/footer/footer.component-theme' as footer;
@@ -40,7 +39,6 @@
 @use 'app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/lineage.component-theme' as lineage;
 @use 'app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component-theme' as parameter-context-inheritance;
 @use 'app/ui/common/context-menu/context-menu.component-theme' as context-menu;
-@use 'app/ui/common/extension-creation/extension-creation.component-theme' as extension-creation;
 @use 'app/ui/common/navigation/navigation.component-theme' as navigation;
 @use 'app/ui/common/property-table/editors/nf-editor/nf-editor.component-theme' as nf-editor;
 @use 'app/ui/common/status-history/status-history.component-theme' as status-history;
@@ -80,17 +78,16 @@
 @include mat.all-component-themes($material-theme-light);
 
 // generate light mode stylesheets
-@include app.generate-material-theme($material-theme-light, $nifi-theme-light);
+@include app.generate-material-theme($material-theme-light);
 @include app.generate-nifi-theme($nifi-theme-light);
 @include app-component.generate-theme($material-theme-light);
 @include listing-table.generate-theme($material-theme-light, $nifi-theme-light);
-@include component-access-policies.generate-theme($nifi-theme-light);
 @include bulletin-board-list.generate-theme($nifi-theme-light);
 @include canvas.generate-theme($material-theme-light, $nifi-theme-light);
 @include footer.generate-theme($nifi-theme-light);
-@include navigation-control.generate-theme($material-theme-light, $nifi-theme-light);
+@include navigation-control.generate-theme($nifi-theme-light);
 @include birdseye-control.generate-theme($material-theme-light, $nifi-theme-light);
-@include operation-control.generate-theme($material-theme-light, $nifi-theme-light);
+@include operation-control.generate-theme($nifi-theme-light);
 @include flow-status.generate-theme($material-theme-light, $nifi-theme-light);
 @include new-canvas-item.generate-theme($material-theme-light, $nifi-theme-light);
 @include search.generate-theme($nifi-theme-light);
@@ -101,7 +98,6 @@
 @include lineage.generate-theme($material-theme-light, $nifi-theme-light);
 @include parameter-context-inheritance.generate-theme($material-theme-light, $nifi-theme-light);
 @include context-menu.generate-theme($material-theme-light, $nifi-theme-light);
-@include extension-creation.generate-theme($nifi-theme-light);
 @include navigation.generate-theme($material-theme-light);
 @include nf-editor.generate-theme($material-theme-light, $nifi-theme-light);
 @include status-history.generate-theme($nifi-theme-light);
@@ -115,17 +111,16 @@
     @include mat.all-component-colors($material-theme-dark);
 
     // generate dark mode stylesheets
-    @include app.generate-material-theme($material-theme-dark, $nifi-theme-dark);
+    @include app.generate-material-theme($material-theme-dark);
     @include app.generate-nifi-theme($nifi-theme-dark);
     @include app-component.generate-theme($material-theme-dark);
     @include listing-table.generate-theme($material-theme-dark, $nifi-theme-dark);
-    @include component-access-policies.generate-theme($nifi-theme-dark);
     @include bulletin-board-list.generate-theme($nifi-theme-dark);
     @include canvas.generate-theme($material-theme-dark, $nifi-theme-dark);
     @include footer.generate-theme($nifi-theme-dark);
-    @include navigation-control.generate-theme($material-theme-dark, $nifi-theme-dark);
+    @include navigation-control.generate-theme($nifi-theme-dark);
     @include birdseye-control.generate-theme($material-theme-dark, $nifi-theme-dark);
-    @include operation-control.generate-theme($material-theme-dark, $nifi-theme-dark);
+    @include operation-control.generate-theme($nifi-theme-dark);
     @include flow-status.generate-theme($material-theme-dark, $nifi-theme-dark);
     @include new-canvas-item.generate-theme($material-theme-dark, $nifi-theme-dark);
     @include search.generate-theme($nifi-theme-dark);
@@ -136,7 +131,6 @@
     @include lineage.generate-theme($material-theme-dark, $nifi-theme-dark);
     @include parameter-context-inheritance.generate-theme($material-theme-dark, $nifi-theme-dark);
     @include context-menu.generate-theme($material-theme-dark, $nifi-theme-dark);
-    @include extension-creation.generate-theme($nifi-theme-dark);
     @include navigation.generate-theme($material-theme-dark);
     @include nf-editor.generate-theme($material-theme-dark, $nifi-theme-dark);
     @include status-history.generate-theme($nifi-theme-dark);