diff --git a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/app.component.ts b/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/app.component.ts
index 06e30893554e..e366abd93399 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/app.component.ts
+++ b/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/app.component.ts
@@ -36,7 +36,7 @@ export class AppComponent {
         // Initially check if dark mode is enabled on system
         const darkModeOn = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
 
-        // If dark mode is enabled then directly switch to the dark-theme
+        // If dark mode is enabled then directly switch to the dark theme
         this.themingService.toggleTheme(darkModeOn, theme);
 
         if (window.matchMedia) {
diff --git a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/feature/_jolt-transform-json-ui.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/feature/_jolt-transform-json-ui.component-theme.scss
index 109374f66e3c..15d9f320f4a4 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/feature/_jolt-transform-json-ui.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/feature/_jolt-transform-json-ui.component-theme.scss
@@ -18,7 +18,7 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
+@mixin generate-theme() {
     .jolt-transform-json-ui {
         @include mat.button-density(-1);
 
diff --git a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/styles.scss b/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/styles.scss
index 043303992d3a..2de1beaa478c 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/styles.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/styles.scss
@@ -30,12 +30,6 @@
 @use 'font-awesome';
 @use 'libs/shared/src/assets/themes/material';
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
-@include mat.elevation-classes();
-@include mat.app-background();
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -45,19 +39,15 @@
 @include listing-table.styles();
 
 html {
-    @include mat.typography-hierarchy(material.$m3-light-theme);
-    @include mat.all-component-themes(material.$m3-light-theme);
-    @include app.generate-material-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include codemirror-theme.generate-codemirror-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include listing-table.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include jolt-transform-json-ui.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-
-    .dark-theme {
-        //@include mat.typography-hierarchy($m3-dark-theme);
-        @include mat.all-component-colors(material.$m3-dark-theme);
-        @include app.generate-material-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include codemirror-theme.generate-codemirror-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include listing-table.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include jolt-transform-json-ui.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
+    @include app.generate-material-theme();
+    @include codemirror-theme.generate-codemirror-theme();
+    @include listing-table.generate-theme();
+    @include jolt-transform-json-ui.generate-theme();
+
+    .darkMode {
+        @include app.generate-material-theme();
+        @include codemirror-theme.generate-codemirror-theme();
+        @include listing-table.generate-theme();
+        @include jolt-transform-json-ui.generate-theme();
     }
 }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/_app.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/_app.component-theme.scss
index 16e5df2d7f3d..b7eb35c7c518 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/_app.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/_app.component-theme.scss
@@ -18,14 +18,8 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
-    $material-theme-secondary-palette-default: mat.get-theme-color(
-        $material-theme,
-        secondary,
-        map.get(map.get($config, secondary), default)
-    );
-
+@mixin generate-theme() {
     .splash {
-        background-color: $material-theme-secondary-palette-default;
+        background-color: var(--mat-sys-secondary);
     }
 }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/app.component.ts b/nifi-frontend/src/main/frontend/apps/nifi/src/app/app.component.ts
index 77465bf5c515..d6e93435c92f 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/app.component.ts
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/app.component.ts
@@ -107,7 +107,7 @@ export class AppComponent implements OnDestroy {
         // Initially check if dark mode is enabled on system
         const darkModeOn = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
 
-        // If dark mode is enabled then directly switch to the dark-theme
+        // If dark mode is enabled then directly switch to the dark theme
         this.themingService.toggleTheme(darkModeOn, theme);
 
         if (window.matchMedia) {
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/content-viewer/ui/external-viewer/external-viewer.component.html b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/content-viewer/ui/external-viewer/external-viewer.component.html
index 818fe0d28e24..2fe40eace3ad 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/content-viewer/ui/external-viewer/external-viewer.component.html
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/content-viewer/ui/external-viewer/external-viewer.component.html
@@ -16,5 +16,10 @@
   -->
 
 @if (frameSource) {
-    <iframe class="h-full w-full" [src]="frameSource" *recreateView="frameSource"></iframe>
+    <iframe
+        #iframeRef
+        class="h-full w-full"
+        [src]="frameSource"
+        *recreateView="frameSource"
+        (load)="systemTokensService.appendStyleSheet(iframeRef)"></iframe>
 }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/content-viewer/ui/external-viewer/external-viewer.component.ts b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/content-viewer/ui/external-viewer/external-viewer.component.ts
index f5c8e80c9a58..3ea9ee36df6a 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/content-viewer/ui/external-viewer/external-viewer.component.ts
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/content-viewer/ui/external-viewer/external-viewer.component.ts
@@ -19,7 +19,7 @@ import { Component, OnDestroy, SecurityContext } from '@angular/core';
 import { NiFiState } from '../../../../state';
 import { Store } from '@ngrx/store';
 import { selectRef } from '../../state/content/content.selectors';
-import { isDefinedAndNotNull } from '@nifi/shared';
+import { isDefinedAndNotNull, SystemTokensService } from '@nifi/shared';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { HttpParams } from '@angular/common/http';
@@ -42,7 +42,8 @@ export class ExternalViewer implements OnDestroy {
 
     constructor(
         private store: Store<NiFiState>,
-        private domSanitizer: DomSanitizer
+        private domSanitizer: DomSanitizer,
+        protected systemTokensService: SystemTokensService
     ) {
         this.store
             .select(selectRef)
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/documentation/feature/_documentation.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/documentation/feature/_documentation.component-theme.scss
index 39e3359353a6..39fa516f4e76 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/documentation/feature/_documentation.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/documentation/feature/_documentation.component-theme.scss
@@ -18,15 +18,7 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
-    $material-theme-tertiary-palette-variant: mat.get-theme-color(
-        $material-theme,
-        tertiary,
-        map.get(map.get($config, tertiary), variant)
-    );
-
-    $selected-item-color: $material-theme-tertiary-palette-variant;
-
+@mixin generate-theme() {
     .documentation {
         h2 {
             margin-bottom: 12px !important;
@@ -35,11 +27,18 @@
         .extension-links,
         .external-links {
             a:hover {
-                background-color: var(--mat-menu-item-hover-state-layer-color) !important;
+                background-color: var(
+                    --mat-menu-item-hover-state-layer-color,
+                    color-mix(
+                        in srgb,
+                        var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%),
+                        transparent
+                    )
+                ) !important;
             }
 
             a.selected {
-                background-color: $selected-item-color !important;
+                background-color: var(--mat-sys-tertiary-container) !important;
             }
         }
 
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
index 11eeabe155ea..4869ec921a80 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
@@ -18,64 +18,15 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
-    $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
-    $material-theme-primary-palette-default: mat.get-theme-color(
-        $material-theme,
-        primary,
-        map.get(map.get($config, primary), default)
-    );
-    $material-theme-secondary-palette-default: mat.get-theme-color(
-        $material-theme,
-        secondary,
-        map.get(map.get($config, secondary), default)
-    );
-    $material-theme-tertiary-palette-default: mat.get-theme-color(
-        $material-theme,
-        tertiary,
-        map.get(map.get($config, tertiary), default)
-    );
-    $material-theme-error-palette-default: mat.get-theme-color(
-        $material-theme,
-        error,
-        map.get(map.get($config, error), default)
-    );
-    $material-theme-neutral-palette-default: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), default)
-    );
-    $material-theme-neutral-palette-darker: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), darker)
-    );
-    $material-theme-neutral-palette-lighter: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), lighter)
-    );
-    $primary-contrast: map.get(map.get($config, primary), contrast);
-    $caution-contrast: map.get(map.get($config, caution), contrast);
-    $error-contrast: map.get(map.get($config, error), contrast);
-    $neutral-contrast: map.get(map.get($config, neutral), contrast);
-    $border-color: mat.get-theme-color($material-theme, neutral-variant, map.get($config, neutral-variant));
-    $success-lighter: map.get(map.get($config, success), lighter);
-    $success-default: map.get(map.get($config, success), default);
-    $caution: map.get(map.get($config, caution), default);
-
+@mixin generate-theme() {
     // Shadows should always be darker. We explicitly set this so the SVG shadows are correct in both modes.
     $drop-shadow-color: black;
-    $connection-drop-shadow-color: if($is-material-dark, black, white);
+    $connection-drop-shadow-color: var(--nf-connection-drop-shadow);
 
     .canvas-background {
-        background-color: if(
-            $is-material-dark,
-            $material-theme-neutral-palette-darker,
-            $material-theme-neutral-palette-lighter
-        );
-        background-image: linear-gradient(to right, if($is-material-dark, #0d1411, #e5ebed) 1px, transparent 1px),
-            linear-gradient(to bottom, if($is-material-dark, #0d1411, #e5ebed) 1px, transparent 1px);
+        background-color: var(--mat-sys-background);
+        background-image: linear-gradient(to right, var(--nf-canvas-background) 1px, transparent 1px),
+            linear-gradient(to bottom, var(--nf-canvas-background) 1px, transparent 1px);
     }
 
     /* svg styles */
@@ -86,7 +37,7 @@
       */
 
         g.component {
-            font-family: mat.get-theme-typography($material-theme, body-medium, font-family);
+            font-family: var(--mat-sys-body-medium-font);
         }
 
         .transparent {
@@ -94,127 +45,103 @@
         }
 
         g.component rect.body {
-            fill: if(
-                $is-material-dark,
-                $material-theme-neutral-palette-darker,
-                $material-theme-neutral-palette-lighter
-            );
+            fill: var(--mat-sys-background);
         }
 
         rect.banner {
-            fill: rgba(
-                if($is-material-dark, $material-theme-neutral-palette-lighter, $material-theme-neutral-palette-darker),
-                0.08
-            );
+            fill: var(--nf-banner);
         }
 
         rect.odd {
-            fill: rgba(
-                if($is-material-dark, $material-theme-neutral-palette-lighter, $material-theme-neutral-palette-darker),
-                0.025
-            );
+            fill: var(--nf-odd);
         }
 
         rect.even {
-            fill: if(
-                $is-material-dark,
-                $material-theme-neutral-palette-darker,
-                $material-theme-neutral-palette-lighter
-            );
+            fill: var(--nf-even);
         }
 
         rect.row-border {
-            fill: $border-color;
+            fill: var(--mat-sys-outline);
         }
 
         g.component rect.body.unauthorized {
-            fill: if(
-                $is-material-dark,
-                $material-theme-neutral-palette-darker,
-                $material-theme-neutral-palette-lighter
-            );
+            fill: var(--mat-sys-background);
         }
 
         g.component rect.border,
         g.connections rect.border {
-            stroke: $border-color;
-            stroke-width: if(
-                $is-material-dark,
-                2,
-                1
+            stroke: var(--mat-sys-outline);
+            stroke-width: var(
+                --nf-canvas-border-stroke-width
             ); // Dark mode gets a wider stroke to provide contrast between the canvas and components
         }
 
         g.component rect.border.unauthorized {
-            stroke: $material-theme-error-palette-default !important;
+            stroke: var(--mat-sys-error) !important;
         }
 
         g.component rect.border.ghost {
-            stroke: $material-theme-neutral-palette-default !important;
+            stroke: var(--nf-neutral) !important;
         }
 
         g.component rect.processor-icon-container.unauthorized {
-            fill: if(
-                $is-material-dark,
-                $material-theme-neutral-palette-darker,
-                $material-theme-neutral-palette-lighter
-            );
+            fill: var(--mat-sys-background);
         }
 
         g.component.selected rect.border {
-            stroke: $material-theme-primary-palette-default !important;
+            stroke: var(--mat-sys-primary) !important;
         }
 
         text.stats-label {
             @extend .neutral-contrast;
-            font-family: mat.get-theme-typography($material-theme, body-medium, font-family);
+            font-family: var(--mat-sys-body-medium-font);
         }
 
         text.stats-value {
-            fill: $material-theme-tertiary-palette-default;
+            fill: var(--mat-sys-tertiary);
         }
 
         text.stats-info {
-            fill: $material-theme-primary-palette-default;
+            fill: var(--mat-sys-primary);
         }
 
         text.bulletin-icon {
             &.info,
             &.debug,
             &.trace {
-                fill: $primary-contrast;
+                fill: var(--mat-sys-on-primary);
             }
         }
 
         text.bulletin-icon {
             &.error {
-                fill: $error-contrast;
+                fill: var(--mat-sys-on-error);
             }
         }
 
         text.bulletin-icon {
             &.warning {
-                fill: $caution-contrast;
+                fill: var(--nf-caution-contrast);
             }
         }
 
         rect.bulletin-background {
             &.error {
-                fill: $material-theme-error-palette-default;
+                fill: var(--mat-sys-error);
             }
             &.warning {
-                fill: $caution;
+                fill: var(--nf-caution-default);
             }
             &.info,
             &.debug,
             &.trace {
-                fill: $success-default;
+                fill: var(--nf-success-default);
             }
         }
 
         text.component-comments {
-            fill: $material-theme-primary-palette-default;
-            stroke: $border-color;
+            fill: var(--mat-sys-primary);
+            stroke: var(--mat-sys-outline);
         }
 
         /*
@@ -228,12 +155,12 @@
         rect.component-selection,
         rect.drag-selection,
         rect.label-drag {
-            stroke: $material-theme-primary-palette-default;
+            stroke: var(--mat-sys-primary);
             fill: transparent;
         }
 
         text.add-connect {
-            fill: $material-theme-primary-palette-default;
+            fill: var(--mat-sys-primary);
         }
 
         /*
@@ -244,103 +171,71 @@
         }
 
         rect.processor-read-write-stats {
-            fill: if(
-                $is-material-dark,
-                $material-theme-neutral-palette-darker,
-                $material-theme-neutral-palette-lighter
-            );
+            fill: var(--mat-sys-background);
         }
 
         rect.processor-stats-border {
-            fill: $border-color;
+            fill: var(--mat-sys-outline);
         }
 
         text.processor-name {
-            fill: $neutral-contrast;
+            fill: var(--mat-sys-on-surface);
         }
 
         text.processor-type {
-            fill: $material-theme-primary-palette-default;
+            fill: var(--mat-sys-primary);
         }
 
         circle.is-primary-background {
-            stroke: if(
-                $is-material-dark,
-                $material-theme-neutral-palette-lighter,
-                $material-theme-neutral-palette-darker
-            );
-            fill: if(
-                $is-material-dark,
-                $material-theme-neutral-palette-darker,
-                $material-theme-neutral-palette-lighter
-            );
+            stroke: var(--mat-sys-on-background);
+            fill: var(--mat-sys-background);
         }
 
         text.is-primary {
-            fill: if(
-                $is-material-dark,
-                $material-theme-neutral-palette-lighter,
-                $material-theme-neutral-palette-darker
-            );
+            fill: var(--mat-sys-on-background);
         }
 
         text.processor-bundle {
-            fill: $material-theme-neutral-palette-default;
+            fill: var(--nf-neutral);
         }
 
         rect.processor-icon-container {
-            fill: if(
-                $is-material-dark,
-                $material-theme-neutral-palette-darker,
-                $material-theme-neutral-palette-lighter
-            );
+            fill: var(--mat-sys-background);
         }
 
         circle.restricted-background {
-            fill: if(
-                $is-material-dark,
-                $material-theme-neutral-palette-darker,
-                $material-theme-neutral-palette-lighter
-            );
+            fill: var(--mat-sys-background);
         }
 
         text.restricted {
-            fill: $material-theme-error-palette-default;
+            fill: var(--mat-sys-error);
         }
 
         /*
           Connection
       */
         #connection-full-drop-shadow feFlood {
-            flood-color: $material-theme-error-palette-default;
+            flood-color: var(--mat-sys-error);
         }
 
         g.connection {
-            font-family: mat.get-theme-typography($material-theme, body-medium, font-family);
+            font-family: var(--mat-sys-body-medium-font);
         }
 
         g.connection rect.body {
-            fill: if(
-                $is-material-dark,
-                $material-theme-neutral-palette-darker,
-                $material-theme-neutral-palette-lighter
-            );
+            fill: var(--mat-sys-background);
         }
 
         g.connection rect.body.unauthorized {
-            fill: if(
-                $is-material-dark,
-                $material-theme-neutral-palette-darker,
-                $material-theme-neutral-palette-lighter
-            );
+            fill: var(--mat-sys-background);
         }
 
         g.connection rect.border.unauthorized {
-            stroke: $material-theme-error-palette-default;
+            stroke: var(--mat-sys-error);
         }
 
         g.connection rect.border.full {
-            stroke: $material-theme-tertiary-palette-default;
+            stroke: var(--mat-sys-tertiary);
         }
 
         g.connection.selected rect.border {
@@ -357,23 +252,16 @@
 
         g.connection path.connection-path {
             fill: none;
-            stroke: $neutral-contrast;
-            filter: drop-shadow(
-                0 3px 6px
-                    if(
-                        $is-material-dark,
-                        $material-theme-neutral-palette-darker,
-                        $material-theme-neutral-palette-lighter
-                    )
-            );
+            stroke: var(--mat-sys-on-surface);
+            filter: drop-shadow(0 3px 6px var(--mat-sys-background));
         }
 
         g.connection path.connection-path.full {
-            stroke: $material-theme-error-palette-default;
+            stroke: var(--mat-sys-error);
         }
 
         g.connection path.connection-path.unauthorized {
-            stroke: $material-theme-error-palette-default;
+            stroke: var(--mat-sys-error);
         }
 
         g.connection rect.backpressure-tick {
@@ -382,16 +270,12 @@
 
         g.connection rect.backpressure-tick.data-size-prediction.prediction-down,
         g.connection rect.backpressure-tick.object-prediction.prediction-down {
-            fill: if(
-                $is-material-dark,
-                $material-theme-neutral-palette-darker,
-                $material-theme-neutral-palette-lighter
-            );
+            fill: var(--mat-sys-background);
         }
 
         g.connection rect.backpressure-tick.data-size-prediction,
         g.connection rect.backpressure-tick.object-prediction {
-            fill: $border-color;
+            fill: var(--mat-sys-outline);
         }
 
         g.connection rect.backpressure-tick.data-size-prediction.not-configured,
@@ -402,12 +286,12 @@
         }
 
         g.connection rect.backpressure-tick.not-configured {
-            fill: $material-theme-neutral-palette-default;
+            fill: var(--nf-neutral);
         }
 
         g.connection rect.backpressure-object,
         g.connection rect.backpressure-data-size {
-            fill: $border-color;
+            fill: var(--mat-sys-outline);
         }
 
         g.connection rect.backpressure-object.not-configured,
@@ -416,7 +300,7 @@
         }
 
         g.connection rect.backpressure-percent {
-            fill: $success-lighter;
+            fill: var(--nf-success-default);
         }
 
         g.connection rect.backpressure-percent.warning {
@@ -424,14 +308,14 @@
         }
 
         g.connection rect.backpressure-percent.error {
-            fill: $material-theme-error-palette-default;
+            fill: var(--mat-sys-error);
         }
 
         /* ghost connection */
 
         g.connection.ghost path.connection-path,
         g.connection.ghost rect.connection-label {
-            stroke: $material-theme-neutral-palette-default;
+            stroke: var(--nf-neutral);
         }
 
         g.connection path.connection-selection-path {
@@ -461,14 +345,14 @@
         /* labels */
 
         g.label path.resizable-triangle {
-            fill: rgba($material-theme-neutral-palette-darker, 0.2);
-            stroke: rgba($material-theme-neutral-palette-darker, 0.2);
+            fill: var(--nf-resizable-triangle);
+            stroke: var(--nf-resizable-triangle);
         }
 
         /* funnels */
 
         text.funnel-icon {
-            fill: $material-theme-tertiary-palette-default;
+            fill: var(--mat-sys-tertiary);
         }
 
         /* ports */
@@ -478,26 +362,22 @@
         }
 
         text.port-icon {
-            fill: $material-theme-tertiary-palette-default;
+            fill: var(--mat-sys-tertiary);
         }
 
         /* process groups */
 
         rect.process-group-stats-in-out {
-            fill: if(
-                $is-material-dark,
-                $material-theme-neutral-palette-darker,
-                $material-theme-neutral-palette-lighter
-            );
+            fill: var(--mat-sys-background);
         }
 
         rect.process-group-stats-border {
-            fill: $border-color;
+            fill: var(--mat-sys-outline);
         }
 
         rect.process-group-banner,
         rect.remote-process-group-banner {
-            fill: $material-theme-secondary-palette-default;
+            fill: var(--mat-sys-secondary);
         }
 
         text.version-control,
@@ -509,12 +389,12 @@
         text.stopped,
         text.process-group-running,
         text.process-group-stopped {
-            text-shadow: if($is-material-dark, 0 0 4px rgba(0, 0, 0, 1), 0 0 4px rgba(255, 255, 255, 1));
+            text-shadow: var(--nf-text-shadow);
         }
 
         text.process-group-contents-count {
-            fill: $material-theme-tertiary-palette-default;
-            font-family: mat.get-theme-typography($material-theme, body-medium, font-family);
+            fill: var(--mat-sys-tertiary);
+            font-family: var(--mat-sys-body-medium-font);
         }
 
         g.process-group.drop rect.border {
@@ -524,27 +404,23 @@
         /* remote process group */
 
         rect.remote-process-group-stats-border {
-            fill: $border-color;
+            fill: var(--mat-sys-outline);
         }
 
         rect.remote-process-group-received-stats {
-            fill: if(
-                $is-material-dark,
-                $material-theme-neutral-palette-darker,
-                $material-theme-neutral-palette-lighter
-            );
+            fill: var(--mat-sys-background);
         }
 
         text.remote-process-group-uri {
-            fill: $material-theme-primary-palette-default;
+            fill: var(--mat-sys-primary);
         }
 
         text.remote-process-group-transmission-secure {
-            fill: $material-theme-primary-palette-default;
+            fill: var(--mat-sys-primary);
         }
 
         text.remote-process-group-last-refresh {
-            fill: $material-theme-primary-palette-default;
+            fill: var(--mat-sys-primary);
         }
     }
 }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/_change-color-dialog.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/_change-color-dialog.component-theme.scss
index 6abcd38dcb8b..48f9355acdd8 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/_change-color-dialog.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/_change-color-dialog.component-theme.scss
@@ -18,47 +18,22 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
-    $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
-    $material-theme-neutral-palette-darker: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), darker)
-    );
-    $material-theme-neutral-palette-lighter: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), lighter)
-    );
-    $neutral-contrast: map.get(map.get($config, neutral), contrast);
-    $border-color: mat.get-theme-color($material-theme, neutral-variant, map.get($config, neutral-variant));
-
+@mixin generate-theme() {
     .preview {
         .processor {
-            background-color: if(
-                $is-material-dark,
-                $material-theme-neutral-palette-darker,
-                $material-theme-neutral-palette-lighter
-            );
+            background-color: var(--mat-sys-background);
         }
 
         .odd {
-            background-color: rgba(
-                if($is-material-dark, $material-theme-neutral-palette-lighter, $material-theme-neutral-palette-darker),
-                0.025
-            );
+            background-color: var(--nf-odd);
         }
 
         .even {
-            background-color: if(
-                $is-material-dark,
-                $material-theme-neutral-palette-darker,
-                $material-theme-neutral-palette-lighter
-            );
+            background-color: var(--nf-even);
         }
 
         .row-border {
-            border-top: 1px solid $border-color;
+            border-top: 1px solid var(--mat-sys-outline);
         }
     }
 }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss
index 13c917bafe6c..7cb9a2094421 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss
@@ -20,6 +20,6 @@
 
 @mixin generate-theme() {
     .breadcrumb-container {
-        background-color: var(--mat-app-background-color);
+        background-color: var(--mat-sys-background);
     }
 }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/_navigation-control.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/_navigation-control.component-theme.scss
index 1d23c3ba7d09..5763849b6e94 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/_navigation-control.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/_navigation-control.component-theme.scss
@@ -18,32 +18,24 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
-    $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
-    $material-theme-neutral-palette-darker: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), darker)
-    );
-    $material-theme-neutral-palette-lighter: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), lighter)
-    );
-
+@mixin generate-theme() {
     div.navigation-control {
         box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
-        background-color: if(
-            $is-material-dark,
-            $material-theme-neutral-palette-darker,
-            $material-theme-neutral-palette-lighter
-        );
+        background-color: var(--mat-sys-background);
 
         .navigation-control-header {
             &:hover {
                 background: linear-gradient(
                     -90deg,
-                    var(--mat-menu-item-hover-state-layer-color) 34px,
+                    var(
+                            --mat-menu-item-hover-state-layer-color,
+                            color-mix(
+                                in srgb,
+                                var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%),
+                                transparent
+                            )
+                        )
+                        34px,
                     transparent 35px
                 );
             }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/_birdseye.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/_birdseye.component-theme.scss
index 5fb48cdb3f4e..43f24cb99767 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/_birdseye.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/_birdseye.component-theme.scss
@@ -18,33 +18,12 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
-    $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
-    $material-theme-secondary-palette-default: mat.get-theme-color(
-        $material-theme,
-        secondary,
-        map.get(map.get($config, secondary), default)
-    );
-    $material-theme-neutral-palette-darker: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), darker)
-    );
-    $material-theme-neutral-palette-lighter: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), lighter)
-    );
-
+@mixin generate-theme() {
     #birdseye {
-        background: if(
-            $is-material-dark,
-            $material-theme-neutral-palette-darker,
-            $material-theme-neutral-palette-lighter
-        );
+        background: var(--mat-sys-background);
 
         rect.birdseye-brush {
-            stroke: $material-theme-secondary-palette-default;
+            stroke: var(--mat-sys-primary);
             fill: transparent;
         }
     }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.scss
index dba8f435cb23..f4bf6bd485b8 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.scss
@@ -18,10 +18,8 @@
 div.navigation-control {
     margin-bottom: 2px;
 
-    .mat-mdc-icon-button {
-        --mdc-icon-button-state-layer-size: 34px;
-        --mdc-icon-button-icon-size: 17px;
-    }
+    --mdc-icon-button-state-layer-size: 34px;
+    --mdc-icon-button-icon-size: 17px;
 
     .navigation-control-header {
         .fa {
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/_operation-control.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/_operation-control.component-theme.scss
index a58299f51a94..010a2663bbbc 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/_operation-control.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/_operation-control.component-theme.scss
@@ -18,32 +18,24 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
-    $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
-    $material-theme-neutral-palette-darker: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), darker)
-    );
-    $material-theme-neutral-palette-lighter: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), lighter)
-    );
-
+@mixin generate-theme() {
     div.operation-control {
         box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
-        background-color: if(
-            $is-material-dark,
-            $material-theme-neutral-palette-darker,
-            $material-theme-neutral-palette-lighter
-        );
+        background-color: var(--mat-sys-background);
 
         .operation-control-header {
             &:hover {
                 background: linear-gradient(
                     -90deg,
-                    var(--mat-menu-item-hover-state-layer-color) 34px,
+                    var(
+                            --mat-menu-item-hover-state-layer-color,
+                            color-mix(
+                                in srgb,
+                                var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%),
+                                transparent
+                            )
+                        )
+                        34px,
                     transparent 35px
                 );
             }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.scss
index 63415cd09980..ab6ae7d6d181 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.scss
@@ -18,10 +18,8 @@
 div.operation-control {
     margin-bottom: 2px;
 
-    .mat-mdc-icon-button {
-        --mdc-icon-button-state-layer-size: 34px;
-        --mdc-icon-button-icon-size: 17px;
-    }
+    --mdc-icon-button-state-layer-size: 34px;
+    --mdc-icon-button-icon-size: 17px;
 
     .operation-control-header {
         .fa {
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/violation-details-dialog/_violation-details-dialog.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/violation-details-dialog/_violation-details-dialog.component-theme.scss
index 218dad4ea797..ac3bcf05ba26 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/violation-details-dialog/_violation-details-dialog.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/violation-details-dialog/_violation-details-dialog.component-theme.scss
@@ -18,27 +18,14 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
-    $material-theme-secondary-palette-default: mat.get-theme-color(
-        $material-theme,
-        secondary,
-        map.get(map.get($config, secondary), default)
-    );
-    $material-theme-error-palette-default: mat.get-theme-color(
-        $material-theme,
-        error,
-        map.get(map.get($config, error), default)
-    );
-
-    $neutral-contrast: map.get(map.get($config, neutral), contrast);
-
+@mixin generate-theme() {
     .pill.enforce {
-        background-color: $material-theme-error-palette-default;
-        color: $neutral-contrast;
+        background-color: var(--mat-sys-error);
+        color: var(--mat-sys-on-error);
     }
 
     .pill.warn {
-        background-color: $material-theme-secondary-palette-default;
-        color: $neutral-contrast;
+        background-color: var(--mat-sys-secondary);
+        color: var(--mat-sys-on-secondary);
     }
 }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss
index 08e581d217e8..894198fb0ed8 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss
@@ -18,95 +18,57 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
-    $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
-    $material-theme-secondary-palette-default: mat.get-theme-color(
-        $material-theme,
-        secondary,
-        map.get(map.get($config, secondary), default)
-    );
-    $material-theme-error-palette-default: mat.get-theme-color(
-        $material-theme,
-        error,
-        map.get(map.get($config, error), default)
-    );
-    $material-theme-neutral-palette-darker: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), darker)
-    );
-    $material-theme-neutral-palette-lighter: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), lighter)
-    );
-
-    $material-theme-primary-palette-default: mat.get-theme-color(
-        $material-theme,
-        primary,
-        map.get(map.get($config, primary), default)
-    );
-
-    $primary-contrast: map.get(map.get($config, primary), contrast);
-    $caution-contrast: map.get(map.get($config, caution), contrast);
-    $error-contrast: map.get(map.get($config, error), contrast);
-    $success: map.get(map.get($config, success), default);
-    $caution: map.get(map.get($config, caution), default);
-
+@mixin generate-theme() {
     .flow-status {
-        background-color: if(
-            $is-material-dark,
-            $material-theme-neutral-palette-darker,
-            $material-theme-neutral-palette-lighter
-        );
+        background-color: var(--mat-sys-background);
 
         .controller-bulletins {
             background-color: unset;
 
             .fa {
-                color: $material-theme-primary-palette-default;
+                color: var(--mat-sys-primary);
             }
         }
 
         .controller-bulletins.has-bulletins {
             .fa {
-                color: $primary-contrast;
+                color: var(--mat-sys-on-primary);
             }
 
             &.error {
                 .fa {
-                    color: $error-contrast;
+                    color: var(--mat-sys-on-error);
                 }
 
-                background-color: $material-theme-error-palette-default;
+                background-color: var(--mat-sys-error);
             }
             &.warning {
                 .fa {
-                    color: $caution-contrast;
+                    color: var(--nf-caution-contrast);
                 }
 
-                background-color: $caution;
+                background-color: var(--nf-caution-default);
             }
             &.info,
             &.debug,
             &.trace {
-                background-color: $success;
+                background-color: var(--nf-success-default);
             }
         }
 
         .flow-analysis-notifications.warn {
-            background-color: $material-theme-secondary-palette-default;
+            background-color: var(--mat-sys-secondary);
 
             .fa {
-                color: $primary-contrast;
+                color: var(--mat-sys-on-secondary);
             }
         }
 
         .flow-analysis-notifications.enforce {
-            background-color: $material-theme-error-palette-default;
+            background-color: var(--mat-sys-error);
 
             .fa {
-                color: $primary-contrast;
+                color: var(--mat-sys-on-error);
             }
         }
     }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss
index 203bc51b4015..7e9c5e92d3c0 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss
@@ -18,39 +18,23 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
-    $material-theme-secondary-palette-default: mat.get-theme-color(
-        $material-theme,
-        secondary,
-        map.get(map.get($config, secondary), default)
-    );
-    $material-theme-neutral-palette-darker: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), darker)
-    );
-    $material-theme-neutral-palette-lighter: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), lighter)
-    );
-    $grip: map.get(map.get(map.get($config, secondary), new-canvas-item), grip);
-    $hover: map.get(map.get(map.get($config, secondary), new-canvas-item), hover);
-
+@mixin generate-theme() {
     .new-canvas-item {
         .icon {
             @extend .secondary-contrast;
 
             &.hovering {
-                @extend .mat-elevation-z2;
-
-                background: linear-gradient($hover, $hover) !important;
+                box-shadow: var(--mat-sys-level2);
+                background: linear-gradient(
+                    var(--nf-new-canvas-item-hover),
+                    var(--nf-new-canvas-item-hover)
+                ) !important;
 
                 .component-button-grip {
                     background: repeating-linear-gradient(
                         90deg,
-                        $grip,
-                        $material-theme-secondary-palette-default 4px,
+                        var(--nf-new-canvas-item-grip),
+                        var(--mat-sys-secondary) 4px,
                         transparent 4px,
                         transparent 6px
                     );
@@ -58,7 +42,7 @@
             }
 
             &.cdk-drag-dragging {
-                color: $material-theme-secondary-palette-default;
+                color: var(--mat-sys-secondary);
                 mix-blend-mode: difference; // Make sure the dragged icon is always visible
             }
         }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss
index 061c31dd8bf0..8e84fa5a3581 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss
@@ -18,40 +18,21 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
-    $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
-    $material-theme-neutral-palette-darker: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), darker)
-    );
-    $material-theme-neutral-palette-lighter: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), lighter)
-    );
-
+@mixin generate-theme() {
     .search-container {
         &:hover,
         &.open {
-            background-color: if(
-                $is-material-dark,
-                $material-theme-neutral-palette-darker,
-                $material-theme-neutral-palette-lighter
-            );
+            background-color: var(--mat-sys-background);
         }
 
         .search-input {
-            background-color: if(
-                $is-material-dark,
-                $material-theme-neutral-palette-darker,
-                $material-theme-neutral-palette-lighter
-            );
+            background-color: var(--mat-sys-background);
         }
     }
 
     .search-results {
-        background-color: var(--mat-menu-container-color);
+        box-shadow: var(--mat-sys-level4);
+        background-color: var(--mat-sys-surface);
         border-radius: 4px;
     }
 }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.html b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.html
index 435448798682..b188b39e6f21 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.html
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.html
@@ -27,7 +27,7 @@
             [cdkConnectedOverlayHasBackdrop]="true"
             [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
             (overlayOutsideClick)="backdropClicked($event)">
-            <div class="search-results mat-elevation-z8 w-96 border p-2 text-base max-h-96 overflow-y-auto">
+            <div class="search-results w-96 border p-2 text-base max-h-96 overflow-y-auto">
                 @if (searching) {
                     <div class="unset neutral-color italic">Searching</div>
                 } @else {
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.html b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.html
index 493f3aa49570..7f4b211c2314 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.html
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.html
@@ -34,7 +34,7 @@
                 (cdkDropListDropped)="dropAvailable($event)">
                 @for (item of availablePrioritizers; track item; let i = $index) {
                     <div
-                        class="prioritizer-draggable-item border mat-elevation-z2 m-1 font-bold"
+                        class="prioritizer-draggable-item border m-1 font-bold"
                         cdkDrag
                         cdkDragPreviewContainer="parent">
                         <ng-container
@@ -70,7 +70,7 @@
                 (cdkDropListDropped)="dropSelected($event)">
                 @for (item of selectedPrioritizers; track item; let i = $index) {
                     <div
-                        class="prioritizer-draggable-item border mat-elevation-z2 m-1 font-bold"
+                        class="prioritizer-draggable-item border m-1 font-bold"
                         cdkDrag
                         cdkDragPreviewContainer="parent"
                         [class.border-dashed]="isDisabled">
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.scss
index edfde7435cb4..9d4dd4c3d078 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.scss
@@ -16,6 +16,10 @@
  */
 
 .prioritizers {
+    .prioritizer-draggable-item {
+        box-shadow: var(--mat-sys-level2);
+    }
+
     .cdk-drag {
         height: 38px;
         padding-left: 6px;
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/_edit-processor.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/_edit-processor.component-theme.scss
index f7cfc4563f2b..f32d3c70e249 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/_edit-processor.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/_edit-processor.component-theme.scss
@@ -18,63 +18,43 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
-    $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
-    $material-theme-secondary-palette-default: mat.get-theme-color(
-        $material-theme,
-        secondary,
-        map.get(map.get($config, secondary), default)
-    );
-    $material-theme-error-palette-default: mat.get-theme-color(
-        $material-theme,
-        error,
-        map.get(map.get($config, error), default)
-    );
-
-    $material-theme-primary-palette-default: mat.get-theme-color(
-        $material-theme,
-        primary,
-        map.get(map.get($config, primary), default)
-    );
-
-    $primary-contrast: map.get(map.get($config, primary), contrast);
-    $caution-contrast: map.get(map.get($config, caution), contrast);
-    $error-contrast: map.get(map.get($config, error), contrast);
-    $success: map.get(map.get($config, success), default);
-    $caution: map.get(map.get($config, caution), default);
-
+@mixin generate-theme() {
     #edit-processor-header {
         .bulletins {
             background-color: unset;
 
             .fa {
-                color: $material-theme-primary-palette-default;
+                color: var(--mat-sys-primary);
             }
         }
 
         .bulletins.has-bulletins {
             .fa {
-                color: $primary-contrast;
+                color: var(--mat-sys-on-primary);
             }
 
             &.error {
                 .fa {
-                    color: $error-contrast;
+                    color: var(--mat-sys-on-error);
                 }
 
-                background-color: $material-theme-error-palette-default;
+                background-color: var(--mat-sys-error);
             }
             &.warning {
                 .fa {
-                    color: $caution-contrast;
+                    color: var(--nf-caution-contrast);
                 }
 
-                background-color: $caution;
+                background-color: var(--nf-caution-default);
             }
             &.info,
             &.debug,
             &.trace {
-                background-color: $success;
+                .fa {
+                    color: var(--nf-success-contrast);
+                }
+
+                background-color: var(--nf-success-default);
             }
         }
     }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/login/feature/_login.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/login/feature/_login.component-theme.scss
index 6f7598db0f7a..4b6e7900e676 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/login/feature/_login.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/login/feature/_login.component-theme.scss
@@ -18,25 +18,9 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
-    $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
-    $material-theme-neutral-palette-darker: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), darker)
-    );
-    $material-theme-neutral-palette-lighter: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), lighter)
-    );
-
+@mixin generate-theme() {
     .login-background {
-        background: if(
-                $is-material-dark,
-                $material-theme-neutral-palette-darker,
-                $material-theme-neutral-palette-lighter
-            )
-            url(../../../../../../../libs/shared/src/assets/icons/bg-error.png) left top no-repeat;
+        background: var(--mat-sys-background) url(../../../../../../../libs/shared/src/assets/icons/bg-error.png) left
+            top no-repeat;
     }
 }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/logout/feature/_logout.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/logout/feature/_logout.component-theme.scss
index d8585da7de3d..266220cbd15f 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/logout/feature/_logout.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/logout/feature/_logout.component-theme.scss
@@ -18,25 +18,9 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
-    $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
-    $material-theme-neutral-palette-darker: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), darker)
-    );
-    $material-theme-neutral-palette-lighter: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), lighter)
-    );
-
+@mixin generate-theme() {
     .logout-background {
-        background: if(
-                $is-material-dark,
-                $material-theme-neutral-palette-darker,
-                $material-theme-neutral-palette-lighter
-            )
-            url(../../../../../../../libs/shared/src/assets/icons/bg-error.png) left top no-repeat;
+        background: var(--mat-sys-background) url(../../../../../../../libs/shared/src/assets/icons/bg-error.png) left
+            top no-repeat;
     }
 }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss
index 0add24498702..8a32edddfa3e 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss
@@ -18,45 +18,22 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
-    $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
-    $material-theme-secondary-palette-default: mat.get-theme-color(
-        $material-theme,
-        secondary,
-        map.get(map.get($config, secondary), default)
-    );
-    $material-theme-tertiary-palette-default: mat.get-theme-color(
-        $material-theme,
-        tertiary,
-        map.get(map.get($config, tertiary), default)
-    );
-    $material-theme-neutral-palette-darker: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), darker)
-    );
-    $material-theme-neutral-palette-lighter: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), lighter)
-    );
-    $neutral-contrast: map.get(map.get($config, neutral), contrast);
-
+@mixin generate-theme() {
     rect.lineage {
-        fill: if($is-material-dark, $material-theme-neutral-palette-darker, $material-theme-neutral-palette-lighter);
+        fill: var(--mat-sys-background);
     }
 
     g.flowfile-icon text {
-        fill: $material-theme-tertiary-palette-default;
+        fill: var(--mat-sys-tertiary);
     }
 
     circle.event-circle {
-        fill: $material-theme-secondary-palette-default;
-        stroke: $neutral-contrast;
+        fill: var(--mat-sys-secondary);
+        stroke: var(--mat-sys-on-surface);
     }
 
     path.link {
-        stroke: $neutral-contrast;
+        stroke: var(--mat-sys-on-surface);
     }
 
     marker {
@@ -64,7 +41,7 @@
     }
 
     circle.flowfile-link {
-        fill: if($is-material-dark, $material-theme-neutral-palette-darker, $material-theme-neutral-palette-lighter);
-        stroke: $neutral-contrast;
+        fill: var(--mat-sys-background);
+        stroke: var(--mat-sys-on-surface);
     }
 }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/_provenance-event-table.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/_provenance-event-table.component-theme.scss
index 26472cd9b43f..136b3c6aeadd 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/_provenance-event-table.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/_provenance-event-table.component-theme.scss
@@ -18,26 +18,10 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
-    $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
-    $material-theme-neutral-palette-darker: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), darker)
-    );
-    $material-theme-neutral-palette-lighter: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), lighter)
-    );
-
+@mixin generate-theme() {
     .provenance-event-table {
         .lineage {
-            background-color: if(
-                $is-material-dark,
-                $material-theme-neutral-palette-darker,
-                $material-theme-neutral-palette-lighter
-            );
+            background-color: var(--mat-sys-background);
         }
     }
 }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/_lineage.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/_lineage.component-theme.scss
index 7bd752dd8522..646b80e17cec 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/_lineage.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/_lineage.component-theme.scss
@@ -18,56 +18,35 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
-    $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
-    $material-theme-secondary-palette-default: mat.get-theme-color(
-        $material-theme,
-        secondary,
-        map.get(map.get($config, secondary), default)
-    );
-    $material-theme-tertiary-palette-default: mat.get-theme-color(
-        $material-theme,
-        tertiary,
-        map.get(map.get($config, tertiary), default)
-    );
-    $material-theme-error-palette-default: mat.get-theme-color(
-        $material-theme,
-        error,
-        map.get(map.get($config, error), default)
-    );
-
+@mixin generate-theme() {
     #lineage {
         canvas,
         svg {
             text.event-type {
                 @extend .neutral-contrast;
-                font-family: mat.get-theme-typography($material-theme, body-medium, font-family);
+                font-family: var(--mat-sys-body-medium-font);
             }
 
             text.event-type.expand-parents,
             text.event-type.expand-children {
-                font-family: mat.get-theme-typography($material-theme, body-medium, font-family);
+                font-family: var(--mat-sys-body-medium-font);
             }
 
             path.link.selected {
-                stroke: $material-theme-error-palette-default;
+                stroke: var(--mat-sys-error);
             }
 
             g.event circle.selected {
-                fill: $material-theme-error-palette-default;
+                fill: var(--mat-sys-error);
             }
 
             g.event circle.context {
-                stroke: $material-theme-secondary-palette-default;
+                stroke: var(--mat-sys-secondary);
             }
 
             g.flowfile circle.context,
             g.event circle.context {
-                stroke: if(
-                    $is-material-dark,
-                    $material-theme-tertiary-palette-default,
-                    $material-theme-tertiary-palette-default
-                );
+                stroke: var(--mat-sys-tertiary);
             }
         }
     }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/_processor-status-table.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/_processor-status-table.component-theme.scss
index 311261f1e66e..e5c22157a7f6 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/_processor-status-table.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/_processor-status-table.component-theme.scss
@@ -18,27 +18,11 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
-    $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
-    $material-theme-neutral-palette-darker: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), darker)
-    );
-    $material-theme-neutral-palette-lighter: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), lighter)
-    );
-
+@mixin generate-theme() {
     .processor-status-table {
         .primary-node-only {
             min-width: 16px;
-            background-color: if(
-                $is-material-dark,
-                $material-theme-neutral-palette-darker,
-                $material-theme-neutral-palette-lighter
-            );
+            background-color: var(--mat-sys-background);
         }
     }
 }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/advanced-ui/advanced-ui.component.html b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/advanced-ui/advanced-ui.component.html
index 4b1cb3e6204c..6bb91263841e 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/advanced-ui/advanced-ui.component.html
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/advanced-ui/advanced-ui.component.html
@@ -21,7 +21,11 @@
     </header>
     <div class="flex flex-1">
         @if (frameSource) {
-            <iframe class="flex-1" [src]="frameSource"></iframe>
+            <iframe
+                #iframeRef
+                class="flex-1"
+                [src]="frameSource"
+                (load)="systemTokensService.appendStyleSheet(iframeRef)"></iframe>
         } @else {
             <div>Unable to open Advanced configuration UI.</div>
         }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/advanced-ui/advanced-ui.component.ts b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/advanced-ui/advanced-ui.component.ts
index be3cc345ffee..385078fa0bd8 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/advanced-ui/advanced-ui.component.ts
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/advanced-ui/advanced-ui.component.ts
@@ -22,7 +22,7 @@ import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { HttpParams } from '@angular/common/http';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Navigation } from '../navigation/navigation.component';
-import { isDefinedAndNotNull, selectRouteData } from '@nifi/shared';
+import { isDefinedAndNotNull, selectRouteData, SystemTokensService } from '@nifi/shared';
 import { AdvancedUiParams } from '../../../state/shared';
 import { selectDisconnectionAcknowledged } from '../../../state/cluster-summary/cluster-summary.selectors';
 
@@ -39,7 +39,8 @@ export class AdvancedUi {
 
     constructor(
         private store: Store<NiFiState>,
-        private domSanitizer: DomSanitizer
+        private domSanitizer: DomSanitizer,
+        protected systemTokensService: SystemTokensService
     ) {
         this.store
             .select(selectRouteData)
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss
index 97519fa918c0..9e1e5600fb77 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss
@@ -18,24 +18,29 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
-    $border-color: mat.get-theme-color($material-theme, neutral-variant, map.get($config, neutral-variant));
-
+@mixin generate-theme() {
     div.context-menu {
         .context-menu-item {
             .context-menu-item-text {
-                font-size: mat.get-theme-typography($material-theme, body-medium, font-size);
-                line-height: mat.get-theme-typography($material-theme, body-medium, line-height);
-                max-width: #{mat.get-theme-typography($material-theme, body-medium, font-size) * 20};
+                font-size: var(--mat-sys-body-medium-size);
+                line-height: var(--mat-sys-body-medium-line-height);
+                max-width: calc(var(--mat-sys-body-medium-size) * 20);
             }
 
             &:hover {
-                background-color: var(--mat-menu-item-hover-state-layer-color);
+                background-color: var(
+                    --mat-menu-item-hover-state-layer-color,
+                    color-mix(
+                        in srgb,
+                        var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%),
+                        transparent
+                    )
+                );
             }
         }
 
         .context-menu-item:active {
-            background-color: $border-color;
+            background-color: var(--mat-sys-outline);
         }
 
         &.show-focused {
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/context-menu/context-menu.component.html b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/context-menu/context-menu.component.html
index 32dbc83052b3..bc87d1e023b9 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/context-menu/context-menu.component.html
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/context-menu/context-menu.component.html
@@ -17,7 +17,7 @@
 
 <ng-template #menu>
     <div
-        class="context-menu mat-mdc-menu-panel pt-2 pb-2 mat-elevation-z8 primary-color"
+        class="context-menu mat-mdc-menu-panel pt-2 pb-2 primary-color"
         [class.show-focused]="showFocused$ | async"
         (keydown)="keydown($event)"
         cdkMenu>
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/context-menu/context-menu.component.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/context-menu/context-menu.component.scss
index d793dadc2305..1639db6d7ae8 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/context-menu/context-menu.component.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/context-menu/context-menu.component.scss
@@ -16,6 +16,7 @@
  */
 
 div.context-menu {
+    box-shadow: var(--mat-sys-level3);
     user-select: none;
     display: flex;
     flex-direction: column;
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/extension-creation/_extension-creation.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/extension-creation/_extension-creation.component-theme.scss
index 6f036148e534..c06a838e8805 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/extension-creation/_extension-creation.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/extension-creation/_extension-creation.component-theme.scss
@@ -18,10 +18,10 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
+@mixin generate-theme() {
     .extension-creation-dialog {
         .selected-type-description {
-            height: #{mat.get-theme-typography($material-theme, body-medium, line-height) * 3};
+            height: calc(var(--mat-sys-body-medium-line-height) * 3);
         }
     }
 }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
index 07c3567b03c3..e4d0ca519065 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
@@ -18,16 +18,9 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
-    $material-theme-secondary-palette-default: mat.get-theme-color(
-        $material-theme,
-        secondary,
-        map.get(map.get($config, secondary), default)
-    );
-    $secondary-contrast: map.get(map.get($config, secondary), contrast);
-
+@mixin generate-theme() {
     .nifi-navigation {
-        background-color: $material-theme-secondary-palette-default;
+        background-color: var(--mat-sys-secondary);
 
         .global-menu-icon.global-menu {
             @extend .secondary-contrast;
@@ -39,12 +32,12 @@
 
         .current-user {
             @extend .secondary-contrast;
-            font-family: mat.get-theme-typography($material-theme, body-medium, font-family);
+            font-family: var(--mat-sys-body-medium-font);
         }
 
         a {
             @extend .secondary-contrast;
-            text-decoration-color: $secondary-contrast;
+            text-decoration-color: var(--mat-sys-on-secondary);
         }
 
         a:hover {
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/parameter-context/parameter-context-inheritance/parameter-context-inheritance.component.html b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/parameter-context/parameter-context-inheritance/parameter-context-inheritance.component.html
index 043adac841c0..7b3ef122f49a 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/parameter-context/parameter-context-inheritance/parameter-context-inheritance.component.html
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/parameter-context/parameter-context-inheritance/parameter-context-inheritance.component.html
@@ -34,7 +34,7 @@
                 (cdkDropListDropped)="dropAvailable($event)">
                 @for (item of availableParameterContexts; track item; let i = $index) {
                     <div
-                        class="parameter-context-inheritance-draggable-item border mat-elevation-z2 m-1 font-bold"
+                        class="parameter-context-inheritance-draggable-item border m-1 font-bold"
                         cdkDrag
                         cdkDragPreviewContainer="parent"
                         [class.border-dashed]="isDisabled || !item.permissions.canRead"
@@ -74,7 +74,7 @@
                 (cdkDropListDropped)="dropSelected($event)">
                 @for (item of selectedParameterContexts; track item; let i = $index) {
                     <div
-                        class="parameter-context-inheritance-draggable-item border mat-elevation-z2 m-1 font-bold"
+                        class="parameter-context-inheritance-draggable-item border m-1 font-bold"
                         cdkDrag
                         cdkDragPreviewContainer="parent"
                         [cdkDragDisabled]="!item.permissions.canRead">
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/parameter-context/parameter-context-inheritance/parameter-context-inheritance.component.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/parameter-context/parameter-context-inheritance/parameter-context-inheritance.component.scss
index b52d86a4709d..268ac6d1cdd5 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/parameter-context/parameter-context-inheritance/parameter-context-inheritance.component.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/parameter-context/parameter-context-inheritance/parameter-context-inheritance.component.scss
@@ -16,6 +16,10 @@
  */
 
 .parameter-context-inheritance {
+    .parameter-context-inheritance-draggable-item {
+        box-shadow: var(--mat-sys-level2);
+    }
+
     .cdk-drag {
         height: 38px;
         padding-left: 6px;
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.html b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.html
index 16c86e6cc5bd..fcf27738a65d 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.html
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.html
@@ -15,7 +15,7 @@
   ~ limitations under the License.
   -->
 
-<div class="property-editor mat-elevation-z8 p-4" [style.width.px]="width" cdkDrag>
+<div class="property-editor p-4" [style.width.px]="width" cdkDrag>
     <form [formGroup]="comboEditorForm" cdkTrapFocus cdkTrapFocusAutoCapture>
         <div class="flex flex-col">
             <div>
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/property-table/editors/nf-editor/_nf-editor.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/property-table/editors/nf-editor/_nf-editor.component-theme.scss
index d636ac2dc265..1ca7d19d1453 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/property-table/editors/nf-editor/_nf-editor.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/property-table/editors/nf-editor/_nf-editor.component-theme.scss
@@ -24,7 +24,6 @@
 
         .nf-editor {
             &.blank {
-                border-color: var(--mdc-outlined-text-field-disabled-label-text-color);
                 cursor: not-allowed !important;
             }
         }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/property-table/editors/nf-editor/nf-editor.component.html b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/property-table/editors/nf-editor/nf-editor.component.html
index 063c383f29af..21c213ad70d4 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/property-table/editors/nf-editor/nf-editor.component.html
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/property-table/editors/nf-editor/nf-editor.component.html
@@ -15,12 +15,7 @@
   ~ limitations under the License.
   -->
 
-<div
-    class="property-editor mat-elevation-z8 p-4 h-full"
-    [style.width.px]="width"
-    cdkDrag
-    resizable
-    (resized)="resized($event)">
+<div class="property-editor p-4 h-full" [style.width.px]="width" cdkDrag resizable (resized)="resized($event)">
     <form class="h-full" [formGroup]="nfEditorForm" cdkTrapFocus [cdkTrapFocusAutoCapture]="!readonly">
         <div class="flex flex-col gap-y-3 relative h-full">
             <div class="flex justify-end">
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss
index 18030cc1b1fc..60bf258fd3b8 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss
@@ -18,19 +18,17 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
-    $border-color: mat.get-theme-color($material-theme, neutral-variant, map.get($config, neutral-variant));
-
+@mixin generate-theme() {
     #status-history-chart-container,
     #status-history-chart-control-container {
         .axis path,
         .axis line {
-            stroke: $border-color;
+            stroke: var(--mat-sys-outline);
         }
 
         .brush {
             .selection {
-                stroke: $border-color;
+                stroke: var(--mat-sys-outline);
             }
         }
     }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/styles.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/styles.scss
index f2ee20ac2819..19a2b731b2db 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/styles.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/styles.scss
@@ -66,12 +66,6 @@
 @use 'font-awesome';
 @use 'libs/shared/src/assets/themes/material';
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
-@include mat.elevation-classes();
-@include mat.app-background();
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -81,72 +75,69 @@
 @include listing-table.styles();
 
 html {
-    @include mat.typography-hierarchy(material.$m3-light-theme);
-    @include mat.all-component-themes(material.$m3-light-theme);
-    @include app.generate-material-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include codemirror-theme.generate-codemirror-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include prism-theme.generate-prism-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include app-component.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include listing-table.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include documentation.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include canvas.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
+    @include app.generate-material-theme();
+    @include codemirror-theme.generate-codemirror-theme();
+    @include prism-theme.generate-prism-theme();
+    @include app-component.generate-theme();
+    @include listing-table.generate-theme();
+    @include documentation.generate-theme();
+    @include canvas.generate-theme();
     @include footer.generate-theme();
-    @include extension-creation.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include birdseye-control.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include navigation-control.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include operation-control.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include flow-status.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include edit-processor.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include violation-details-dialog.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include new-canvas-item.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include search.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include login.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include logout.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include provenance-event-table.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include provenance.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include lineage.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include context-menu.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include navigation.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
+    @include extension-creation.generate-theme();
+    @include birdseye-control.generate-theme();
+    @include navigation-control.generate-theme();
+    @include operation-control.generate-theme();
+    @include flow-status.generate-theme();
+    @include edit-processor.generate-theme();
+    @include violation-details-dialog.generate-theme();
+    @include new-canvas-item.generate-theme();
+    @include search.generate-theme();
+    @include login.generate-theme();
+    @include logout.generate-theme();
+    @include provenance-event-table.generate-theme();
+    @include provenance.generate-theme();
+    @include lineage.generate-theme();
+    @include context-menu.generate-theme();
+    @include navigation.generate-theme();
     @include nf-editor.generate-theme();
-    @include status-history.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include property-hint-tip.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include processor-status-table.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include change-color-dialog.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
+    @include status-history.generate-theme();
+    @include property-hint-tip.generate-theme();
+    @include processor-status-table.generate-theme();
+    @include change-color-dialog.generate-theme();
     @include text-editor.generate-theme();
-    @include resizable.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
+    @include resizable.generate-theme();
 
-    .dark-theme {
-        @include mat.all-component-colors(material.$m3-dark-theme);
-        @include app.generate-material-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include codemirror-theme.generate-codemirror-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include prism-theme.generate-prism-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include app-component.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include listing-table.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include documentation.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include canvas.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
+    .darkMode {
+        @include app.generate-material-theme();
+        @include codemirror-theme.generate-codemirror-theme();
+        @include prism-theme.generate-prism-theme();
+        @include app-component.generate-theme();
+        @include listing-table.generate-theme();
+        @include documentation.generate-theme();
+        @include canvas.generate-theme();
         @include footer.generate-theme();
-        @include extension-creation.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include birdseye-control.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include navigation-control.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include operation-control.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include flow-status.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include edit-processor.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include violation-details-dialog.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include new-canvas-item.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include search.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include login.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include logout.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include provenance-event-table.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include provenance.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include lineage.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include context-menu.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include navigation.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
+        @include extension-creation.generate-theme();
+        @include birdseye-control.generate-theme();
+        @include navigation-control.generate-theme();
+        @include operation-control.generate-theme();
+        @include flow-status.generate-theme();
+        @include edit-processor.generate-theme();
+        @include violation-details-dialog.generate-theme();
+        @include new-canvas-item.generate-theme();
+        @include search.generate-theme();
+        @include login.generate-theme();
+        @include logout.generate-theme();
+        @include provenance-event-table.generate-theme();
+        @include provenance.generate-theme();
+        @include lineage.generate-theme();
+        @include context-menu.generate-theme();
+        @include navigation.generate-theme();
         @include nf-editor.generate-theme();
-        @include status-history.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include property-hint-tip.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include processor-status-table.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include change-color-dialog.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
+        @include status-history.generate-theme();
+        @include property-hint-tip.generate-theme();
+        @include processor-status-table.generate-theme();
+        @include change-color-dialog.generate-theme();
         @include text-editor.generate-theme();
-        @include resizable.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
+        @include resizable.generate-theme();
     }
 }
diff --git a/nifi-frontend/src/main/frontend/apps/standard-content-viewer/src/app/app.component.ts b/nifi-frontend/src/main/frontend/apps/standard-content-viewer/src/app/app.component.ts
index 0a050df231e8..cf6f76a51ac4 100644
--- a/nifi-frontend/src/main/frontend/apps/standard-content-viewer/src/app/app.component.ts
+++ b/nifi-frontend/src/main/frontend/apps/standard-content-viewer/src/app/app.component.ts
@@ -36,7 +36,7 @@ export class AppComponent {
         // Initially check if dark mode is enabled on system
         const darkModeOn = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
 
-        // If dark mode is enabled then directly switch to the dark-theme
+        // If dark mode is enabled then directly switch to the dark theme
         this.themingService.toggleTheme(darkModeOn, theme);
 
         if (window.matchMedia) {
diff --git a/nifi-frontend/src/main/frontend/apps/standard-content-viewer/src/app/pages/standard-content-viewer/feature/_standard-content-viewer.component-theme.scss b/nifi-frontend/src/main/frontend/apps/standard-content-viewer/src/app/pages/standard-content-viewer/feature/_standard-content-viewer.component-theme.scss
index 7cc061b26634..59f7e2c0bbc0 100644
--- a/nifi-frontend/src/main/frontend/apps/standard-content-viewer/src/app/pages/standard-content-viewer/feature/_standard-content-viewer.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/standard-content-viewer/src/app/pages/standard-content-viewer/feature/_standard-content-viewer.component-theme.scss
@@ -18,7 +18,7 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
+@mixin generate-theme() {
     .standard-content-viewer {
         @include mat.button-density(-1);
 
diff --git a/nifi-frontend/src/main/frontend/apps/standard-content-viewer/src/styles.scss b/nifi-frontend/src/main/frontend/apps/standard-content-viewer/src/styles.scss
index 53cc4711683b..ef0dda9cf7f3 100644
--- a/nifi-frontend/src/main/frontend/apps/standard-content-viewer/src/styles.scss
+++ b/nifi-frontend/src/main/frontend/apps/standard-content-viewer/src/styles.scss
@@ -30,12 +30,6 @@
 @use 'font-awesome';
 @use 'libs/shared/src/assets/themes/material';
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
-@include mat.elevation-classes();
-@include mat.app-background();
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -44,17 +38,13 @@
 @include app.styles();
 
 html {
-    @include mat.typography-hierarchy(material.$m3-light-theme);
-    @include mat.all-component-themes(material.$m3-light-theme);
-    @include app.generate-material-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include codemirror-theme.generate-codemirror-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include standard-content-viewer.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-
-    .dark-theme {
-        //@include mat.typography-hierarchy($m3-dark-theme);
-        @include mat.all-component-colors(material.$m3-dark-theme);
-        @include app.generate-material-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include codemirror-theme.generate-codemirror-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include standard-content-viewer.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
+    @include app.generate-material-theme();
+    @include codemirror-theme.generate-codemirror-theme();
+    @include standard-content-viewer.generate-theme();
+
+    .darkMode {
+        @include app.generate-material-theme();
+        @include codemirror-theme.generate-codemirror-theme();
+        @include standard-content-viewer.generate-theme();
     }
 }
diff --git a/nifi-frontend/src/main/frontend/apps/update-attribute/src/app/app.component.ts b/nifi-frontend/src/main/frontend/apps/update-attribute/src/app/app.component.ts
index f12f3ad510c8..1d87696d8675 100644
--- a/nifi-frontend/src/main/frontend/apps/update-attribute/src/app/app.component.ts
+++ b/nifi-frontend/src/main/frontend/apps/update-attribute/src/app/app.component.ts
@@ -36,7 +36,7 @@ export class AppComponent {
         // Initially check if dark mode is enabled on system
         const darkModeOn = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
 
-        // If dark mode is enabled then directly switch to the dark-theme
+        // If dark mode is enabled then directly switch to the dark theme
         this.themingService.toggleTheme(darkModeOn, theme);
 
         if (window.matchMedia) {
diff --git a/nifi-frontend/src/main/frontend/apps/update-attribute/src/app/pages/update-attribute/ui/rule-listing/_rule-listing.component-theme.scss b/nifi-frontend/src/main/frontend/apps/update-attribute/src/app/pages/update-attribute/ui/rule-listing/_rule-listing.component-theme.scss
index 06dccf1af89b..a3b32932ea90 100644
--- a/nifi-frontend/src/main/frontend/apps/update-attribute/src/app/pages/update-attribute/ui/rule-listing/_rule-listing.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/update-attribute/src/app/pages/update-attribute/ui/rule-listing/_rule-listing.component-theme.scss
@@ -18,9 +18,7 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
-    $alternate-surface: map.get($config, alternate-surface);
-
+@mixin generate-theme() {
     .rule-listing {
         .cdk-drop-list-dragging {
             background-color: unset !important;
@@ -29,9 +27,5 @@
         .cdk-drop-list {
             background: unset;
         }
-
-        .cdk-drag {
-            background: $alternate-surface;
-        }
     }
 }
diff --git a/nifi-frontend/src/main/frontend/apps/update-attribute/src/app/pages/update-attribute/ui/ua-editor/_ua-editor.component-theme.scss b/nifi-frontend/src/main/frontend/apps/update-attribute/src/app/pages/update-attribute/ui/ua-editor/_ua-editor.component-theme.scss
index fadae4377c18..fcd7633051b6 100644
--- a/nifi-frontend/src/main/frontend/apps/update-attribute/src/app/pages/update-attribute/ui/ua-editor/_ua-editor.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/update-attribute/src/app/pages/update-attribute/ui/ua-editor/_ua-editor.component-theme.scss
@@ -24,7 +24,6 @@
 
         .editor {
             &.blank {
-                border-color: var(--mdc-outlined-text-field-disabled-label-text-color);
                 cursor: not-allowed !important;
             }
         }
diff --git a/nifi-frontend/src/main/frontend/apps/update-attribute/src/app/pages/update-attribute/ui/ua-editor/ua-editor.component.html b/nifi-frontend/src/main/frontend/apps/update-attribute/src/app/pages/update-attribute/ui/ua-editor/ua-editor.component.html
index 6de5fde7c5cf..0eca2e181d49 100644
--- a/nifi-frontend/src/main/frontend/apps/update-attribute/src/app/pages/update-attribute/ui/ua-editor/ua-editor.component.html
+++ b/nifi-frontend/src/main/frontend/apps/update-attribute/src/app/pages/update-attribute/ui/ua-editor/ua-editor.component.html
@@ -15,12 +15,7 @@
   ~ limitations under the License.
   -->
 
-<div
-    class="ua-editor mat-elevation-z8 p-4 h-full"
-    [style.width.px]="width"
-    cdkDrag
-    resizable
-    (resized)="resized($event)">
+<div class="ua-editor p-4 h-full" [style.width.px]="width" cdkDrag resizable (resized)="resized($event)">
     <form class="h-full" [formGroup]="uaEditorForm" cdkTrapFocus [cdkTrapFocusAutoCapture]="!readonly">
         <div class="flex flex-col gap-y-2 relative h-full">
             <div class="flex justify-end">
diff --git a/nifi-frontend/src/main/frontend/apps/update-attribute/src/app/pages/update-attribute/ui/ua-editor/ua-editor.component.scss b/nifi-frontend/src/main/frontend/apps/update-attribute/src/app/pages/update-attribute/ui/ua-editor/ua-editor.component.scss
index c05b1cdbd967..3736cf64f8e1 100644
--- a/nifi-frontend/src/main/frontend/apps/update-attribute/src/app/pages/update-attribute/ui/ua-editor/ua-editor.component.scss
+++ b/nifi-frontend/src/main/frontend/apps/update-attribute/src/app/pages/update-attribute/ui/ua-editor/ua-editor.component.scss
@@ -20,6 +20,8 @@
 .ua-editor {
     @include mat.button-density(-1);
 
+    box-shadow: var(--mat-sys-level4);
+
     & {
         min-height: 240px;
         min-width: 245px;
diff --git a/nifi-frontend/src/main/frontend/apps/update-attribute/src/styles.scss b/nifi-frontend/src/main/frontend/apps/update-attribute/src/styles.scss
index 45c0b769e5d3..d1a78dded3c5 100644
--- a/nifi-frontend/src/main/frontend/apps/update-attribute/src/styles.scss
+++ b/nifi-frontend/src/main/frontend/apps/update-attribute/src/styles.scss
@@ -35,12 +35,6 @@
 @use 'font-awesome';
 @use 'libs/shared/src/assets/themes/material';
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
-@include mat.elevation-classes();
-@include mat.app-background();
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -50,22 +44,19 @@
 @include listing-table.styles();
 
 html {
-    @include mat.typography-hierarchy(material.$m3-light-theme);
-    @include mat.all-component-themes(material.$m3-light-theme);
-    @include app.generate-material-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include listing-table.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include codemirror-theme.generate-codemirror-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include rule-listing.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
+    @include app.generate-material-theme();
+    @include listing-table.generate-theme();
+    @include codemirror-theme.generate-codemirror-theme();
+    @include rule-listing.generate-theme();
     @include ua-editor.generate-theme();
-    @include property-hint-tip.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
+    @include property-hint-tip.generate-theme();
 
-    .dark-theme {
-        @include mat.all-component-colors(material.$m3-dark-theme);
-        @include app.generate-material-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include listing-table.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include codemirror-theme.generate-codemirror-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include rule-listing.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
+    .darkMode {
+        @include app.generate-material-theme();
+        @include listing-table.generate-theme();
+        @include codemirror-theme.generate-codemirror-theme();
+        @include rule-listing.generate-theme();
         @include ua-editor.generate-theme();
-        @include property-hint-tip.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
+        @include property-hint-tip.generate-theme();
     }
 }
diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_app.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_app.scss
index 052820d4dfa5..5e4adb45bdd1 100644
--- a/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_app.scss
+++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_app.scss
@@ -127,49 +127,10 @@
 
     /* overriding 3rd party styles */
 
-    .mat-mdc-dialog-content {
-        --mat-dialog-with-actions-content-padding: 20px 24px;
-    }
-
     .mat-mdc-dialog-actions {
         border: none !important;
     }
 
-    .mat-mdc-dialog-title {
-        --mat-dialog-headline-padding: 0 24px 9px;
-    }
-
-    .mat-drawer {
-        --mat-sidenav-container-width: auto;
-        --mat-sidenav-container-shape: 0;
-    }
-
-    .mat-mdc-button {
-        --mdc-text-button-container-shape: 4px;
-        --mdc-text-button-label-text-tracking: normal;
-        --mdc-text-button-label-text-weight: 400;
-    }
-
-    .mat-mdc-unelevated-button {
-        --mdc-filled-button-container-shape: 4px;
-        --mdc-filled-button-label-text-tracking: normal;
-        --mdc-filled-button-label-text-weight: 400;
-    }
-
-    .mat-mdc-outlined-button {
-        --mdc-outlined-button-container-shape: 4px;
-        --mdc-outlined-button-label-text-tracking: normal;
-        --mdc-outlined-button-label-text-weight: 400;
-        --mat-outlined-button-horizontal-padding: 15px;
-        --mdc-outlined-button-container-height: 32px;
-    }
-
-    .mat-mdc-tab-header {
-        --mdc-secondary-navigation-tab-container-height: 36px;
-        --mat-tab-header-label-text-tracking: normal;
-        --mat-tab-header-label-text-weight: 400;
-    }
-
     .mat-tree {
         display: inline !important;
         background-color: unset !important;
@@ -184,10 +145,6 @@
         line-height: 24px;
     }
 
-    .mat-expansion-panel {
-        --mat-expansion-container-shape: 4px;
-    }
-
     .mat-expansion-panel-body {
         overflow-y: auto;
     }
@@ -195,7 +152,6 @@
     .mat-expansion-panel-header.mat-expanded {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
-        --mat-expansion-header-expanded-state-height: 50px;
     }
 
     .mat-content.mat-content-hide-toggle {
@@ -217,11 +173,6 @@
             width: 14px;
             text-align: center;
         }
-
-        .mat-divider {
-            --mat-menu-divider-top-spacing: 0;
-            --mat-menu-divider-bottom-spacing: 0;
-        }
     }
 
     .cdk-drag-disabled {
@@ -286,9 +237,6 @@
     }
 
     .mat-mdc-icon-button {
-        --mdc-icon-button-state-layer-size: 36px;
-        --mdc-icon-button-icon-size: 14px;
-
         &.mat-mdc-button-base.mdc-icon-button {
             padding: 0;
         }
@@ -302,10 +250,6 @@
         background-color: unset !important;
     }
 
-    .mat-mdc-dialog-surface {
-        --mdc-dialog-container-shape: 4px;
-    }
-
     .mdc-dialog__content {
         font-size: 14px !important;
     }
@@ -422,184 +366,94 @@
     }
 }
 
-@mixin generate-material-theme($material-theme, $config) {
-    $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
-    $material-theme-primary-palette-default: mat.get-theme-color(
-        $material-theme,
-        primary,
-        map.get(map.get($config, primary), default)
-    );
-    $material-theme-secondary-palette-default: mat.get-theme-color(
-        $material-theme,
-        secondary,
-        map.get(map.get($config, secondary), default)
-    );
-    $material-theme-tertiary-palette-default: mat.get-theme-color(
-        $material-theme,
-        tertiary,
-        map.get(map.get($config, tertiary), default)
-    );
-    $material-theme-tertiary-palette-variant: mat.get-theme-color(
-        $material-theme,
-        tertiary,
-        map.get(map.get($config, tertiary), variant)
-    );
-    $material-theme-error-palette-default: mat.get-theme-color(
-        $material-theme,
-        error,
-        map.get(map.get($config, error), default)
-    );
-    $material-theme-error-palette-variant: mat.get-theme-color(
-        $material-theme,
-        error,
-        map.get(map.get($config, error), variant)
-    );
-    $material-theme-neutral-palette-default: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), default)
-    );
-    $material-theme-neutral-palette-darker: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), darker)
-    );
-    $material-theme-neutral-palette-lighter: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), lighter)
-    );
-    $alternate-surface: map.get($config, alternate-surface);
-    $primary-contrast: map.get(map.get($config, primary), contrast);
-    $secondary-contrast: map.get(map.get($config, secondary), contrast);
-    $secondary-opacity: map.get(map.get($config, secondary), opacity);
-    $neutral-contrast: map.get(map.get($config, neutral), contrast);
-    $disabled: mat.get-theme-color($material-theme, neutral, map.get(map.get($config, neutral), disabled));
-    $border-color: mat.get-theme-color($material-theme, neutral-variant, map.get($config, neutral-variant));
-    $success-default: map.get(map.get($config, success), default);
-    $success-variant: map.get(map.get($config, success), variant);
-    $caution: map.get(map.get($config, caution), default);
-    $selected-row-color: $material-theme-tertiary-palette-variant;
-
-    // support dark-mode browser default inputs (time, color, ...)
-    input {
-        color-scheme: if($is-material-dark, dark, light);
-    }
-
+@mixin generate-material-theme() {
     /* semantic color classes */
 
     .primary-contrast {
-        color: $primary-contrast;
-        fill: $primary-contrast;
+        color: var(--mat-sys-on-primary);
+        fill: var(--mat-sys-on-primary);
     }
 
     .primary-color {
-        color: $material-theme-primary-palette-default;
-        fill: $material-theme-primary-palette-default;
+        color: var(--mat-sys-primary);
+        fill: var(--mat-sys-primary);
     }
 
     .secondary-contrast {
-        color: $secondary-contrast;
-        fill: $secondary-contrast;
+        color: var(--mat-sys-on-secondary);
+        fill: var(--mat-sys-on-secondary);
     }
 
     .secondary-color {
-        color: $material-theme-secondary-palette-default;
-        fill: $material-theme-secondary-palette-default;
+        color: var(--mat-sys-secondary);
+        fill: var(--mat-sys-secondary);
     }
 
     .tertiary-color {
-        color: $material-theme-tertiary-palette-default;
-        fill: $material-theme-tertiary-palette-default;
+        color: var(--mat-sys-tertiary);
+        fill: var(--mat-sys-tertiary);
     }
 
     .error-color {
-        color: $material-theme-error-palette-default;
-        fill: $material-theme-error-palette-default;
+        color: var(--mat-sys-error);
+        fill: var(--mat-sys-error);
     }
 
     .error-color-variant {
-        color: $material-theme-error-palette-variant;
-        fill: $material-theme-error-palette-variant;
+        color: var(--nf-error-variant);
+        fill: var(--nf-error-variant);
     }
 
     .neutral-color {
-        color: $material-theme-neutral-palette-default;
-        fill: $material-theme-neutral-palette-default;
+        color: var(--nf-neutral);
+        fill: var(--nf-neutral);
     }
 
     .success-color-variant {
-        color: $success-variant;
-        fill: $success-variant;
+        color: var(--nf-success-variant);
+        fill: var(--nf-success-variant);
     }
 
     .success-color-default {
-        color: $success-default;
-        fill: $success-default;
+        color: var(--nf-success-default);
+        fill: var(--nf-success-default);
     }
 
     .caution-color {
-        color: $caution;
-        fill: $caution;
+        color: var(--nf-caution-default);
+        fill: var(--nf-caution-default);
     }
 
     .caution-color-background {
-        background-color: $caution;
+        background-color: var(--nf-caution-default);
     }
 
     .neutral-contrast {
-        color: $neutral-contrast;
-        fill: $neutral-contrast;
+        color: var(--mat-sys-on-surface);
+        fill: var(--mat-sys-on-surface);
     }
 
     .disabled {
-        color: $disabled;
-        fill: $disabled;
-    }
-
-    .border-color {
-        color: $border-color;
-        fill: $border-color;
-    }
-
-    /* color variants for theming angular material widgets */
-
-    .tertiary-checkbox {
-        @include mat.checkbox-color($material-theme, $color-variant: tertiary);
-    }
-
-    .primary-icon-button {
-        @include mat.icon-button-color($material-theme, $color-variant: primary);
-    }
-
-    .error-button {
-        @include mat.button-color($material-theme, $color-variant: error);
-    }
-
-    .tertiary-spinner {
-        @include mat.progress-spinner-color($material-theme, $color-variant: tertiary);
+        color: var(--nf-disabled);
+        fill: var(--nf-disabled);
     }
 
     /* other classes and styles */
 
     .tooltip {
-        background-color: if(
-            $is-material-dark,
-            $material-theme-neutral-palette-darker,
-            $material-theme-neutral-palette-lighter
-        );
+        background-color: var(--mat-sys-background);
         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
-        color: $neutral-contrast;
+        color: var(--mat-sys-on-surface);
     }
 
     .property-editor {
-        background-color: var(--mat-menu-container-color);
         border-radius: 4px;
+        box-shadow: var(--mat-sys-level4);
     }
 
     a {
-        color: $material-theme-primary-palette-default;
-        text-decoration-color: $material-theme-primary-palette-default;
+        color: var(--mat-sys-primary);
+        text-decoration-color: var(--mat-sys-primary);
     }
 
     .has-errors,
@@ -608,18 +462,18 @@
     .running,
     .transmitting,
     .text-shadow {
-        text-shadow: if($is-material-dark, 0 0 4px rgba(0, 0, 0, 1), 0 0 4px rgba(255, 255, 255, 1));
+        text-shadow: var(--nf-text-shadow);
     }
 
     .zero {
-        opacity: $secondary-opacity !important;
+        opacity: var(--nf-zero-opactiy) !important;
     }
 
     /* overriding 3rd party styles */
 
     *:not([class^='mat-']):not([class^='mdc-']):not([class^='resizable-triangle']):not([class^='CodeMirror-cursor']) {
         // Tailwind sets a default that doesn't shift with light and dark themes
-        border-color: $border-color;
+        border-color: var(--mat-sys-outline);
     }
 
     // This will override the above rule in cases where the tailwind style is explicitly set (even on the 'exception' elements)
@@ -628,26 +482,27 @@
     .border,
     .border-l,
     .border-r {
-        border-color: $border-color;
+        border-color: var(--mat-sys-outline);
     }
 
     * {
-        // Because snackbars have different surface colors, we need to make sure the action color has enough contrast.
-        --mat-snack-bar-button-color: $material-theme-tertiary-palette-variant;
-
         // markdown styles
-
         markdown {
             table {
-                background-color: $alternate-surface;
-
                 th {
                     @extend .neutral-contrast;
                 }
 
                 tbody {
                     tr:hover {
-                        background-color: var(--mat-menu-item-hover-state-layer-color) !important;
+                        background-color: var(
+                            --mat-menu-item-hover-state-layer-color,
+                            color-mix(
+                                in srgb,
+                                var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%),
+                                transparent
+                            )
+                        ) !important;
                     }
                 }
             }
@@ -655,10 +510,10 @@
     }
 
     .mat-typography.text-base {
-        font-family: mat.get-theme-typography($material-theme, body-medium, font-family);
-        line-height: mat.get-theme-typography($material-theme, body-medium, line-height);
-        font-size: mat.get-theme-typography($material-theme, body-medium, font-size);
-        font-weight: mat.get-theme-typography($material-theme, body-medium, font-weight);
+        font-family: var(--mat-sys-body-medium-font);
+        line-height: var(--mat-sys-body-medium-line-height);
+        font-size: var(--mat-sys-body-medium-size);
+        font-weight: var(--mat-sys-body-medium-weight);
         letter-spacing: normal;
 
         h2 {
@@ -687,13 +542,13 @@
         }
 
         .mdc-text-field--outlined .mdc-floating-label {
-            font-size: mat.get-theme-typography($material-theme, body-medium, font-size);
+            font-size: var(--mat-sys-body-medium-size);
             letter-spacing: normal;
             line-height: normal;
         }
 
         .mat-mdc-select {
-            font-size: mat.get-theme-typography($material-theme, body-medium, font-size);
+            font-size: var(--mat-sys-body-medium-size);
             letter-spacing: normal;
             line-height: normal;
         }
@@ -706,27 +561,27 @@
         }
 
         .mat-mdc-card-subtitle {
-            font-size: mat.get-theme-typography($material-theme, body-medium, font-size);
+            font-size: var(--mat-sys-body-medium-size);
             letter-spacing: normal;
             line-height: 20px;
             font-weight: 400;
         }
 
         .mat-mdc-option {
-            font-size: mat.get-theme-typography($material-theme, body-medium, font-size);
+            font-size: var(--mat-sys-body-medium-size);
             letter-spacing: normal;
             line-height: normal;
         }
 
         .mat-mdc-form-field {
-            font-size: mat.get-theme-typography($material-theme, body-medium, font-size);
+            font-size: var(--mat-sys-body-medium-size);
             letter-spacing: normal;
             line-height: normal;
         }
 
         .mat-tree-node,
         .mat-nested-tree-node {
-            font-size: mat.get-theme-typography($material-theme, body-medium, font-size);
+            font-size: var(--mat-sys-body-medium-size);
             letter-spacing: normal;
             line-height: normal;
         }
@@ -736,25 +591,25 @@
         }
 
         .mat-expansion-panel-header {
-            font-size: mat.get-theme-typography($material-theme, body-medium, font-size);
+            font-size: var(--mat-sys-body-medium-size);
             letter-spacing: normal;
             line-height: normal;
             font-weight: 700;
         }
 
         .mat-expansion-panel-content {
-            font-size: mat.get-theme-typography($material-theme, body-medium, font-size);
+            font-size: var(--mat-sys-body-medium-size);
             letter-spacing: normal;
             line-height: 20px;
         }
 
         .mat-mdc-menu-content,
         .mat-mdc-menu-content .mat-mdc-menu-item .mat-mdc-menu-item-text {
-            --mat-menu-item-label-text-weight: mat.get-theme-typography($material-theme, body-medium, font-weight);
+            --mat-menu-item-label-text-weight: var(--mat-sys-body-medium-weight);
         }
 
         .mdc-list-item__primary-text {
-            font-size: mat.get-theme-typography($material-theme, body-medium, font-size);
+            font-size: var(--mat-sys-body-medium-size);
             letter-spacing: normal;
             line-height: normal;
         }
@@ -764,97 +619,37 @@
         }
     }
 
-    .mat-expansion-panel {
-        background-color: $alternate-surface;
-    }
-
     .mat-datepicker-content {
-        background-color: $alternate-surface;
         box-shadow:
             0px 2px 4px -1px rgba(0, 0, 0, 0.2),
             0px 4px 5px 0px rgba(0, 0, 0, 0.14),
             0px 1px 10px 0px rgba(0, 0, 0, 0.12);
     }
 
-    .mat-mdc-dialog-surface {
-        background-color: $alternate-surface;
-    }
-
-    .mat-mdc-table {
-        background-color: $alternate-surface;
-    }
-
-    .mat-drawer-backdrop.mat-drawer-shown {
-        background-color: if($is-material-dark, rgba(189, 189, 189, 0.6), rgba(0, 0, 0, 0.6));
-    }
-
-    .mat-mdc-card {
-        background-color: $alternate-surface;
-    }
-
-    .mat-drawer {
-        background-color: $alternate-surface;
-    }
-
-    .cdk-drop-list {
-        color: $material-theme-secondary-palette-default;
-    }
-
     .cdk-drop-list-dragging {
-        background-color: $material-theme-secondary-palette-default !important;
-    }
-
-    .cdk-drag-selected {
-        .cdk-drag {
-            background-color: $material-theme-secondary-palette-default;
-        }
+        background-color: var(--mat-sys-secondary) !important;
     }
 
     .cdk-drop-list {
-        background: if(
-            $is-material-dark,
-            $material-theme-neutral-palette-default,
-            $material-theme-neutral-palette-lighter
-        );
+        background: var(--mat-sys-surface-container-low);
     }
 
     .cdk-drag {
-        background: if(
-            $is-material-dark,
-            $material-theme-neutral-palette-darker,
-            $material-theme-neutral-palette-lighter
-        );
+        color: var(--mat-sys-on-surface);
+        background: var(--mat-sys-surface);
     }
 
     .cdk-drag-disabled {
-        color: $material-theme-neutral-palette-default;
-        background: if(
-            $is-material-dark,
-            $material-theme-neutral-palette-darker,
-            $material-theme-neutral-palette-lighter
-        ) !important;
-    }
-
-    .cdk-drag-selected {
-        .cdk-drag {
-            color: $primary-contrast;
-        }
-
-        span.grip {
-            color: $primary-contrast;
-        }
-
-        .fa {
-            color: $primary-contrast;
-        }
+        color: var(--nf-disabled);
+        background: var(--mat-sys-background) !important;
     }
 
     span.grip {
-        color: $neutral-contrast;
+        color: var(--mat-sys-on-surface);
     }
 
     ngx-skeleton-loader .skeleton-loader {
-        background: $border-color;
+        background: var(--mat-sys-outline);
     }
 
     .markdown-clipboard-toolbar {
diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_codemirror-theme.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_codemirror-theme.scss
index 6ee42127c7b1..d04824868c5c 100644
--- a/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_codemirror-theme.scss
+++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_codemirror-theme.scss
@@ -18,38 +18,7 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-codemirror-theme($material-theme, $config) {
-    $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
-    $material-theme-secondary-palette-default: mat.get-theme-color(
-        $material-theme,
-        secondary,
-        map.get(map.get($config, secondary), default)
-    );
-    $material-theme-tertiary-palette-variant: mat.get-theme-color(
-        $material-theme,
-        tertiary,
-        map.get(map.get($config, tertiary), variant)
-    );
-    $material-theme-neutral-palette-default: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), default)
-    );
-    $material-theme-neutral-palette-darker: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), darker)
-    );
-    $material-theme-neutral-palette-lighter: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), lighter)
-    );
-    $primary-contrast: map.get(map.get($config, primary), contrast);
-    $neutral-contrast: map.get(map.get($config, neutral), contrast);
-    $border-color: mat.get-theme-color($material-theme, neutral-variant, map.get($config, neutral-variant));
-    $selected-color: $material-theme-tertiary-palette-variant;
-
+@mixin generate-codemirror-theme() {
     .ngx-codemirror {
         display: none;
     }
@@ -59,174 +28,170 @@
         height: 100%;
         cursor: default;
         line-height: normal;
-        background-color: if(
-            $is-material-dark,
-            $material-theme-neutral-palette-darker,
-            $material-theme-neutral-palette-lighter
-        );
-        border: 1px solid var(--mdc-outlined-text-field-label-text-color);
+        background-color: var(--mat-sys-background);
+        border: 1px solid;
     }
 
     .cm-s-nifi .CodeMirror-gutters {
-        background: if($is-material-dark, #3b3b3b, #efefef);
+        background: var(--nf-codemirror-gutters);
     }
 
     .cm-s-nifi .CodeMirror-guttermarker,
     .cm-s-nifi .CodeMirror-guttermarker-subtle,
     .cm-s-nifi .CodeMirror-linenumber {
-        color: if($is-material-dark, #bbbbbb, #b4b4b4);
+        color: var(--nf-codemirror-linenumber);
     }
 
     .cm-s-nifi .CodeMirror-cursor {
-        border-left: 1px solid $neutral-contrast;
+        border-left: 1px solid var(--mat-sys-on-surface);
     }
 
     .cm-s-nifi div.CodeMirror-selected {
-        background: $selected-color;
+        background: var(--mat-sys-tertiary-container);
     }
 
     .cm-s-nifi.CodeMirror-focused div.CodeMirror-selected {
-        background: $selected-color;
+        background: var(--mat-sys-tertiary-container);
     }
 
     .cm-s-nifi .CodeMirror-line::selection,
     .cm-s-nifi .CodeMirror-line > span::selection,
     .cm-s-nifi .CodeMirror-line > span > span::selection {
-        background: if($is-material-dark, rgba(128, 203, 196, 0.2), rgba(128, 203, 196, 0.8));
+        background: var(--nf-codemirror-selection);
     }
 
     .cm-s-nifi .CodeMirror-line::-moz-selection,
     .cm-s-nifi .CodeMirror-line > span::-moz-selection,
     .cm-s-nifi .CodeMirror-line > span > span::-moz-selection {
-        background: if($is-material-dark, rgba(128, 203, 196, 0.2), rgba(128, 203, 196, 0.8));
+        background: var(--nf-codemirror-selection);
     }
 
     .cm-s-nifi .cm-header {
-        color: if($is-material-dark, #b8b8ff, #0000ff);
+        color: var(--nf-codemirror-header);
     }
 
     .cm-s-nifi .cm-quote {
-        color: if($is-material-dark, #6bfd6b, #009400);
+        color: var(--nf-codemirror-quote);
     }
 
     .cm-s-nifi .cm-negative {
-        color: if($is-material-dark, #fc9797, #de3535);
+        color: var(--nf-codemirror-negative);
     }
 
     .cm-s-nifi .cm-positive {
-        color: if($is-material-dark, #8cfd8c, #219a21);
+        color: var(--nf-codemirror-positive);
     }
 
     .cm-s-nifi .cm-bracket {
-        color: if($is-material-dark, #93937c, #93937c);
+        color: var(--nf-codemirror-bracket);
     }
 
     .cm-s-nifi .cm-link {
-        color: if($is-material-dark, #8e8ef6, #0000ce);
+        color: var(--nf-codemirror-link);
     }
 
     .cm-s-nifi .cm-invalidchar {
-        color: if($is-material-dark, #ff9c9c, #ff0000);
+        color: var(--nf-codemirror-invalidchar);
     }
 
     .cm-s-nifi .cm-keyword {
-        color: if($is-material-dark, #c792ea, #6800ab);
+        color: var(--nf-codemirror-keyword);
     }
 
     .cm-s-nifi .cm-operator {
-        color: if($is-material-dark, #89ddff, #0083b9);
+        color: var(--nf-codemirror-operator);
     }
 
     .cm-s-nifi .cm-variable-2 {
-        color: if($is-material-dark, #72b6fc, #0054a6);
+        color: var(--nf-codemirror-variable-2);
     }
 
     .cm-s-nifi .cm-variable-3,
     .cm-s-nifi .cm-type {
-        color: if($is-material-dark, #f07178, #ad0007);
+        color: var(--nf-codemirror-variable-3);
     }
 
     .cm-s-nifi .cm-builtin {
-        color: if($is-material-dark, #a280f3, #3400ad);
+        color: var(--nf-codemirror-builtin);
     }
 
     .cm-s-nifi .cm-atom {
-        color: if($is-material-dark, #f78c6c, #bd2b00);
+        color: var(--nf-codemirror-atom);
     }
 
     .cm-s-nifi .cm-number {
-        color: if($is-material-dark, #fd758c, #c20021);
+        color: var(--nf-codemirror-number);
     }
 
     .cm-s-nifi .cm-def {
-        color: if($is-material-dark, #82aaff, #0553f8);
+        color: var(--nf-codemirror-def);
     }
 
     .cm-s-nifi .cm-string {
-        color: if($is-material-dark, #f07178, #ec000c);
+        color: var(--nf-codemirror-string);
     }
 
     .cm-s-nifi .cm-string-2 {
-        color: if($is-material-dark, #f07178, #ec000c);
+        color: var(--nf-codemirror-string2);
     }
 
     .cm-s-nifi .cm-comment {
-        color: if($is-material-dark, #d7d7d7, #545454);
+        color: var(--nf-codemirror-comment);
     }
 
     .cm-s-nifi .cm-variable,
     .cm-s-nifi .cm-punctuation,
     .cm-s-nifi .cm-property,
     .cm-s-nifi .cm-operator {
-        color: if($is-material-dark, #fff, #000);
+        color: var(--nf-codemirror-variable);
     }
 
     .cm-s-nifi .cm-tag {
-        color: if($is-material-dark, #fc768d, #f8052e);
+        color: var(--nf-codemirror-tag);
     }
 
     .cm-s-nifi .cm-meta {
-        color: rgba($material-theme-secondary-palette-default, 0.87);
+        color: var(--mat-sys-secondary);
     }
 
     .cm-s-nifi .cm-attribute {
-        color: if($is-material-dark, #c792ea, #8e01ea);
+        color: var(--nf-codemirror-keyword);
     }
 
     .cm-s-nifi .cm-property {
-        color: if($is-material-dark, #c792ea, #8e01ea);
+        color: var(--nf-codemirror-keyword);
     }
 
     .cm-s-nifi .cm-qualifier {
-        color: rgba($material-theme-secondary-palette-default, 0.87);
+        color: var(--mat-sys-secondary);
     }
 
     .cm-s-nifi .cm-variable-3,
     .cm-s-nifi .cm-s-default,
     .cm-s-nifi .cm-type {
-        color: rgba($material-theme-secondary-palette-default, 0.87);
+        color: var(--mat-sys-secondary);
     }
 
     .cm-s-nifi .cm-error {
-        color: if($is-material-dark, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
-        background-color: if($is-material-dark, #ff002a, #ff8094);
+        color: var(--nf-codemirror-error-color);
+        background-color: var(--nf-codemirror-error-background-color);
     }
 
     .cm-s-nifi .CodeMirror-matchingbracket {
         text-decoration: underline;
-        color: $primary-contrast !important;
-        background-color: $material-theme-neutral-palette-default;
+        color: var(--mat-sys-on-primary) !important;
+        background-color: var(--nf-neutral);
     }
 
     .cm-s-nifi .CodeMirror-nonmatchingbracket {
-        color: if($is-material-dark, #fc7a7a, #a62020);
+        color: var(--nf-codemirror-nonmatchingbracket);
     }
 
     .cm-s-nifi .CodeMirror-matchingtag {
-        background: if($is-material-dark, rgba(255, 150, 0, 0.97), rgba(255, 150, 0, 0.3));
+        background: var(--nf-codemirror-matchingtag);
     }
 
     .cm-s-nifi .CodeMirror-activeline-background {
-        background: if($is-material-dark, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5));
+        background: var(--nf-codemirror-activeline-background);
     }
 }
diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_listing-table.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_listing-table.scss
index f9e161c1bec6..8268f6037ebe 100644
--- a/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_listing-table.scss
+++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_listing-table.scss
@@ -69,26 +69,14 @@
     }
 }
 
-@mixin generate-theme($material-theme, $config) {
-    $material-theme-secondary-palette-default: mat.get-theme-color(
-        $material-theme,
-        secondary,
-        map.get(map.get($config, secondary), default)
-    );
-    $material-theme-tertiary-palette-variant: mat.get-theme-color(
-        $material-theme,
-        tertiary,
-        map.get(map.get($config, tertiary), variant)
-    );
-
-    // Get hues from palette
-    $selected-row-color: $material-theme-tertiary-palette-variant;
-
+@mixin generate-theme() {
     .listing-table {
         table {
+            background-color: inherit;
+
             th {
                 @extend .secondary-contrast;
-                background-color: $material-theme-secondary-palette-default !important;
+                background-color: var(--mat-sys-secondary) !important;
                 user-select: none;
 
                 .mat-sort-header-arrow {
@@ -103,11 +91,18 @@
             }
 
             tr:hover {
-                background-color: var(--mat-menu-item-hover-state-layer-color) !important;
+                background-color: var(
+                    --mat-menu-item-hover-state-layer-color,
+                    color-mix(
+                        in srgb,
+                        var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%),
+                        transparent
+                    )
+                ) !important;
             }
 
             .selected {
-                background-color: $selected-row-color !important;
+                background-color: var(--mat-sys-tertiary-container) !important;
             }
         }
     }
diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_prism-theme.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_prism-theme.scss
index b31efb2b5beb..d69fa7d7b1eb 100644
--- a/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_prism-theme.scss
+++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_prism-theme.scss
@@ -18,30 +18,7 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-prism-theme($material-theme, $config) {
-    $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
-    $material-theme-secondary-palette-default: mat.get-theme-color(
-        $material-theme,
-        secondary,
-        map.get(map.get($config, secondary), default)
-    );
-    $material-theme-tertiary-palette-variant: mat.get-theme-color(
-        $material-theme,
-        tertiary,
-        map.get(map.get($config, tertiary), variant)
-    );
-    $material-theme-neutral-palette-darker: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), darker)
-    );
-    $material-theme-neutral-palette-lighter: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), lighter)
-    );
-    $selected-color: $material-theme-tertiary-palette-variant;
-
+@mixin generate-prism-theme() {
     pre[class*='language-'] {
         padding-top: 0.75rem;
         padding-bottom: 0.75rem;
@@ -49,7 +26,7 @@
 
     code[class*='language-'],
     pre[class*='language-'] {
-        color: if($is-material-dark, #f07178, #ec000c);
+        color: var(--nf-prism-language-color);
         text-align: left;
         white-space: pre;
         word-spacing: normal;
@@ -72,7 +49,7 @@
     code[class*='language-']::-moz-selection,
     code[class*='language-'] ::-moz-selection {
         text-shadow: none;
-        background: if($is-material-dark, rgba($selected-color, 0.4), rgba($selected-color, 0.4));
+        background: var(--mat-sys-tertiary-container);
     }
 
     pre[class*='language-']::selection,
@@ -80,7 +57,7 @@
     code[class*='language-']::selection,
     code[class*='language-'] ::selection {
         text-shadow: none;
-        background: if($is-material-dark, rgba($selected-color, 0.4), rgba($selected-color, 0.4));
+        background: var(--mat-sys-tertiary-container);
     }
 
     @media print {
@@ -102,12 +79,8 @@
         @extend .neutral-contrast;
         cursor: default;
         line-height: normal;
-        background-color: if(
-            $is-material-dark,
-            $material-theme-neutral-palette-darker,
-            $material-theme-neutral-palette-lighter
-        );
-        border: 1px solid var(--mdc-outlined-text-field-label-text-color);
+        background-color: var(--mat-sys-background);
+        border: 1px solid;
     }
 
     /* Inline code */
@@ -121,11 +94,11 @@
     .token.prolog,
     .token.doctype,
     .token.cdata {
-        color: if($is-material-dark, #d7d7d7, #545454);
+        color: var(--nf-prism-token-comment);
     }
 
     .token.punctuation {
-        color: if($is-material-dark, #c792ea, #6800ab);
+        color: var(--nf-prism-token-punctuation);
     }
 
     .token.namespace {
@@ -138,11 +111,11 @@
     .token.number,
     .token.symbol,
     .token.deleted {
-        color: if($is-material-dark, #c792ea, #6800ab);
+        color: var(--nf-prism-token-punctuation);
     }
 
     .token.constant {
-        color: if($is-material-dark, #f07178, #ec000c);
+        color: var(--nf-prism-token-constant);
     }
 
     .token.selector,
@@ -151,24 +124,24 @@
     .token.char,
     .token.builtin,
     .token.inserted {
-        color: if($is-material-dark, #c792ea, #6800ab);
+        color: var(--nf-prism-token-punctuation);
     }
 
     .token.keyword {
-        color: if($is-material-dark, #c792ea, #6800ab);
+        color: var(--nf-prism-token-punctuation);
     }
 
     .token.atrule,
     .token.attr-value {
-        color: if($is-material-dark, #f07178, #ec000c);
+        color: var(--nf-prism-token-constant);
     }
 
     .token.function {
-        color: if($is-material-dark, #fff, #000);
+        color: var(--nf-prism-token-function);
     }
 
     .token.class-name {
-        color: if($is-material-dark, #f07178, #ec000c);
+        color: var(--nf-prism-token-constant);
     }
 
     .token.important,
diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/material.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/material.scss
index bb25c0eeac80..42075b712a3e 100644
--- a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/material.scss
+++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/material.scss
@@ -23,399 +23,822 @@
 @use '@fontsource/inter/400-italic.css' as inter-italic;
 
 @layer base {
-    //fonts are loaded by the browser
     @font-face {
         font-family: 'Inter';
     }
 }
 
-$primary-light: (
-    0: #000000,
-    10: #002020,
-    20: #003738,
-    25: #004344,
-    30: #004849,
-    35: #004849,
-    40: #004849,
-    50: #478081,
-    60: #629a9b,
-    70: #7cb5b6,
-    80: #97d1d1,
-    90: #b3eded,
-    95: #c1fbfc,
-    98: #e2ffff,
-    99: #f1fffe,
-    100: #ffffff
-);
+:root {
+    /* Material Design color palettes and typography for light mode. These are used by Angular Material SASS api's to define the theme for all Angular Material components. These variable should NOT be referenced outside of the theme file. */
+    --md-ref-palette-error-0: #000000; /* Error 0 */
+    --md-ref-palette-error-10: #000000; /* Error 10 */
+    --md-ref-palette-error-20: #000000; /* Error 20 */
+    --md-ref-palette-error-25: #a8372a; /* Error 25 */
+    --md-ref-palette-error-30: #ba554a; /* Error 30 */
+    --md-ref-palette-error-35: #ba554a; /* Error 35 */
+    --md-ref-palette-error-40: #ba554a; /* Error 40 */
+    --md-ref-palette-error-50: #eb7071; /* Error 50 */
+    --md-ref-palette-error-60: #eb7071; /* Error 60 */
+    --md-ref-palette-error-70: #eb7071; /* Error 70 */
+    --md-ref-palette-error-80: #eb7071; /* Error 80 */
+    --md-ref-palette-error-90: #f49999; /* Error 90 */
+    --md-ref-palette-error-95: #f49999; /* Error 95 */
+    --md-ref-palette-error-98: #ffccd2; /* Error 98 */
+    --md-ref-palette-error-99: #ffccd2; /* Error 99 */
+    --md-ref-palette-error-100: #ffffff; /* Error 100 */
+    --md-ref-palette-tertiary-0: #000000; /* Tertiary 0 */
+    --md-ref-palette-tertiary-10: #3e2723; /* Tertiary 10 */
+    --md-ref-palette-tertiary-20: #4e342e; /* Tertiary 20 */
+    --md-ref-palette-tertiary-25: #4e342e; /* Tertiary 25 */
+    --md-ref-palette-tertiary-30: #5d4037; /* Tertiary 30 */
+    --md-ref-palette-tertiary-35: #6d4c41; /* Tertiary 35 */
+    --md-ref-palette-tertiary-40: #795548; /* Tertiary 40 */
+    --md-ref-palette-tertiary-50: #8d6e63; /* Tertiary 50 */
+    --md-ref-palette-tertiary-60: #a1887f; /* Tertiary 60 */
+    --md-ref-palette-tertiary-70: #bcaaa4; /* Tertiary 70 */
+    --md-ref-palette-tertiary-80: #d7ccc8; /* Tertiary 80 */
+    --md-ref-palette-tertiary-90: #d7ccc8; /* Tertiary 90 */
+    --md-ref-palette-tertiary-95: #efebe9; /* Tertiary 95 */
+    --md-ref-palette-tertiary-98: #efebe9; /* Tertiary 98 */
+    --md-ref-palette-tertiary-99: #efebe9; /* Tertiary 99 */
+    --md-ref-palette-tertiary-100: #ffffff; /* Tertiary 100 */
+    --md-ref-palette-secondary-0: #000000; /* Secondary 0 */
+    --md-ref-palette-secondary-10: #314149; /* Secondary 10 */
+    --md-ref-palette-secondary-20: #3f5863; /* Secondary 20 */
+    --md-ref-palette-secondary-25: #4e6c79; /* Secondary 25 */
+    --md-ref-palette-secondary-30: #597b8a; /* Secondary 30 */
+    --md-ref-palette-secondary-35: #728e9b; /* Secondary 35 */
+    --md-ref-palette-secondary-40: #8aa2ad; /* Secondary 40 */
+    --md-ref-palette-secondary-50: #abbdc5; /* Secondary 50 */
+    --md-ref-palette-secondary-60: #abbdc5; /* Secondary 60 */
+    --md-ref-palette-secondary-70: #abbdc5; /* Secondary 70 */
+    --md-ref-palette-secondary-80: #cbd8dd; /* Secondary 80 */
+    --md-ref-palette-secondary-90: #cbd8dd; /* Secondary 90 */
+    --md-ref-palette-secondary-95: #cbd8dd; /* Secondary 95 */
+    --md-ref-palette-secondary-98: #cbd8dd; /* Secondary 98 */
+    --md-ref-palette-secondary-99: #cbd8dd; /* Secondary 99 */
+    --md-ref-palette-secondary-100: #ffffff; /* Secondary 100 */
+    --md-ref-palette-primary-0: #000000; /* Primary 0 */
+    --md-ref-palette-primary-10: #002020; /* Primary 10 */
+    --md-ref-palette-primary-20: #003738; /* Primary 20 */
+    --md-ref-palette-primary-25: #004344; /* Primary 25 */
+    --md-ref-palette-primary-30: #004849; /* Primary 30 */
+    --md-ref-palette-primary-35: #004849; /* Primary 35 */
+    --md-ref-palette-primary-40: #004849; /* Primary 40 */
+    --md-ref-palette-primary-50: #478081; /* Primary 50 */
+    --md-ref-palette-primary-60: #629a9b; /* Primary 60 */
+    --md-ref-palette-primary-70: #7cb5b6; /* Primary 70 */
+    --md-ref-palette-primary-80: #97d1d1; /* Primary 80 */
+    --md-ref-palette-primary-90: #b3eded; /* Primary 90 */
+    --md-ref-palette-primary-95: #c1fbfc; /* Primary 95 */
+    --md-ref-palette-primary-98: #e2ffff; /* Primary 98 */
+    --md-ref-palette-primary-99: #f1fffe; /* Primary 99 */
+    --md-ref-palette-primary-100: #ffffff; /* Primary 100 */
+    --md-ref-palette-neutral-variant-0: #000000; /* Neutral Variant 0 */
+    --md-ref-palette-neutral-variant-10: #303030; /* Neutral Variant 10 */
+    --md-ref-palette-neutral-variant-20: #444444; /* Neutral Variant 20 */
+    --md-ref-palette-neutral-variant-25: #666666; /* Neutral Variant 25 */
+    --md-ref-palette-neutral-variant-30: #666666; /* Neutral Variant 30 */
+    --md-ref-palette-neutral-variant-35: #666666; /* Neutral Variant 35 */
+    --md-ref-palette-neutral-variant-40: #acacac; /* Neutral Variant 40 */
+    --md-ref-palette-neutral-variant-50: #d8d8d8; /* Neutral Variant 50 */
+    --md-ref-palette-neutral-variant-60: #d8d8d8; /* Neutral Variant 60 */
+    --md-ref-palette-neutral-variant-70: #d8d8d8; /* Neutral Variant 70 */
+    --md-ref-palette-neutral-variant-80: #d8d8d8; /* Neutral Variant 80 */
+    --md-ref-palette-neutral-variant-90: #e3e3e3; /* Neutral Variant 90 */
+    --md-ref-palette-neutral-variant-95: #f4f4f4; /* Neutral Variant 95 */
+    --md-ref-palette-neutral-variant-98: #fafafa; /* Neutral Variant 98 */
+    --md-ref-palette-neutral-variant-99: #fafafa; /* Neutral Variant 99 */
+    --md-ref-palette-neutral-variant-100: #ffffff; /* Neutral Variant 100 */
+    --md-ref-palette-neutral-0: #0000001f; /* Neutral 0 */
+    --md-ref-palette-neutral-4: #121212; /* Neutral 4 */
+    --md-ref-palette-neutral-6: #121212; /* Neutral 6 */
+    --md-ref-palette-neutral-10: #303030; /* Neutral 10 */
+    --md-ref-palette-neutral-12: #303030; /* Neutral 12 */
+    --md-ref-palette-neutral-17: #303030; /* Neutral 17 */
+    --md-ref-palette-neutral-20: #444444; /* Neutral 20 */
+    --md-ref-palette-neutral-22: #444444; /* Neutral 22 */
+    --md-ref-palette-neutral-24: #444444; /* Neutral 24 */
+    --md-ref-palette-neutral-25: #666666; /* Neutral 25 */
+    --md-ref-palette-neutral-30: #666666; /* Neutral 30 */
+    --md-ref-palette-neutral-35: #666666; /* Neutral 35 */
+    --md-ref-palette-neutral-40: #acacac; /* Neutral 40 */
+    --md-ref-palette-neutral-50: #acacac; /* Neutral 50 */
+    --md-ref-palette-neutral-60: #acacac; /* Neutral 60 */
+    --md-ref-palette-neutral-70: #d8d8d8; /* Neutral 70 */
+    --md-ref-palette-neutral-80: #d8d8d8; /* Neutral 80 */
+    --md-ref-palette-neutral-87: #d8d8d8; /* Neutral 87 */
+    --md-ref-palette-neutral-90: #e3e3e3; /* Neutral 90 */
+    --md-ref-palette-neutral-92: #f4f4f4; /* Neutral 92 */
+    --md-ref-palette-neutral-94: #f4f4f4; /* Neutral 94 */
+    --md-ref-palette-neutral-95: #fafafa; /* Neutral 95 */
+    --md-ref-palette-neutral-96: #fafafa; /* Neutral 96 */
+    --md-ref-palette-neutral-98: #fafafa; /* Neutral 98 */
+    --md-ref-palette-neutral-99: #fafafa; /* Neutral 99 */
+    --md-ref-palette-neutral-100: #ffffff; /* Neutral 100 */
+    --md-ref-typeface-plain: Inter; /* Plain typeface */
+    --md-ref-typeface-brand: Inter; /* Brand typeface */
+    --md-ref-typeface-weight-bold: 700; /* Bold weight */
+    --md-ref-typeface-weight-medium: 500; /* Medium weight */
+    --md-ref-typeface-weight-regular: 400; /* Regular weight */
 
-$secondary-light: (
-    0: #000000,
-    10: #314149,
-    20: #3f5863,
-    25: #4e6c79,
-    30: #597b8a,
-    35: #728e9b,
-    40: #8aa2ad,
-    50: #abbdc5,
-    60: #abbdc5,
-    70: #abbdc5,
-    80: #cbd8dd,
-    90: #cbd8dd,
-    95: #cbd8dd,
-    98: #cbd8dd,
-    99: #cbd8dd,
-    100: #ffffff
-);
+    /* Nifi Light mode. Use these variables when applying colors to elements */
+    --nf-success-default: #31975b; /* The success color  */
+    --nf-success-variant: #1390ca; /* The success variant color  */
+    --nf-success-contrast: #ffffff; /* The success contrast color */
+    --nf-caution-default: #cf9338; /* The caution color  */
+    --nf-caution-contrast: #ffffff; /* The caution contrast color */
+    --nf-neutral: #666666; /* The neutral color  */
+    --nf-disabled: #d8d8d8; /* The color to use for disabled */
+    --nf-error-variant: #eb7071; /* The stopped run status color  */
+    --nf-new-canvas-item-grip: #ffffff; /* The new canvas item grip color */
+    --nf-new-canvas-item-hover: #ffffff; /* The new canvas item hover color */
+    --nf-resizable-triangle: rgba(18, 18, 18, 0.2); /* The color of the resize handle */
+    --nf-banner: #12121214; /* The banner row color */
+    --nf-odd: #12121206; /* The odd background color */
+    --nf-even: #fafafa; /* The even background color */
+    --nf-text-shadow: 0 0 4px rgba(255, 255, 255, 1); /* The text shadow color */
+    --nf-zero-opactiy: 0.6; /* The zero opacity color */
+    --nf-connection-drop-shadow: white; /* The connection drop shadow color */
+    --nf-canvas-background: #e5ebed; /* The canvas background color */
+    --nf-canvas-border-stroke-width: 1; /* The canvas border stroke width */
+    --nf-codemirror-gutters: #efefef; /* The codemirror gutters color */
+    --nf-codemirror-linenumber: #b4b4b4; /* The codemirror line number color */
+    --nf-codemirror-selection: rgba(128, 203, 196, 0.8); /* The codemirror selection color */
+    --nf-codemirror-header: #0000ff; /* The codemirror header color */
+    --nf-codemirror-quote: #009400; /* The codemirror quote color */
+    --nf-codemirror-negative: #de3535; /* The codemirror negative color */
+    --nf-codemirror-positive: #219a21; /* The codemirror positive color */
+    --nf-codemirror-bracket: #93937c; /* The codemirror bracket color */
+    --nf-codemirror-keyword: #6800ab; /* The codemirror keyword color */
+    --nf-codemirror-error-background-color: #ff8094; /* The codemirror error background color */
+    --nf-codemirror-error-color: rgba(0, 0, 0, 0); /* The codemirror error text color */
+    --nf-codemirror-link: #0000ce; /* The codemirror link color */
+    --nf-codemirror-invalidchar: #ff0000; /* The codemirror invalid character color */
+    --nf-codemirror-operator: #0083b9; /* The codemirror operator color */
+    --nf-codemirror-variable: #000; /* The codemirror variable color */
+    --nf-codemirror-variable-2: #0054a6; /* The codemirror variable 2 color */
+    --nf-codemirror-variable-3: #ad0007; /* The codemirror variable 3 color */
+    --nf-codemirror-builtin: #3400ad; /* The codemirror builtin color */
+    --nf-codemirror-atom: #bd2b00; /* The codemirror atom color */
+    --nf-codemirror-number: #c20021; /* The codemirror number color */
+    --nf-codemirror-def: #0553f8; /* The codemirror definition color */
+    --nf-codemirror-string: #ec000c; /* The codemirror string color */
+    --nf-codemirror-string2: #ec000c; /* The codemirror string 2 color */
+    --nf-codemirror-comment: #545454; /* The codemirror comment color */
+    --nf-codemirror-tag: #f8052e; /* The codemirror tag color */
+    --nf-codemirror-nonmatchingbracket: #a62020; /* The codemirror non matching bracket color */
+    --nf-codemirror-matchingtag: rgba(255, 150, 0, 0.3); /* The codemirror matching tag color */
+    --nf-codemirror-activeline-background: rgba(0, 0, 0, 0.5); /* The codemirror active line background color */
+    --nf-prism-language-color: #ec000c; /* The prism language color */
+    --nf-prism-token-comment: #545454; /* The prism token comment color */
+    --nf-prism-token-punctuation: #6800ab; /* The prism token punctuation color */
+    --nf-prism-token-constant: #ec000c; /* The prism token constant color */
+    --nf-prism-token-function: #000000; /* The prism token function color */
 
-$primary-dark: (
-    0: #000000,
-    10: #000000,
-    20: #000000,
-    25: #4e6c79,
-    30: #597b8a,
-    35: #728e9b,
-    40: #8aa2ad,
-    50: #abbdc5,
-    60: #abbdc5,
-    70: #abbdc5,
-    80: #cbd8dd,
-    90: #cbd8dd,
-    95: #cbd8dd,
-    98: #cbd8dd,
-    99: #cbd8dd,
-    100: #ffffff
-);
+    @include mat.theme-overrides(
+        (
+            primary: var(--md-ref-palette-primary-40),
+            on-primary: var(--md-ref-palette-primary-100),
+            primary-container: var(--md-ref-palette-neutral-90),
+            on-primary-container: var(--md-ref-palette-primary-40),
+            inverse-primary: var(--md-ref-palette-primary-40),
+            primary-fixed: var(--md-ref-palette-primary-40),
+            primary-fixed-dim: var(--md-ref-palette-primary-40),
+            on-primary-fixed: var(--md-ref-palette-primary-100),
+            on-primary-fixed-variant: var(--md-ref-palette-primary-100),
+            secondary: var(--md-ref-palette-secondary-50),
+            on-secondary: var(--md-ref-palette-secondary-0),
+            secondary-container: var(--md-ref-palette-secondary-80),
+            on-secondary-container: var(--md-ref-palette-neutral-10),
+            secondary-fixed: var(--md-ref-palette-secondary-50),
+            secondary-fixed-dim: var(--md-ref-palette-secondary-50),
+            on-secondary-fixed: var(--md-ref-palette-secondary-0),
+            on-secondary-fixed-variant: var(--md-ref-palette-secondary-0),
+            tertiary: var(--md-ref-palette-tertiary-40),
+            on-tertiary: var(--md-ref-palette-tertiary-0),
+            tertiary-container: var(--md-ref-palette-tertiary-80),
+            on-tertiary-container: var(--md-ref-palette-neutral-10),
+            tertiary-fixed: var(--md-ref-palette-tertiary-40),
+            tertiary-fixed-dim: var(--md-ref-palette-tertiary-40),
+            on-tertiary-fixed: var(--md-ref-palette-tertiary-100),
+            on-tertiary-fixed-variant: var(--md-ref-palette-tertiary-100),
+            background: var(--md-ref-palette-neutral-99),
+            on-background: var(--md-ref-palette-neutral-10),
+            surface: var(--md-ref-palette-neutral-100),
+            surface-dim: var(--md-ref-palette-neutral-90),
+            surface-bright: var(--md-ref-palette-neutral-100),
+            surface-container-lowest: var(--md-ref-palette-neutral-100),
+            surface-container-low: var(--md-ref-palette-neutral-95),
+            surface-container: var(--md-ref-palette-neutral-94),
+            surface-container-high: var(--md-ref-palette-neutral-92),
+            surface-container-highest: var(--md-ref-palette-neutral-90),
+            on-surface: var(--md-ref-palette-neutral-10),
+            shadow: var(--md-ref-palette-neutral-variant-0),
+            scrim: var(--md-ref-palette-neutral-variant-0),
+            surface-tint: var(--md-ref-palette-neutral-30),
+            inverse-surface: var(--md-ref-palette-neutral-10),
+            inverse-on-surface: var(--md-ref-palette-neutral-100),
+            outline: var(--md-ref-palette-neutral-70),
+            outline-variant: var(--md-ref-palette-neutral-variant-70),
+            neutral: var(--md-ref-palette-neutral-40),
+            neutral10: var(--md-ref-palette-neutral-20),
+            error: var(--md-ref-palette-error-40),
+            error-container: var(--md-ref-palette-error-40),
+            on-error: var(--md-ref-palette-error-100),
+            on-error-container: var(--md-ref-palette-error-0),
+            surface-variant: var(--md-ref-palette-neutral-variant-90),
+            on-surface-variant: var(--md-ref-palette-neutral-variant-30),
+            neutral-variant: var(--md-ref-palette-neutral-variant-40),
+            neutral-variant20: var(--md-ref-palette-neutral-variant-25),
+            inverse-secondary: var(--md-ref-palette-secondary-50),
+            inverse-tertiary: var(--md-ref-palette-tertiary-80)
+        )
+    );
 
-$tertiary: (
-    0: #000000,
-    10: #3e2723,
-    20: #4e342e,
-    25: #4e342e,
-    30: #5d4037,
-    35: #6d4c41,
-    40: #795548,
-    50: #8d6e63,
-    60: #a1887f,
-    70: #bcaaa4,
-    80: #d7ccc8,
-    90: #d7ccc8,
-    95: #efebe9,
-    98: #efebe9,
-    99: #efebe9,
-    100: #ffffff
-);
+    @include mat.sidenav-overrides(
+        (
+            container-width: auto,
+            container-shape: 0
+        )
+    );
 
-$error: (
-    0: #000000,
-    10: #000000,
-    20: #000000,
-    25: #a8372a,
-    30: #ba554a,
-    35: #ba554a,
-    40: #ba554a,
-    50: #eb7071,
-    60: #eb7071,
-    70: #eb7071,
-    80: #eb7071,
-    90: #f49999,
-    95: #f49999,
-    98: #ffccd2,
-    99: #ffccd2,
-    100: #ffffff
-);
+    @include mat.expansion-overrides(
+        (
+            container-shape: 6px,
+            header-expanded-state-height: 50px
+        )
+    );
 
-$neutral: (
-    0: #000000,
-    4: #121212,
-    6: #303030,
-    10: #303030,
-    12: #303030,
-    17: #303030,
-    20: #444444,
-    22: #444444,
-    24: #444444,
-    25: #666666,
-    30: #666666,
-    35: #666666,
-    40: #82878d,
-    50: #82878d,
-    60: #82878d,
-    70: #d8d8d8,
-    80: #d8d8d8,
-    87: #d8d8d8,
-    90: #e3e3e3,
-    92: #e3e3e3,
-    94: #f4f4f4,
-    95: #f4f4f4,
-    96: #f4f4f4,
-    98: #fafafa,
-    99: #fafafa,
-    100: #ffffff
-);
+    @include mat.menu-overrides(
+        (
+            divider-top-spacing: 0,
+            divider-bottom-spacing: 0
+        )
+    );
 
-$neutral-variant: (
-    0: #000000,
-    10: #666666,
-    20: #666666,
-    25: #666666,
-    30: #666666,
-    35: #666666,
-    40: #acacac,
-    50: #d8d8d8,
-    60: #d8d8d8,
-    70: #d8d8d8,
-    80: #d8d8d8,
-    90: #e3e3e3,
-    95: #f4f4f4,
-    98: #fafafa,
-    99: #fafafa,
-    100: #ffffff
-);
+    @include mat.dialog-overrides(
+        (
+            content-padding: 20px 24px,
+            headline-padding: 0 24px 9px,
+            container-shape: 6px
+        )
+    );
 
-$m3-material-primary-light-palette: (
-    primary: $primary-light,
-    secondary: $secondary-light,
-    tertiary: $tertiary,
-    neutral: (
-        0: #000000,
-        4: #121212,
-        6: #121212,
-        10: #303030,
-        12: #303030,
-        17: #303030,
-        20: #444444,
-        22: #444444,
-        24: #444444,
-        25: #666666,
-        30: #666666,
-        35: #666666,
-        40: #acacac,
-        50: #acacac,
-        60: #acacac,
-        70: #d8d8d8,
-        80: #d8d8d8,
-        87: #d8d8d8,
-        90: #e3e3e3,
-        92: #f4f4f4,
-        94: #f4f4f4,
-        95: #fafafa,
-        96: #fafafa,
-        98: #fafafa,
-        99: #fafafa,
-        100: #ffffff
-    ),
-    neutral-variant: (
-        0: #000000,
-        10: #303030,
-        20: #444444,
-        25: #666666,
-        30: #666666,
-        35: #666666,
-        40: #acacac,
-        50: #d8d8d8,
-        60: #d8d8d8,
-        70: #d8d8d8,
-        80: #d8d8d8,
-        90: #e3e3e3,
-        95: #f4f4f4,
-        98: #fafafa,
-        99: #fafafa,
-        100: #ffffff
-    ),
-    error: $error
-);
+    @include mat.icon-button-overrides(
+        (
+            state-layer-size: 36px,
+            icon-size: 14px
+        )
+    );
 
-$m3-material-primary-dark-palette: (
-    primary: $primary-dark,
-    secondary: $primary-dark,
-    tertiary: $tertiary,
-    neutral: (
-        0: #000000,
-        4: #303030,
-        6: #303030,
-        10: #303030,
-        12: #444444,
-        17: #444444,
-        20: #444444,
-        22: #444444,
-        24: #444444,
-        25: #666666,
-        30: #666666,
-        35: #666666,
-        40: #acacac,
-        50: #acacac,
-        60: #acacac,
-        70: #cccccc,
-        80: #d8d8d8,
-        87: #d8d8d8,
-        90: #e3e3e3,
-        92: #e3e3e3,
-        94: #e3e3e3,
-        95: #f4f4f4,
-        96: #f4f4f4,
-        98: #fafafa,
-        99: #fafafa,
-        100: #ffffff
-    ),
-    neutral-variant: (
-        0: #000000,
-        10: #303030,
-        20: #444444,
-        25: #666666,
-        30: #666666,
-        35: #666666,
-        40: #666666,
-        50: #666666,
-        60: #666666,
-        70: #acacac,
-        80: #d8d8d8,
-        90: #e3e3e3,
-        95: #f4f4f4,
-        98: #fafafa,
-        99: #fafafa,
-        100: #ffffff
-    ),
-    error: $error
-);
+    @include mat.button-overrides(
+        (
+            filled-container-shape: 4px,
+            filled-label-text-tracking: normal,
+            filled-label-text-weight: 400,
+            outlined-container-shape: 4px,
+            outlined-label-text-tracking: normal,
+            outlined-label-text-weight: 400,
+            outlined-horizontal-padding: 15px,
+            outlined-container-height: 32px,
+            text-container-shape: 4px,
+            text-label-text-tracking: normal,
+            text-label-text-weight: 400
+        )
+    );
 
-// Define a dark theme
-$_dark-theme-rest: (
-    secondary: map.get($m3-material-primary-dark-palette, secondary),
-    neutral: map.get($m3-material-primary-dark-palette, neutral),
-    neutral-variant: map.get($m3-material-primary-dark-palette, neutral-variant),
-    error: map.get($m3-material-primary-dark-palette, error)
-);
-$_dark-theme-primary: map.merge(map.get($m3-material-primary-dark-palette, primary), $_dark-theme-rest);
-$_dark-theme-tertiary: map.merge(map.get($m3-material-primary-dark-palette, tertiary), $_dark-theme-rest);
-
-$m3-dark-theme: mat.define-theme(
-    (
-        color: (
-            theme-type: dark,
-            primary: $_dark-theme-primary,
-            tertiary: $_dark-theme-tertiary
-        ),
-        typography: (
-            plain-family: Inter,
-            brand-family: Inter,
-            bold-weight: 700,
-            regular-weight: 400
-        ),
-        density: (
-            scale: -3
+    @include mat.tabs-overrides(
+        (
+            label-text-tracking: normal,
+            label-text-weight: 400,
+            container-height: 36px
         )
-    )
-);
+    );
 
-// Define a light theme
-$_light-theme-rest: (
-    secondary: map.get($m3-material-primary-light-palette, secondary),
-    neutral: map.get($m3-material-primary-light-palette, neutral),
-    neutral-variant: map.get($m3-material-primary-light-palette, neutral-variant),
-    error: map.get($m3-material-primary-light-palette, error)
-);
-$_light-theme-primary: map.merge(map.get($m3-material-primary-light-palette, primary), $_light-theme-rest);
-$_light-theme-tertiary: map.merge(map.get($m3-material-primary-light-palette, tertiary), $_light-theme-rest);
-
-$m3-light-theme: mat.define-theme(
-    (
-        color: (
-            theme-type: light,
-            primary: $_light-theme-primary,
-            tertiary: $_light-theme-tertiary
-        ),
-        typography: (
-            plain-family: Inter,
-            brand-family: Inter,
-            bold-weight: 700,
-            regular-weight: 400
-        ),
-        density: (
-            scale: -3
+    @include mat.snack-bar-overrides(
+        (
+            button-color: var(--md-ref-palette-secondary-80)
         )
-    )
-);
+    );
+
+    .tertiary-checkbox {
+        @include mat.checkbox-overrides(
+            (
+                selected-icon-color: var(--md-ref-palette-tertiary-40)
+            )
+        );
+    }
 
-$m3-light-theme-config: (
+    .primary-icon-button {
+        @include mat.icon-button-overrides(
+            (
+                icon-color: var(--md-ref-palette-primary-40)
+            )
+        );
+    }
+
+    .error-button {
+        @include mat.button-overrides(
+            (
+                filled-container-color: var(--md-ref-palette-error-40),
+                filled-label-text-color: var(--md-ref-palette-error-100)
+            )
+        );
+    }
+
+    .tertiary-spinner {
+        @include mat.progress-spinner-overrides(
+            (
+                active-indicator-color: var(--md-ref-palette-tertiary-40)
+            )
+        );
+    }
+}
+
+// Note: Color palettes are generated from primary: #6750a4
+$_palettes: (
     primary: (
-        default: 40,
-        contrast: #ffffff
+        0: var(--md-ref-palette-primary-0),
+        10: var(--md-ref-palette-primary-10),
+        20: var(--md-ref-palette-primary-20),
+        25: var(--md-ref-palette-primary-25),
+        30: var(--md-ref-palette-primary-30),
+        35: var(--md-ref-palette-primary-35),
+        40: var(--md-ref-palette-primary-40),
+        50: var(--md-ref-palette-primary-50),
+        60: var(--md-ref-palette-primary-60),
+        70: var(--md-ref-palette-primary-70),
+        80: var(--md-ref-palette-primary-80),
+        90: var(--md-ref-palette-primary-90),
+        95: var(--md-ref-palette-primary-95),
+        98: var(--md-ref-palette-primary-98),
+        99: var(--md-ref-palette-primary-99),
+        100: var(--md-ref-palette-primary-100)
     ),
     secondary: (
-        default: 50,
-        contrast: #000000,
-        opacity: 0.6,
-        new-canvas-item: (
-            grip: #ffffff,
-            hover: #ffffff
-        )
+        0: var(--md-ref-palette-secondary-0),
+        10: var(--md-ref-palette-secondary-10),
+        20: var(--md-ref-palette-secondary-20),
+        25: var(--md-ref-palette-secondary-25),
+        30: var(--md-ref-palette-secondary-30),
+        35: var(--md-ref-palette-secondary-35),
+        40: var(--md-ref-palette-secondary-40),
+        50: var(--md-ref-palette-secondary-50),
+        60: var(--md-ref-palette-secondary-60),
+        70: var(--md-ref-palette-secondary-70),
+        80: var(--md-ref-palette-secondary-80),
+        90: var(--md-ref-palette-secondary-90),
+        95: var(--md-ref-palette-secondary-95),
+        98: var(--md-ref-palette-secondary-98),
+        99: var(--md-ref-palette-secondary-99),
+        100: var(--md-ref-palette-secondary-100)
     ),
     tertiary: (
-        default: 40,
-        variant: 90
-    ),
-    success: (
-        default: #31975b,
-        variant: #1390ca
-    ),
-    alternate-surface: #ffffff,
-    caution: (
-        default: #cf9338,
-        contrast: #ffffff
+        0: var(--md-ref-palette-tertiary-0),
+        10: var(--md-ref-palette-tertiary-10),
+        20: var(--md-ref-palette-tertiary-20),
+        25: var(--md-ref-palette-tertiary-25),
+        30: var(--md-ref-palette-tertiary-30),
+        35: var(--md-ref-palette-tertiary-35),
+        40: var(--md-ref-palette-tertiary-40),
+        50: var(--md-ref-palette-tertiary-50),
+        60: var(--md-ref-palette-tertiary-60),
+        70: var(--md-ref-palette-tertiary-70),
+        80: var(--md-ref-palette-tertiary-80),
+        90: var(--md-ref-palette-tertiary-90),
+        95: var(--md-ref-palette-tertiary-95),
+        98: var(--md-ref-palette-tertiary-98),
+        99: var(--md-ref-palette-tertiary-99),
+        100: var(--md-ref-palette-tertiary-100)
     ),
     neutral: (
-        darker: 4,
-        default: 35,
-        lighter: 99,
-        disabled: 80,
-        contrast: #000000
+        0: var(--md-ref-palette-neutral-0),
+        4: var(--md-ref-palette-neutral-4),
+        6: var(--md-ref-palette-neutral-6),
+        10: var(--md-ref-palette-neutral-10),
+        12: var(--md-ref-palette-neutral-12),
+        17: var(--md-ref-palette-neutral-17),
+        20: var(--md-ref-palette-neutral-20),
+        22: var(--md-ref-palette-neutral-22),
+        24: var(--md-ref-palette-neutral-24),
+        25: var(--md-ref-palette-neutral-25),
+        30: var(--md-ref-palette-neutral-30),
+        35: var(--md-ref-palette-neutral-35),
+        40: var(--md-ref-palette-neutral-40),
+        50: var(--md-ref-palette-neutral-50),
+        60: var(--md-ref-palette-neutral-60),
+        70: var(--md-ref-palette-neutral-70),
+        80: var(--md-ref-palette-neutral-80),
+        87: var(--md-ref-palette-neutral-87),
+        90: var(--md-ref-palette-neutral-90),
+        92: var(--md-ref-palette-neutral-92),
+        94: var(--md-ref-palette-neutral-94),
+        95: var(--md-ref-palette-neutral-95),
+        96: var(--md-ref-palette-neutral-96),
+        98: var(--md-ref-palette-neutral-98),
+        99: var(--md-ref-palette-neutral-99),
+        100: var(--md-ref-palette-neutral-100)
+    ),
+    neutral-variant: (
+        0: var(--md-ref-palette-neutral-variant-0),
+        10: var(--md-ref-palette-neutral-variant-10),
+        20: var(--md-ref-palette-neutral-variant-20),
+        25: var(--md-ref-palette-neutral-variant-25),
+        30: var(--md-ref-palette-neutral-variant-30),
+        35: var(--md-ref-palette-neutral-variant-35),
+        40: var(--md-ref-palette-neutral-variant-40),
+        50: var(--md-ref-palette-neutral-variant-50),
+        60: var(--md-ref-palette-neutral-variant-60),
+        70: var(--md-ref-palette-neutral-variant-70),
+        80: var(--md-ref-palette-neutral-variant-80),
+        90: var(--md-ref-palette-neutral-variant-90),
+        95: var(--md-ref-palette-neutral-variant-95),
+        98: var(--md-ref-palette-neutral-variant-98),
+        99: var(--md-ref-palette-neutral-variant-99),
+        100: var(--md-ref-palette-neutral-variant-100)
     ),
-    neutral-variant: 50,
     error: (
-        variant: 50,
-        default: 40,
-        contrast: #ffffff
+        0: var(--md-ref-palette-error-0),
+        10: var(--md-ref-palette-error-10),
+        20: var(--md-ref-palette-error-20),
+        25: var(--md-ref-palette-error-25),
+        30: var(--md-ref-palette-error-30),
+        35: var(--md-ref-palette-error-35),
+        40: var(--md-ref-palette-error-40),
+        50: var(--md-ref-palette-error-50),
+        60: var(--md-ref-palette-error-60),
+        70: var(--md-ref-palette-error-70),
+        80: var(--md-ref-palette-error-80),
+        90: var(--md-ref-palette-error-90),
+        95: var(--md-ref-palette-error-95),
+        98: var(--md-ref-palette-error-98),
+        99: var(--md-ref-palette-error-99),
+        100: var(--md-ref-palette-error-100)
     )
 );
 
-$m3-dark-theme-config: (
-    primary: (
-        default: 40,
-        contrast: #000000
-    ),
-    secondary: (
-        default: 40,
-        contrast: #000000,
-        opacity: 0.5,
-        new-canvas-item: (
-            grip: #000000,
-            hover: #ffffff
-        )
-    ),
-    tertiary: (
-        variant: 10,
-        default: 70
-    ),
-    success: (
-        default: #31975b,
-        variant: #1390ca
-    ),
-    alternate-surface: #444444,
-    caution: (
-        default: #cf9338,
-        contrast: #ffffff
-    ),
-    neutral: (
-        darker: 10,
-        default: 40,
-        lighter: 96,
-        disabled: 70,
-        contrast: #ffffff
-    ),
-    neutral-variant: 35,
-    error: (
-        variant: 90,
-        default: 50,
-        contrast: #ffffff
-    )
+$_rest: (
+    secondary: map.get($_palettes, secondary),
+    neutral: map.get($_palettes, neutral),
+    neutral-variant: map.get($_palettes, neutral-variant),
+    error: map.get($_palettes, error)
 );
+
+$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
+$tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);
+
+@include mat.app-background();
+
+/* Light Theme */
+html {
+    color-scheme: light;
+    @include mat.theme(
+        (
+            color: (
+                primary: $primary-palette,
+                tertiary: $tertiary-palette
+            ),
+            typography: (
+                plain-family: var(--md-ref-typeface-plain),
+                brand-family: var(--md-ref-typeface-brand),
+                bold-weight: var(--md-ref-typeface-weight-bold),
+                regular-weight: var(--md-ref-typeface-weight-regular)
+            ),
+            density: (
+                scale: -3
+            )
+        )
+    );
+}
+
+/* Dark Theme */
+.darkMode {
+    /* Material Design color palettes and typography for dark mode. These are used by Angular Material SASS api's to define the theme for all Angular Material components. These variable should NOT be referenced outside of the theme file. */
+    --md-ref-palette-error-0: #000000; /* Error 0 */
+    --md-ref-palette-error-10: #000000; /* Error 10 */
+    --md-ref-palette-error-20: #000000; /* Error 20 */
+    --md-ref-palette-error-25: #a8372a; /* Error 25 */
+    --md-ref-palette-error-30: #ba554a; /* Error 30 */
+    --md-ref-palette-error-35: #ba554a; /* Error 35 */
+    --md-ref-palette-error-40: #ba554a; /* Error 40 */
+    --md-ref-palette-error-50: #eb7071; /* Error 50 */
+    --md-ref-palette-error-60: #eb7071; /* Error 60 */
+    --md-ref-palette-error-70: #eb7071; /* Error 70 */
+    --md-ref-palette-error-80: #eb7071; /* Error 80 */
+    --md-ref-palette-error-90: #f49999; /* Error 90 */
+    --md-ref-palette-error-95: #f49999; /* Error 95 */
+    --md-ref-palette-error-98: #ffccd2; /* Error 98 */
+    --md-ref-palette-error-99: #ffccd2; /* Error 99 */
+    --md-ref-palette-error-100: #ffffff; /* Error 100 */
+    --md-ref-palette-tertiary-0: #000000; /* Tertiary 0 */
+    --md-ref-palette-tertiary-10: #3e2723; /* Tertiary 10 */
+    --md-ref-palette-tertiary-20: #4e342e; /* Tertiary 20 */
+    --md-ref-palette-tertiary-25: #4e342e; /* Tertiary 25 */
+    --md-ref-palette-tertiary-30: #5d4037; /* Tertiary 30 */
+    --md-ref-palette-tertiary-35: #6d4c41; /* Tertiary 35 */
+    --md-ref-palette-tertiary-40: #795548; /* Tertiary 40 */
+    --md-ref-palette-tertiary-50: #8d6e63; /* Tertiary 50 */
+    --md-ref-palette-tertiary-60: #a1887f; /* Tertiary 60 */
+    --md-ref-palette-tertiary-70: #bcaaa4; /* Tertiary 70 */
+    --md-ref-palette-tertiary-80: #d7ccc8; /* Tertiary 80 */
+    --md-ref-palette-tertiary-90: #d7ccc8; /* Tertiary 90 */
+    --md-ref-palette-tertiary-95: #efebe9; /* Tertiary 95 */
+    --md-ref-palette-tertiary-98: #efebe9; /* Tertiary 98 */
+    --md-ref-palette-tertiary-99: #efebe9; /* Tertiary 99 */
+    --md-ref-palette-tertiary-100: #ffffff; /* Tertiary 100 */
+    --md-ref-palette-secondary-0: #000000; /* Secondary 0 */
+    --md-ref-palette-secondary-10: #000000; /* Secondary 10 */
+    --md-ref-palette-secondary-20: #000000; /* Secondary 20 */
+    --md-ref-palette-secondary-25: #4e6c79; /* Secondary 25 */
+    --md-ref-palette-secondary-30: #597b8a; /* Secondary 30 */
+    --md-ref-palette-secondary-35: #728e9b; /* Secondary 35 */
+    --md-ref-palette-secondary-40: #8aa2ad; /* Secondary 40 */
+    --md-ref-palette-secondary-50: #abbdc5; /* Secondary 50 */
+    --md-ref-palette-secondary-60: #abbdc5; /* Secondary 60 */
+    --md-ref-palette-secondary-70: #abbdc5; /* Secondary 70 */
+    --md-ref-palette-secondary-80: #cbd8dd; /* Secondary 80 */
+    --md-ref-palette-secondary-90: #cbd8dd; /* Secondary 90 */
+    --md-ref-palette-secondary-95: #cbd8dd; /* Secondary 95 */
+    --md-ref-palette-secondary-98: #cbd8dd; /* Secondary 98 */
+    --md-ref-palette-secondary-99: #cbd8dd; /* Secondary 99 */
+    --md-ref-palette-secondary-100: #ffffff; /* Secondary 100 */
+    --md-ref-palette-primary-0: #000000; /* Primary 0 */
+    --md-ref-palette-primary-10: #000000; /* Primary 10 */
+    --md-ref-palette-primary-20: #000000; /* Primary 20 */
+    --md-ref-palette-primary-25: #4e6c79; /* Primary 25 */
+    --md-ref-palette-primary-30: #597b8a; /* Primary 30 */
+    --md-ref-palette-primary-35: #728e9b; /* Primary 35 */
+    --md-ref-palette-primary-40: #8aa2ad; /* Primary 40 */
+    --md-ref-palette-primary-50: #abbdc5; /* Primary 50 */
+    --md-ref-palette-primary-60: #abbdc5; /* Primary 60 */
+    --md-ref-palette-primary-70: #abbdc5; /* Primary 70 */
+    --md-ref-palette-primary-80: #cbd8dd; /* Primary 80 */
+    --md-ref-palette-primary-90: #cbd8dd; /* Primary 90 */
+    --md-ref-palette-primary-95: #cbd8dd; /* Primary 95 */
+    --md-ref-palette-primary-98: #cbd8dd; /* Primary 98 */
+    --md-ref-palette-primary-99: #cbd8dd; /* Primary 99 */
+    --md-ref-palette-primary-100: #ffffff; /* Primary 100 */
+    --md-ref-palette-neutral-variant-0: #000000; /* Neutral Variant 0 */
+    --md-ref-palette-neutral-variant-10: #303030; /* Neutral Variant 10 */
+    --md-ref-palette-neutral-variant-20: #444444; /* Neutral Variant 20 */
+    --md-ref-palette-neutral-variant-25: #666666; /* Neutral Variant 25 */
+    --md-ref-palette-neutral-variant-30: #666666; /* Neutral Variant 30 */
+    --md-ref-palette-neutral-variant-35: #666666; /* Neutral Variant 35 */
+    --md-ref-palette-neutral-variant-40: #666666; /* Neutral Variant 40 */
+    --md-ref-palette-neutral-variant-50: #666666; /* Neutral Variant 50 */
+    --md-ref-palette-neutral-variant-60: #666666; /* Neutral Variant 60 */
+    --md-ref-palette-neutral-variant-70: #acacac; /* Neutral Variant 70 */
+    --md-ref-palette-neutral-variant-80: #d8d8d8; /* Neutral Variant 80 */
+    --md-ref-palette-neutral-variant-90: #e3e3e3; /* Neutral Variant 90 */
+    --md-ref-palette-neutral-variant-95: #f4f4f4; /* Neutral Variant 95 */
+    --md-ref-palette-neutral-variant-98: #fafafa; /* Neutral Variant 98 */
+    --md-ref-palette-neutral-variant-99: #fafafa; /* Neutral Variant 99 */
+    --md-ref-palette-neutral-variant-100: #ffffff; /* Neutral Variant 100 */
+    --md-ref-palette-neutral-0: #0000001f; /* Neutral 0 */
+    --md-ref-palette-neutral-4: #303030; /* Neutral 4 */
+    --md-ref-palette-neutral-6: #303030; /* Neutral 6 */
+    --md-ref-palette-neutral-10: #303030; /* Neutral 10 */
+    --md-ref-palette-neutral-12: #444444; /* Neutral 12 */
+    --md-ref-palette-neutral-17: #444444; /* Neutral 17 */
+    --md-ref-palette-neutral-20: #444444; /* Neutral 20 */
+    --md-ref-palette-neutral-22: #444444; /* Neutral 22 */
+    --md-ref-palette-neutral-24: #444444; /* Neutral 24 */
+    --md-ref-palette-neutral-25: #666666; /* Neutral 25 */
+    --md-ref-palette-neutral-30: #666666; /* Neutral 30 */
+    --md-ref-palette-neutral-35: #666666; /* Neutral 35 */
+    --md-ref-palette-neutral-40: #acacac; /* Neutral 40 */
+    --md-ref-palette-neutral-50: #acacac; /* Neutral 50 */
+    --md-ref-palette-neutral-60: #acacac; /* Neutral 60 */
+    --md-ref-palette-neutral-70: #cccccc; /* Neutral 70 */
+    --md-ref-palette-neutral-80: #d8d8d8; /* Neutral 80 */
+    --md-ref-palette-neutral-87: #d8d8d8; /* Neutral 87 */
+    --md-ref-palette-neutral-90: #e3e3e3; /* Neutral 90 */
+    --md-ref-palette-neutral-92: #e3e3e3; /* Neutral 92 */
+    --md-ref-palette-neutral-94: #e3e3e3; /* Neutral 94 */
+    --md-ref-palette-neutral-95: #f4f4f4; /* Neutral 95 */
+    --md-ref-palette-neutral-96: #f4f4f4; /* Neutral 96 */
+    --md-ref-palette-neutral-98: #fafafa; /* Neutral 98 */
+    --md-ref-palette-neutral-99: #fafafa; /* Neutral 99 */
+    --md-ref-palette-neutral-100: #ffffff; /* Neutral 100 */
+    --md-ref-typeface-plain: Inter; /* Plain typeface */
+    --md-ref-typeface-brand: Inter; /* Brand typeface */
+    --md-ref-typeface-weight-bold: 700; /* Bold weight */
+    --md-ref-typeface-weight-medium: 500; /* Medium weight */
+    --md-ref-typeface-weight-regular: 400; /* Regular weight */
+
+    /* Nifi Dark mode. Use these variables when applying colors to elements */
+    --nf-success-default: #31975b; /* The success color  */
+    --nf-success-variant: #1390ca; /* The success variant color  */
+    --nf-success-contrast: #ffffff; /* The success contrast color */
+    --nf-caution-default: #cf9338; /* The caution color  */
+    --nf-caution-contrast: #ffffff; /* The caution contrast color */
+    --nf-neutral: #acacac; /* The neutral color  */
+    --nf-disabled: #cccccc; /* The color to use for disabled */
+    --nf-error-variant: #f49999; /* The stopped run status color  */
+    --nf-new-canvas-item-grip: #000000; /* The new canvas item grip color  */
+    --nf-new-canvas-item-hover: #ffffff; /* The new canvas item hover color  */
+    --nf-resizable-triangle: rgba(18, 18, 18, 0.2); /* The color of the resize handle */
+    --nf-banner: #f4f4f414; /* The banner row color */
+    --nf-odd: #f4f4f406; /* The odd background color */
+    --nf-even: #303030; /* The even background color */
+    --nf-text-shadow: 0 0 4px rgba(0, 0, 0, 1); /* The text shadow color */
+    --nf-zero-opactiy: 0.5; /* The zero opacity color */
+    --nf-connection-drop-shadow: black; /* The connection drop shadow color */
+    --nf-canvas-background: #0d1411; /* The canvas background color */
+    --nf-canvas-border-stroke-width: 2; /* The canvas border stroke width */
+    --nf-codemirror-gutters: #3b3b3b; /* The codemirror gutters color */
+    --nf-codemirror-linenumber: #bbbbbb; /* The codemirror line number color */
+    --nf-codemirror-selection: rgba(128, 203, 196, 0.2); /* The codemirror selection color */
+    --nf-codemirror-header: #b8b8ff; /* The codemirror header color */
+    --nf-codemirror-quote: #6bfd6b; /* The codemirror quote color */
+    --nf-codemirror-negative: #fc9797; /* The codemirror negative color */
+    --nf-codemirror-positive: #8cfd8c; /* The codemirror positive color */
+    --nf-codemirror-bracket: #93937c; /* The codemirror bracket color */
+    --nf-codemirror-keyword: #c792ea; /* The codemirror keyword color */
+    --nf-codemirror-error-background-color: #ff002a; /* The codemirror error background color */
+    --nf-codemirror-error-color: rgba(255, 255, 255, 1); /* The codemirror error text color */
+    --nf-codemirror-link: #8e8ef6; /* The codemirror link color */
+    --nf-codemirror-invalidchar: #ff9c9c; /* The codemirror invalid character color */
+    --nf-codemirror-operator: #89ddff; /* The codemirror operator color */
+    --nf-codemirror-variable: #fff; /* The codemirror variable color */
+    --nf-codemirror-variable-2: #72b6fc; /* The codemirror variable 2 color */
+    --nf-codemirror-variable-3: #f07178; /* The codemirror variable 3 color */
+    --nf-codemirror-builtin: #a280f3; /* The codemirror builtin color */
+    --nf-codemirror-atom: #f78c6c; /* The codemirror atom color */
+    --nf-codemirror-number: #fd758c; /* The codemirror number color */
+    --nf-codemirror-def: #82aaff; /* The codemirror definition color */
+    --nf-codemirror-string: #f07178; /* The codemirror string color */
+    --nf-codemirror-string2: #f07178; /* The codemirror string 2 color */
+    --nf-codemirror-comment: #d7d7d7; /* The codemirror comment color */
+    --nf-codemirror-tag: #fc768d; /* The codemirror tag color */
+    --nf-codemirror-nonmatchingbracket: #a62020; /* The codemirror non matching bracket color */
+    --nf-codemirror-matchingtag: rgba(255, 150, 0, 0.97); /* The codemirror matching tag color */
+    --nf-codemirror-activeline-background: rgba(255, 255, 255, 0.5); /* The codemirror active line background color */
+    --nf-prism-language-color: #f07178; /* The prism language color */
+    --nf-prism-token-comment: #545454; /* The prism token comment color */
+    --nf-prism-token-punctuation: #c792ea; /* The prism token punctuation color */
+    --nf-prism-token-constant: #f07178; /* The prism token constant color */
+    --nf-prism-token-function: #ffffff; /* The prism token function color */
+
+    color-scheme: dark;
+
+    @include mat.theme-overrides(
+        (
+            primary: var(--md-ref-palette-primary-80),
+            on-primary: var(--md-ref-palette-primary-0),
+            primary-container: var(--md-ref-palette-neutral-30),
+            on-primary-container: var(--md-ref-palette-primary-80),
+            inverse-primary: var(--md-ref-palette-primary-80),
+            primary-fixed: var(--md-ref-palette-primary-80),
+            primary-fixed-dim: var(--md-ref-palette-primary-80),
+            on-primary-fixed: var(--md-ref-palette-primary-0),
+            on-primary-fixed-variant: var(--md-ref-palette-primary-0),
+            secondary: var(--md-ref-palette-secondary-40),
+            on-secondary: var(--md-ref-palette-secondary-0),
+            secondary-container: var(--md-ref-palette-secondary-40),
+            on-secondary-container: var(--md-ref-palette-secondary-0),
+            secondary-fixed: var(--md-ref-palette-secondary-40),
+            secondary-fixed-dim: var(--md-ref-palette-secondary-40),
+            on-secondary-fixed: var(--md-ref-palette-secondary-0),
+            on-secondary-fixed-variant: var(--md-ref-palette-secondary-0),
+            tertiary: var(--md-ref-palette-tertiary-70),
+            on-tertiary: var(--md-ref-palette-tertiary-0),
+            tertiary-container: var(--md-ref-palette-tertiary-10),
+            on-tertiary-container: var(--md-ref-palette-neutral-90),
+            tertiary-fixed: var(--md-ref-palette-tertiary-70),
+            tertiary-fixed-dim: var(--md-ref-palette-tertiary-70),
+            on-tertiary-fixed: var(--md-ref-palette-tertiary-0),
+            on-tertiary-fixed-variant: var(--md-ref-palette-tertiary-0),
+            background: var(--md-ref-palette-neutral-4),
+            on-background: var(--md-ref-palette-neutral-90),
+            surface: var(--md-ref-palette-neutral-12),
+            surface-dim: var(--md-ref-palette-neutral-4),
+            surface-bright: var(--md-ref-palette-neutral-12),
+            surface-container-lowest: var(--md-ref-palette-neutral-variant-0),
+            surface-container-low: var(--md-ref-palette-neutral-4),
+            surface-container: var(--md-ref-palette-neutral-12),
+            surface-container-high: var(--md-ref-palette-neutral-12),
+            surface-container-highest: var(--md-ref-palette-neutral-30),
+            on-surface: var(--md-ref-palette-neutral-90),
+            shadow: var(--md-ref-palette-neutral-variant-0),
+            scrim: var(--md-ref-palette-neutral-variant-0),
+            surface-tint: var(--md-ref-palette-neutral-30),
+            inverse-surface: var(--md-ref-palette-neutral-90),
+            inverse-on-surface: var(--md-ref-palette-neutral-variant-0),
+            outline: var(--md-ref-palette-neutral-30),
+            outline-variant: var(--md-ref-palette-neutral-30),
+            neutral: var(--md-ref-palette-neutral-60),
+            neutral10: var(--md-ref-palette-neutral-90),
+            error: var(--md-ref-palette-error-50),
+            error-container: var(--md-ref-palette-error-50),
+            on-error: var(--md-ref-palette-error-100),
+            on-error-container: var(--md-ref-palette-error-90),
+            surface-variant: var(--md-ref-palette-neutral-variant-40),
+            on-surface-variant: var(--md-ref-palette-neutral-variant-90),
+            neutral-variant: var(--md-ref-palette-neutral-variant-70),
+            neutral-variant20: var(--md-ref-palette-neutral-variant-80),
+            inverse-secondary: var(--md-ref-palette-secondary-40),
+            inverse-tertiary: var(--md-ref-palette-tertiary-70)
+        )
+    );
+
+    @include mat.sidenav-overrides(
+        (
+            container-width: auto,
+            container-shape: 0
+        )
+    );
+
+    @include mat.expansion-overrides(
+        (
+            container-shape: 6px,
+            header-expanded-state-height: 50px
+        )
+    );
+
+    @include mat.menu-overrides(
+        (
+            divider-top-spacing: 0,
+            divider-bottom-spacing: 0
+        )
+    );
+
+    @include mat.dialog-overrides(
+        (
+            content-padding: 20px 24px,
+            headline-padding: 0 24px 9px,
+            container-shape: 6px
+        )
+    );
+
+    @include mat.icon-button-overrides(
+        (
+            state-layer-size: 36px,
+            icon-size: 14px
+        )
+    );
+
+    @include mat.button-overrides(
+        (
+            filled-container-shape: 4px,
+            filled-label-text-tracking: normal,
+            filled-label-text-weight: 400,
+            outlined-container-shape: 4px,
+            outlined-label-text-tracking: normal,
+            outlined-label-text-weight: 400,
+            outlined-horizontal-padding: 15px,
+            outlined-container-height: 32px,
+            text-container-shape: 4px,
+            text-label-text-tracking: normal,
+            text-label-text-weight: 400
+        )
+    );
+
+    @include mat.tabs-overrides(
+        (
+            label-text-tracking: normal,
+            label-text-weight: 400,
+            container-height: 36px
+        )
+    );
+
+    @include mat.snack-bar-overrides(
+        (
+            button-color: #004849
+        )
+    );
+
+    .tertiary-checkbox {
+        @include mat.checkbox-overrides(
+            (
+                selected-icon-color: var(--md-ref-palette-tertiary-70)
+            )
+        );
+    }
+
+    .primary-icon-button {
+        @include mat.icon-button-overrides(
+            (
+                icon-color: var(--md-ref-palette-primary-80)
+            )
+        );
+    }
+
+    .error-button {
+        @include mat.button-overrides(
+            (
+                filled-container-color: var(--md-ref-palette-error-50),
+                filled-label-text-color: var(--md-ref-palette-error-100)
+            )
+        );
+    }
+
+    .tertiary-spinner {
+        @include mat.progress-spinner-overrides(
+            (
+                active-indicator-color: var(--md-ref-palette-tertiary-70)
+            )
+        );
+    }
+}
diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/purple.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/purple.scss
index f0c6f239e5bc..1af0216d801c 100644
--- a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/purple.scss
+++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/purple.scss
@@ -25,286 +25,700 @@
     }
 }
 
-$primary: (
-    0: #000000,
-    10: #311b92,
-    20: #4527a0,
-    25: #512da8,
-    30: #5e35b1,
-    35: #673ab7,
-    40: #7e57c2,
-    50: #9575cd,
-    60: #b39ddb,
-    70: #d1c4e9,
-    80: #ede7f6,
-    90: #ede7f6,
-    95: #ede7f6,
-    98: #ede7f6,
-    99: #ede7f6,
-    100: #ffffff
-);
+:root {
+    --md-ref-palette-error-0: #000000; /* Error 0 */
+    --md-ref-palette-error-10: #000000; /* Error 10 */
+    --md-ref-palette-error-20: #000000; /* Error 20 */
+    --md-ref-palette-error-25: #a8372a; /* Error 25 */
+    --md-ref-palette-error-30: #ba554a; /* Error 30 */
+    --md-ref-palette-error-35: #ba554a; /* Error 35 */
+    --md-ref-palette-error-40: #ba554a; /* Error 40 */
+    --md-ref-palette-error-50: #eb7071; /* Error 50 */
+    --md-ref-palette-error-60: #eb7071; /* Error 60 */
+    --md-ref-palette-error-70: #eb7071; /* Error 70 */
+    --md-ref-palette-error-80: #eb7071; /* Error 80 */
+    --md-ref-palette-error-90: #f49999; /* Error 90 */
+    --md-ref-palette-error-95: #f49999; /* Error 95 */
+    --md-ref-palette-error-98: #ffccd2; /* Error 98 */
+    --md-ref-palette-error-99: #ffccd2; /* Error 99 */
+    --md-ref-palette-error-100: #ffffff; /* Error 100 */
+    --md-ref-palette-tertiary-0: #000000; /* Tertiary 0 */
+    --md-ref-palette-tertiary-10: #004d40; /* Tertiary 10 */
+    --md-ref-palette-tertiary-20: #00695c; /* Tertiary 20 */
+    --md-ref-palette-tertiary-25: #00796b; /* Tertiary 25 */
+    --md-ref-palette-tertiary-30: #00897b; /* Tertiary 30 */
+    --md-ref-palette-tertiary-35: #009688; /* Tertiary 35 */
+    --md-ref-palette-tertiary-40: #26a69a; /* Tertiary 40 */
+    --md-ref-palette-tertiary-50: #4db6ac; /* Tertiary 50 */
+    --md-ref-palette-tertiary-60: #80cbc4; /* Tertiary 60 */
+    --md-ref-palette-tertiary-70: #b2dfdb; /* Tertiary 70 */
+    --md-ref-palette-tertiary-80: #e0f2f1; /* Tertiary 80 */
+    --md-ref-palette-tertiary-90: #e0f2f1; /* Tertiary 90 */
+    --md-ref-palette-tertiary-95: #e0f2f1; /* Tertiary 95 */
+    --md-ref-palette-tertiary-98: #e0f2f1; /* Tertiary 98 */
+    --md-ref-palette-tertiary-99: #e0f2f1; /* Tertiary 99 */
+    --md-ref-palette-tertiary-100: #ffffff; /* Tertiary 100 */
+    --md-ref-palette-secondary-0: #000000; /* Secondary 0 */
+    --md-ref-palette-secondary-10: #311b92; /* Secondary 10 */
+    --md-ref-palette-secondary-20: #4527a0; /* Secondary 20 */
+    --md-ref-palette-secondary-25: #512da8; /* Secondary 25 */
+    --md-ref-palette-secondary-30: #5e35b1; /* Secondary 30 */
+    --md-ref-palette-secondary-35: #673ab7; /* Secondary 35 */
+    --md-ref-palette-secondary-40: #7e57c2; /* Secondary 40 */
+    --md-ref-palette-secondary-50: #9575cd; /* Secondary 50 */
+    --md-ref-palette-secondary-60: #b39ddb; /* Secondary 60 */
+    --md-ref-palette-secondary-70: #d1c4e9; /* Secondary 70 */
+    --md-ref-palette-secondary-80: #ede7f6; /* Secondary 80 */
+    --md-ref-palette-secondary-90: #ede7f6; /* Secondary 90 */
+    --md-ref-palette-secondary-95: #ede7f6; /* Secondary 95 */
+    --md-ref-palette-secondary-98: #ede7f6; /* Secondary 98 */
+    --md-ref-palette-secondary-99: #ede7f6; /* Secondary 99 */
+    --md-ref-palette-secondary-100: #ffffff; /* Secondary 100 */
+    --md-ref-palette-primary-0: #000000; /* Primary 0 */
+    --md-ref-palette-primary-10: #311b92; /* Primary 10 */
+    --md-ref-palette-primary-20: #4527a0; /* Primary 20 */
+    --md-ref-palette-primary-25: #512da8; /* Primary 25 */
+    --md-ref-palette-primary-30: #5e35b1; /* Primary 30 */
+    --md-ref-palette-primary-35: #673ab7; /* Primary 35 */
+    --md-ref-palette-primary-40: #7e57c2; /* Primary 40 */
+    --md-ref-palette-primary-50: #9575cd; /* Primary 50 */
+    --md-ref-palette-primary-60: #b39ddb; /* Primary 60 */
+    --md-ref-palette-primary-70: #d1c4e9; /* Primary 70 */
+    --md-ref-palette-primary-80: #ede7f6; /* Primary 80 */
+    --md-ref-palette-primary-90: #ede7f6; /* Primary 90 */
+    --md-ref-palette-primary-95: #ede7f6; /* Primary 95 */
+    --md-ref-palette-primary-98: #ede7f6; /* Primary 98 */
+    --md-ref-palette-primary-99: #ede7f6; /* Primary 99 */
+    --md-ref-palette-primary-100: #ffffff; /* Primary 100 */
+    --md-ref-palette-neutral-variant-0: #000000; /* Neutral Variant 0 */
+    --md-ref-palette-neutral-variant-10: #303030; /* Neutral Variant 10 */
+    --md-ref-palette-neutral-variant-20: #444444; /* Neutral Variant 20 */
+    --md-ref-palette-neutral-variant-25: #666666; /* Neutral Variant 25 */
+    --md-ref-palette-neutral-variant-30: #666666; /* Neutral Variant 30 */
+    --md-ref-palette-neutral-variant-35: #666666; /* Neutral Variant 35 */
+    --md-ref-palette-neutral-variant-40: #acacac; /* Neutral Variant 40 */
+    --md-ref-palette-neutral-variant-50: #d8d8d8; /* Neutral Variant 50 */
+    --md-ref-palette-neutral-variant-60: #d8d8d8; /* Neutral Variant 60 */
+    --md-ref-palette-neutral-variant-70: #d8d8d8; /* Neutral Variant 70 */
+    --md-ref-palette-neutral-variant-80: #d8d8d8; /* Neutral Variant 80 */
+    --md-ref-palette-neutral-variant-90: #e3e3e3; /* Neutral Variant 90 */
+    --md-ref-palette-neutral-variant-95: #f4f4f4; /* Neutral Variant 95 */
+    --md-ref-palette-neutral-variant-98: #fafafa; /* Neutral Variant 98 */
+    --md-ref-palette-neutral-variant-99: #fafafa; /* Neutral Variant 99 */
+    --md-ref-palette-neutral-variant-100: #ffffff; /* Neutral Variant 100 */
+    --md-ref-palette-neutral-0: #0000001f; /* Neutral 0 */
+    --md-ref-palette-neutral-4: #121212; /* Neutral 4 */
+    --md-ref-palette-neutral-6: #121212; /* Neutral 6 */
+    --md-ref-palette-neutral-10: #303030; /* Neutral 10 */
+    --md-ref-palette-neutral-12: #303030; /* Neutral 12 */
+    --md-ref-palette-neutral-17: #303030; /* Neutral 17 */
+    --md-ref-palette-neutral-20: #444444; /* Neutral 20 */
+    --md-ref-palette-neutral-22: #444444; /* Neutral 22 */
+    --md-ref-palette-neutral-24: #444444; /* Neutral 24 */
+    --md-ref-palette-neutral-25: #666666; /* Neutral 25 */
+    --md-ref-palette-neutral-30: #666666; /* Neutral 30 */
+    --md-ref-palette-neutral-35: #666666; /* Neutral 35 */
+    --md-ref-palette-neutral-40: #acacac; /* Neutral 40 */
+    --md-ref-palette-neutral-50: #acacac; /* Neutral 50 */
+    --md-ref-palette-neutral-60: #acacac; /* Neutral 60 */
+    --md-ref-palette-neutral-70: #d8d8d8; /* Neutral 70 */
+    --md-ref-palette-neutral-80: #d8d8d8; /* Neutral 80 */
+    --md-ref-palette-neutral-87: #d8d8d8; /* Neutral 87 */
+    --md-ref-palette-neutral-90: #e3e3e3; /* Neutral 90 */
+    --md-ref-palette-neutral-92: #f4f4f4; /* Neutral 92 */
+    --md-ref-palette-neutral-94: #f4f4f4; /* Neutral 94 */
+    --md-ref-palette-neutral-95: #fafafa; /* Neutral 95 */
+    --md-ref-palette-neutral-96: #fafafa; /* Neutral 96 */
+    --md-ref-palette-neutral-98: #fafafa; /* Neutral 98 */
+    --md-ref-palette-neutral-99: #fafafa; /* Neutral 99 */
+    --md-ref-palette-neutral-100: #ffffff; /* Neutral 100 */
+    --md-ref-typeface-plain: Comic Sans MS; /* Plain typeface */
+    --md-ref-typeface-brand: Comic Sans MS; /* Brand typeface */
+    --md-ref-typeface-weight-bold: 700; /* Bold weight */
+    --md-ref-typeface-weight-medium: 500; /* Medium weight */
+    --md-ref-typeface-weight-regular: 400; /* Regular weight */
 
-$secondary: (
-    0: #000000,
-    10: #311b92,
-    20: #4527a0,
-    25: #512da8,
-    30: #5e35b1,
-    35: #673ab7,
-    40: #7e57c2,
-    50: #9575cd,
-    60: #b39ddb,
-    70: #d1c4e9,
-    80: #ede7f6,
-    90: #ede7f6,
-    95: #ede7f6,
-    98: #ede7f6,
-    99: #ede7f6,
-    100: #ffffff
-);
+    /* Nifi Light mode. Use these variables when applying colors to elements */
+    --nf-success-default: #31975b; /* The success color  */
+    --nf-success-variant: #1390ca; /* The success variant color  */
+    --nf-success-contrast: #ffffff; /* The success contrast color */
+    --nf-caution-default: #cf9338; /* The caution color  */
+    --nf-caution-contrast: #ffffff; /* The caution contrast color */
+    --nf-neutral: #666666; /* The neutral color  */
+    --nf-disabled: #d8d8d8; /* The color to use for disabled */
+    --nf-error-variant: #eb7071; /* The stopped run status color  */
+    --nf-new-canvas-item-grip: #000000; /* The new canvas item grip color */
+    --nf-new-canvas-item-hover: #000000; /* The new canvas item hover color */
+    --nf-resizable-triangle: rgba(18, 18, 18, 0.2); /* The color of the resize handle */
+    --nf-banner: #12121214; /* The banner row color */
+    --nf-odd: #12121206; /* The odd background color */
+    --nf-even: #fafafa; /* The even background color */
+    --nf-text-shadow: 0 0 4px rgba(255, 255, 255, 1); /* The text shadow color */
+    --nf-zero-opactiy: 0.6; /* The zero opacity color */
+    --nf-connection-drop-shadow: white; /* The connection drop shadow color */
+    --nf-canvas-background: #e5ebed; /* The canvas background color */
+    --nf-canvas-border-stroke-width: 1; /* The canvas border stroke width */
+    --nf-codemirror-gutters: #efefef; /* The codemirror gutters color */
+    --nf-codemirror-linenumber: #b4b4b4; /* The codemirror line number color */
+    --nf-codemirror-selection: rgba(128, 203, 196, 0.8); /* The codemirror selection color */
+    --nf-codemirror-header: #0000ff; /* The codemirror header color */
+    --nf-codemirror-quote: #009400; /* The codemirror quote color */
+    --nf-codemirror-negative: #de3535; /* The codemirror negative color */
+    --nf-codemirror-positive: #219a21; /* The codemirror positive color */
+    --nf-codemirror-bracket: #93937c; /* The codemirror bracket color */
+    --nf-codemirror-keyword: #6800ab; /* The codemirror keyword color */
+    --nf-codemirror-error-background-color: #ff8094; /* The codemirror error background color */
+    --nf-codemirror-error-color: rgba(0, 0, 0, 0); /* The codemirror error text color */
+    --nf-codemirror-link: #0000ce; /* The codemirror link color */
+    --nf-codemirror-invalidchar: #ff0000; /* The codemirror invalid character color */
+    --nf-codemirror-operator: #0083b9; /* The codemirror operator color */
+    --nf-codemirror-variable: #000; /* The codemirror variable color */
+    --nf-codemirror-variable-2: #0054a6; /* The codemirror variable 2 color */
+    --nf-codemirror-variable-3: #ad0007; /* The codemirror variable 3 color */
+    --nf-codemirror-builtin: #3400ad; /* The codemirror builtin color */
+    --nf-codemirror-atom: #bd2b00; /* The codemirror atom color */
+    --nf-codemirror-number: #c20021; /* The codemirror number color */
+    --nf-codemirror-def: #0553f8; /* The codemirror definition color */
+    --nf-codemirror-string: #ec000c; /* The codemirror string color */
+    --nf-codemirror-string2: #ec000c; /* The codemirror string 2 color */
+    --nf-codemirror-comment: #545454; /* The codemirror comment color */
+    --nf-codemirror-tag: #f8052e; /* The codemirror tag color */
+    --nf-codemirror-nonmatchingbracket: #a62020; /* The codemirror non matching bracket color */
+    --nf-codemirror-matchingtag: rgba(255, 150, 0, 0.3); /* The codemirror matching tag color */
+    --nf-codemirror-activeline-background: rgba(0, 0, 0, 0.5); /* The codemirror active line background color */
+    --nf-prism-language-color: #ec000c; /* The prism language color */
+    --nf-prism-token-comment: #545454; /* The prism token comment color */
+    --nf-prism-token-punctuation: #6800ab; /* The prism token punctuation color */
+    --nf-prism-token-constant: #ec000c; /* The prism token constant color */
+    --nf-prism-token-function: #000000; /* The prism token function color */
 
-$tertiary: (
-    0: #000000,
-    10: #004d40,
-    20: #00695c,
-    25: #00796b,
-    30: #00897b,
-    35: #009688,
-    40: #26a69a,
-    50: #4db6ac,
-    60: #80cbc4,
-    70: #b2dfdb,
-    80: #e0f2f1,
-    90: #e0f2f1,
-    95: #e0f2f1,
-    98: #e0f2f1,
-    99: #e0f2f1,
-    100: #ffffff
-);
-
-$error: (
-    0: #000000,
-    10: #000000,
-    20: #000000,
-    25: #a8372a,
-    30: #ba554a,
-    35: #ba554a,
-    40: #ba554a,
-    50: #eb7071,
-    60: #eb7071,
-    70: #eb7071,
-    80: #eb7071,
-    90: #f49999,
-    95: #f49999,
-    98: #ffccd2,
-    99: #ffccd2,
-    100: #ffffff
-);
-
-$neutral: (
-    0: #000000,
-    4: #121212,
-    6: #303030,
-    10: #303030,
-    12: #303030,
-    17: #303030,
-    20: #444444,
-    22: #444444,
-    24: #444444,
-    25: #666666,
-    30: #666666,
-    35: #666666,
-    40: #82878d,
-    50: #82878d,
-    60: #82878d,
-    70: #d8d8d8,
-    80: #d8d8d8,
-    87: #d8d8d8,
-    90: #e3e3e3,
-    92: #e3e3e3,
-    94: #f4f4f4,
-    95: #f4f4f4,
-    96: #f4f4f4,
-    98: #fafafa,
-    99: #fafafa,
-    100: #ffffff
-);
-
-$neutral-variant: (
-    0: #000000,
-    10: #666666,
-    20: #666666,
-    25: #666666,
-    30: #666666,
-    35: #666666,
-    40: #acacac,
-    50: #d8d8d8,
-    60: #d8d8d8,
-    70: #d8d8d8,
-    80: #d8d8d8,
-    90: #e3e3e3,
-    95: #f4f4f4,
-    98: #fafafa,
-    99: #fafafa,
-    100: #ffffff
-);
-
-$m3-material-primary-light-palette: (
-    primary: $primary,
-    secondary: $secondary,
-    tertiary: $tertiary,
-    neutral: $neutral,
-    neutral-variant: $neutral-variant,
-    error: $error
-);
+    @include mat.theme-overrides(
+        (
+            primary: var(--md-ref-palette-primary-40),
+            on-primary: var(--md-ref-palette-primary-100),
+            primary-container: var(--md-ref-palette-neutral-90),
+            on-primary-container: var(--md-ref-palette-primary-40),
+            inverse-primary: var(--md-ref-palette-primary-40),
+            primary-fixed: var(--md-ref-palette-primary-40),
+            primary-fixed-dim: var(--md-ref-palette-primary-40),
+            on-primary-fixed: var(--md-ref-palette-primary-100),
+            on-primary-fixed-variant: var(--md-ref-palette-primary-100),
+            secondary: var(--md-ref-palette-secondary-40),
+            on-secondary: var(--md-ref-palette-secondary-100),
+            secondary-container: var(--md-ref-palette-secondary-80),
+            on-secondary-container: var(--md-ref-palette-neutral-10),
+            secondary-fixed: var(--md-ref-palette-secondary-50),
+            secondary-fixed-dim: var(--md-ref-palette-secondary-50),
+            on-secondary-fixed: var(--md-ref-palette-secondary-0),
+            on-secondary-fixed-variant: var(--md-ref-palette-secondary-0),
+            tertiary: var(--md-ref-palette-tertiary-40),
+            on-tertiary: var(--md-ref-palette-tertiary-0),
+            tertiary-container: var(--md-ref-palette-tertiary-80),
+            on-tertiary-container: var(--md-ref-palette-neutral-10),
+            tertiary-fixed: var(--md-ref-palette-tertiary-40),
+            tertiary-fixed-dim: var(--md-ref-palette-tertiary-40),
+            on-tertiary-fixed: var(--md-ref-palette-tertiary-100),
+            on-tertiary-fixed-variant: var(--md-ref-palette-tertiary-100),
+            background: var(--md-ref-palette-neutral-99),
+            on-background: var(--md-ref-palette-neutral-10),
+            surface: var(--md-ref-palette-neutral-100),
+            surface-dim: var(--md-ref-palette-neutral-90),
+            surface-bright: var(--md-ref-palette-neutral-100),
+            surface-container-lowest: var(--md-ref-palette-neutral-100),
+            surface-container-low: var(--md-ref-palette-neutral-95),
+            surface-container: var(--md-ref-palette-neutral-94),
+            surface-container-high: var(--md-ref-palette-neutral-92),
+            surface-container-highest: var(--md-ref-palette-neutral-90),
+            on-surface: var(--md-ref-palette-neutral-10),
+            shadow: var(--md-ref-palette-neutral-variant-0),
+            scrim: var(--md-ref-palette-neutral-variant-0),
+            surface-tint: var(--md-ref-palette-neutral-30),
+            inverse-surface: var(--md-ref-palette-neutral-10),
+            inverse-on-surface: var(--md-ref-palette-neutral-100),
+            outline: var(--md-ref-palette-neutral-70),
+            outline-variant: var(--md-ref-palette-neutral-variant-70),
+            neutral: var(--md-ref-palette-neutral-40),
+            neutral10: var(--md-ref-palette-neutral-20),
+            error: var(--md-ref-palette-error-40),
+            error-container: var(--md-ref-palette-error-40),
+            on-error: var(--md-ref-palette-error-100),
+            on-error-container: var(--md-ref-palette-error-100),
+            surface-variant: var(--md-ref-palette-neutral-variant-90),
+            on-surface-variant: var(--md-ref-palette-neutral-variant-30),
+            neutral-variant: var(--md-ref-palette-neutral-variant-40),
+            neutral-variant20: var(--md-ref-palette-neutral-variant-25),
+            inverse-secondary: var(--md-ref-palette-secondary-50),
+            inverse-tertiary: var(--md-ref-palette-tertiary-80)
+        )
+    );
 
-$m3-material-primary-dark-palette: (
-    primary: $primary,
-    secondary: $secondary,
-    tertiary: $tertiary,
-    neutral: $neutral,
-    neutral-variant: $neutral-variant,
-    error: $error
-);
+    @include mat.snack-bar-overrides(
+        (
+            button-color: var(--md-ref-palette-secondary-80)
+        )
+    );
 
-// Define a dark theme
-$_dark-theme-rest: (
-    secondary: map.get($m3-material-primary-dark-palette, secondary),
-    neutral: map.get($m3-material-primary-dark-palette, neutral),
-    neutral-variant: map.get($m3-material-primary-dark-palette, neutral-variant),
-    error: map.get($m3-material-primary-dark-palette, error)
-);
-$_dark-theme-primary: map.merge(map.get($m3-material-primary-dark-palette, primary), $_dark-theme-rest);
-$_dark-theme-tertiary: map.merge(map.get($m3-material-primary-dark-palette, tertiary), $_dark-theme-rest);
+    .tertiary-checkbox {
+        @include mat.checkbox-overrides(
+            (
+                selected-icon-color: var(--md-ref-palette-tertiary-40)
+            )
+        );
+    }
 
-$m3-dark-theme: mat.define-theme(
-    (
-        color: (
-            theme-type: dark,
-            primary: $_dark-theme-primary,
-            tertiary: $_dark-theme-tertiary
-        ),
-        typography: (
-            plain-family: Comic Sans MS,
-            brand-family: Comic Sans MS,
-            bold-weight: 700,
-            regular-weight: 400
-        ),
-        density: (
-            scale: -3
-        )
-    )
-);
+    .primary-icon-button {
+        @include mat.icon-button-overrides(
+            (
+                icon-color: var(--md-ref-palette-primary-40)
+            )
+        );
+    }
 
-// Define a light theme
-$_light-theme-rest: (
-    secondary: map.get($m3-material-primary-light-palette, secondary),
-    neutral: map.get($m3-material-primary-light-palette, neutral),
-    neutral-variant: map.get($m3-material-primary-light-palette, neutral-variant),
-    error: map.get($m3-material-primary-light-palette, error)
-);
-$_light-theme-primary: map.merge(map.get($m3-material-primary-light-palette, primary), $_light-theme-rest);
-$_light-theme-tertiary: map.merge(map.get($m3-material-primary-light-palette, tertiary), $_light-theme-rest);
+    .error-button {
+        @include mat.button-overrides(
+            (
+                filled-container-color: var(--md-ref-palette-error-40),
+                filled-label-text-color: var(--md-ref-palette-error-100)
+            )
+        );
+    }
 
-$m3-light-theme: mat.define-theme(
-    (
-        color: (
-            theme-type: light,
-            primary: $_light-theme-primary,
-            tertiary: $_light-theme-tertiary
-        ),
-        typography: (
-            plain-family: Comic Sans MS,
-            brand-family: Comic Sans MS,
-            bold-weight: 700,
-            regular-weight: 400
-        ),
-        density: (
-            scale: -3
-        )
-    )
-);
+    .tertiary-spinner {
+        @include mat.progress-spinner-overrides(
+            (
+                active-indicator-color: var(--md-ref-palette-tertiary-40)
+            )
+        );
+    }
+}
 
-$m3-light-theme-config: (
+// Note: Color palettes are generated from primary: #6750a4
+$_palettes: (
     primary: (
-        default: 40,
-        contrast: #ffffff
+        0: var(--md-ref-palette-primary-0),
+        10: var(--md-ref-palette-primary-10),
+        20: var(--md-ref-palette-primary-20),
+        25: var(--md-ref-palette-primary-25),
+        30: var(--md-ref-palette-primary-30),
+        35: var(--md-ref-palette-primary-35),
+        40: var(--md-ref-palette-primary-40),
+        50: var(--md-ref-palette-primary-50),
+        60: var(--md-ref-palette-primary-60),
+        70: var(--md-ref-palette-primary-70),
+        80: var(--md-ref-palette-primary-80),
+        90: var(--md-ref-palette-primary-90),
+        95: var(--md-ref-palette-primary-95),
+        98: var(--md-ref-palette-primary-98),
+        99: var(--md-ref-palette-primary-99),
+        100: var(--md-ref-palette-primary-100)
     ),
     secondary: (
-        default: 50,
-        contrast: #ffffff,
-        opacity: 0.6,
-        new-canvas-item: (
-            grip: #ffffff,
-            hover: #000000
-        )
+        0: var(--md-ref-palette-secondary-0),
+        10: var(--md-ref-palette-secondary-10),
+        20: var(--md-ref-palette-secondary-20),
+        25: var(--md-ref-palette-secondary-25),
+        30: var(--md-ref-palette-secondary-30),
+        35: var(--md-ref-palette-secondary-35),
+        40: var(--md-ref-palette-secondary-40),
+        50: var(--md-ref-palette-secondary-50),
+        60: var(--md-ref-palette-secondary-60),
+        70: var(--md-ref-palette-secondary-70),
+        80: var(--md-ref-palette-secondary-80),
+        90: var(--md-ref-palette-secondary-90),
+        95: var(--md-ref-palette-secondary-95),
+        98: var(--md-ref-palette-secondary-98),
+        99: var(--md-ref-palette-secondary-99),
+        100: var(--md-ref-palette-secondary-100)
     ),
     tertiary: (
-        default: 40,
-        variant: 90
-    ),
-    success: (
-        default: #31975b,
-        variant: #1390ca
-    ),
-    alternate-surface: #ffffff,
-    caution: (
-        default: #cf9338,
-        contrast: #ffffff
+        0: var(--md-ref-palette-tertiary-0),
+        10: var(--md-ref-palette-tertiary-10),
+        20: var(--md-ref-palette-tertiary-20),
+        25: var(--md-ref-palette-tertiary-25),
+        30: var(--md-ref-palette-tertiary-30),
+        35: var(--md-ref-palette-tertiary-35),
+        40: var(--md-ref-palette-tertiary-40),
+        50: var(--md-ref-palette-tertiary-50),
+        60: var(--md-ref-palette-tertiary-60),
+        70: var(--md-ref-palette-tertiary-70),
+        80: var(--md-ref-palette-tertiary-80),
+        90: var(--md-ref-palette-tertiary-90),
+        95: var(--md-ref-palette-tertiary-95),
+        98: var(--md-ref-palette-tertiary-98),
+        99: var(--md-ref-palette-tertiary-99),
+        100: var(--md-ref-palette-tertiary-100)
     ),
     neutral: (
-        darker: 4,
-        default: 35,
-        lighter: 99,
-        disabled: 80,
-        contrast: #000000
+        0: var(--md-ref-palette-neutral-0),
+        4: var(--md-ref-palette-neutral-4),
+        6: var(--md-ref-palette-neutral-6),
+        10: var(--md-ref-palette-neutral-10),
+        12: var(--md-ref-palette-neutral-12),
+        17: var(--md-ref-palette-neutral-17),
+        20: var(--md-ref-palette-neutral-20),
+        22: var(--md-ref-palette-neutral-22),
+        24: var(--md-ref-palette-neutral-24),
+        25: var(--md-ref-palette-neutral-25),
+        30: var(--md-ref-palette-neutral-30),
+        35: var(--md-ref-palette-neutral-35),
+        40: var(--md-ref-palette-neutral-40),
+        50: var(--md-ref-palette-neutral-50),
+        60: var(--md-ref-palette-neutral-60),
+        70: var(--md-ref-palette-neutral-70),
+        80: var(--md-ref-palette-neutral-80),
+        87: var(--md-ref-palette-neutral-87),
+        90: var(--md-ref-palette-neutral-90),
+        92: var(--md-ref-palette-neutral-92),
+        94: var(--md-ref-palette-neutral-94),
+        95: var(--md-ref-palette-neutral-95),
+        96: var(--md-ref-palette-neutral-96),
+        98: var(--md-ref-palette-neutral-98),
+        99: var(--md-ref-palette-neutral-99),
+        100: var(--md-ref-palette-neutral-100)
+    ),
+    neutral-variant: (
+        0: var(--md-ref-palette-neutral-variant-0),
+        10: var(--md-ref-palette-neutral-variant-10),
+        20: var(--md-ref-palette-neutral-variant-20),
+        25: var(--md-ref-palette-neutral-variant-25),
+        30: var(--md-ref-palette-neutral-variant-30),
+        35: var(--md-ref-palette-neutral-variant-35),
+        40: var(--md-ref-palette-neutral-variant-40),
+        50: var(--md-ref-palette-neutral-variant-50),
+        60: var(--md-ref-palette-neutral-variant-60),
+        70: var(--md-ref-palette-neutral-variant-70),
+        80: var(--md-ref-palette-neutral-variant-80),
+        90: var(--md-ref-palette-neutral-variant-90),
+        95: var(--md-ref-palette-neutral-variant-95),
+        98: var(--md-ref-palette-neutral-variant-98),
+        99: var(--md-ref-palette-neutral-variant-99),
+        100: var(--md-ref-palette-neutral-variant-100)
     ),
-    neutral-variant: 50,
     error: (
-        variant: 50,
-        default: 40,
-        contrast: #ffffff
+        0: var(--md-ref-palette-error-0),
+        10: var(--md-ref-palette-error-10),
+        20: var(--md-ref-palette-error-20),
+        25: var(--md-ref-palette-error-25),
+        30: var(--md-ref-palette-error-30),
+        35: var(--md-ref-palette-error-35),
+        40: var(--md-ref-palette-error-40),
+        50: var(--md-ref-palette-error-50),
+        60: var(--md-ref-palette-error-60),
+        70: var(--md-ref-palette-error-70),
+        80: var(--md-ref-palette-error-80),
+        90: var(--md-ref-palette-error-90),
+        95: var(--md-ref-palette-error-95),
+        98: var(--md-ref-palette-error-98),
+        99: var(--md-ref-palette-error-99),
+        100: var(--md-ref-palette-error-100)
     )
 );
 
-$m3-dark-theme-config: (
-    primary: (
-        default: 40,
-        contrast: #000000
-    ),
-    secondary: (
-        default: 40,
-        contrast: #ffffff,
-        opacity: 0.5,
-        new-canvas-item: (
-            grip: #000000,
-            hover: #000000
-        )
-    ),
-    tertiary: (
-        variant: 10,
-        default: 70
-    ),
-    success: (
-        default: #31975b,
-        variant: #1390ca
-    ),
-    alternate-surface: #444444,
-    caution: (
-        default: #cf9338,
-        contrast: #ffffff
-    ),
-    neutral: (
-        darker: 10,
-        default: 40,
-        lighter: 96,
-        disabled: 90,
-        contrast: #ffffff
-    ),
-    neutral-variant: 35,
-    error: (
-        variant: 90,
-        default: 50,
-        contrast: #ffffff
-    )
+$_rest: (
+    secondary: map.get($_palettes, secondary),
+    neutral: map.get($_palettes, neutral),
+    neutral-variant: map.get($_palettes, neutral-variant),
+    error: map.get($_palettes, error)
 );
+
+$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
+$tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);
+
+@include mat.app-background();
+
+/* Light Theme */
+html {
+    color-scheme: light;
+    @include mat.theme(
+        (
+            color: (
+                primary: $primary-palette,
+                tertiary: $tertiary-palette
+            ),
+            typography: (
+                plain-family: var(--md-ref-typeface-plain),
+                brand-family: var(--md-ref-typeface-brand),
+                bold-weight: var(--md-ref-typeface-weight-bold),
+                regular-weight: var(--md-ref-typeface-weight-regular)
+            ),
+            density: (
+                scale: -3
+            )
+        )
+    );
+}
+
+/* Light Theme */
+html {
+    color-scheme: light;
+}
+
+/* Dark Theme */
+.darkMode {
+    --md-ref-palette-error-0: #000000; /* Error 0 */
+    --md-ref-palette-error-10: #000000; /* Error 10 */
+    --md-ref-palette-error-20: #000000; /* Error 20 */
+    --md-ref-palette-error-25: #a8372a; /* Error 25 */
+    --md-ref-palette-error-30: #ba554a; /* Error 30 */
+    --md-ref-palette-error-35: #ba554a; /* Error 35 */
+    --md-ref-palette-error-40: #ba554a; /* Error 40 */
+    --md-ref-palette-error-50: #eb7071; /* Error 50 */
+    --md-ref-palette-error-60: #eb7071; /* Error 60 */
+    --md-ref-palette-error-70: #eb7071; /* Error 70 */
+    --md-ref-palette-error-80: #eb7071; /* Error 80 */
+    --md-ref-palette-error-90: #f49999; /* Error 90 */
+    --md-ref-palette-error-95: #f49999; /* Error 95 */
+    --md-ref-palette-error-98: #ffccd2; /* Error 98 */
+    --md-ref-palette-error-99: #ffccd2; /* Error 99 */
+    --md-ref-palette-error-100: #ffffff; /* Error 100 */
+    --md-ref-palette-tertiary-0: #000000; /* Tertiary 0 */
+    --md-ref-palette-tertiary-10: #004d40; /* Tertiary 10 */
+    --md-ref-palette-tertiary-20: #00695c; /* Tertiary 20 */
+    --md-ref-palette-tertiary-25: #00796b; /* Tertiary 25 */
+    --md-ref-palette-tertiary-30: #00897b; /* Tertiary 30 */
+    --md-ref-palette-tertiary-35: #009688; /* Tertiary 35 */
+    --md-ref-palette-tertiary-40: #26a69a; /* Tertiary 40 */
+    --md-ref-palette-tertiary-50: #4db6ac; /* Tertiary 50 */
+    --md-ref-palette-tertiary-60: #80cbc4; /* Tertiary 60 */
+    --md-ref-palette-tertiary-70: #b2dfdb; /* Tertiary 70 */
+    --md-ref-palette-tertiary-80: #e0f2f1; /* Tertiary 80 */
+    --md-ref-palette-tertiary-90: #e0f2f1; /* Tertiary 90 */
+    --md-ref-palette-tertiary-95: #e0f2f1; /* Tertiary 95 */
+    --md-ref-palette-tertiary-98: #e0f2f1; /* Tertiary 98 */
+    --md-ref-palette-tertiary-99: #e0f2f1; /* Tertiary 99 */
+    --md-ref-palette-tertiary-100: #ffffff; /* Tertiary 100 */
+    --md-ref-palette-secondary-0: #000000; /* Secondary 0 */
+    --md-ref-palette-secondary-10: #311b92; /* Secondary 10 */
+    --md-ref-palette-secondary-20: #4527a0; /* Secondary 20 */
+    --md-ref-palette-secondary-25: #512da8; /* Secondary 25 */
+    --md-ref-palette-secondary-30: #5e35b1; /* Secondary 30 */
+    --md-ref-palette-secondary-35: #673ab7; /* Secondary 35 */
+    --md-ref-palette-secondary-40: #7e57c2; /* Secondary 40 */
+    --md-ref-palette-secondary-50: #9575cd; /* Secondary 50 */
+    --md-ref-palette-secondary-60: #b39ddb; /* Secondary 60 */
+    --md-ref-palette-secondary-70: #d1c4e9; /* Secondary 70 */
+    --md-ref-palette-secondary-80: #ede7f6; /* Secondary 80 */
+    --md-ref-palette-secondary-90: #ede7f6; /* Secondary 90 */
+    --md-ref-palette-secondary-95: #ede7f6; /* Secondary 95 */
+    --md-ref-palette-secondary-98: #ede7f6; /* Secondary 98 */
+    --md-ref-palette-secondary-99: #ede7f6; /* Secondary 99 */
+    --md-ref-palette-secondary-100: #ffffff; /* Secondary 100 */
+    --md-ref-palette-primary-0: #000000; /* Primary 0 */
+    --md-ref-palette-primary-10: #311b92; /* Primary 10 */
+    --md-ref-palette-primary-20: #4527a0; /* Primary 20 */
+    --md-ref-palette-primary-25: #512da8; /* Primary 25 */
+    --md-ref-palette-primary-30: #5e35b1; /* Primary 30 */
+    --md-ref-palette-primary-35: #673ab7; /* Primary 35 */
+    --md-ref-palette-primary-40: #7e57c2; /* Primary 40 */
+    --md-ref-palette-primary-50: #9575cd; /* Primary 50 */
+    --md-ref-palette-primary-60: #b39ddb; /* Primary 60 */
+    --md-ref-palette-primary-70: #d1c4e9; /* Primary 70 */
+    --md-ref-palette-primary-80: #ede7f6; /* Primary 80 */
+    --md-ref-palette-primary-90: #ede7f6; /* Primary 90 */
+    --md-ref-palette-primary-95: #ede7f6; /* Primary 95 */
+    --md-ref-palette-primary-98: #ede7f6; /* Primary 98 */
+    --md-ref-palette-primary-99: #ede7f6; /* Primary 99 */
+    --md-ref-palette-primary-100: #ffffff; /* Primary 100 */
+    --md-ref-palette-neutral-variant-0: #000000; /* Neutral Variant 0 */
+    --md-ref-palette-neutral-variant-10: #303030; /* Neutral Variant 10 */
+    --md-ref-palette-neutral-variant-20: #444444; /* Neutral Variant 20 */
+    --md-ref-palette-neutral-variant-25: #666666; /* Neutral Variant 25 */
+    --md-ref-palette-neutral-variant-30: #666666; /* Neutral Variant 30 */
+    --md-ref-palette-neutral-variant-35: #666666; /* Neutral Variant 35 */
+    --md-ref-palette-neutral-variant-40: #666666; /* Neutral Variant 40 */
+    --md-ref-palette-neutral-variant-50: #666666; /* Neutral Variant 50 */
+    --md-ref-palette-neutral-variant-60: #666666; /* Neutral Variant 60 */
+    --md-ref-palette-neutral-variant-70: #acacac; /* Neutral Variant 70 */
+    --md-ref-palette-neutral-variant-80: #d8d8d8; /* Neutral Variant 80 */
+    --md-ref-palette-neutral-variant-90: #e3e3e3; /* Neutral Variant 90 */
+    --md-ref-palette-neutral-variant-95: #f4f4f4; /* Neutral Variant 95 */
+    --md-ref-palette-neutral-variant-98: #fafafa; /* Neutral Variant 98 */
+    --md-ref-palette-neutral-variant-99: #fafafa; /* Neutral Variant 99 */
+    --md-ref-palette-neutral-variant-100: #ffffff; /* Neutral Variant 100 */
+    --md-ref-palette-neutral-0: #0000001f; /* Neutral 0 */
+    --md-ref-palette-neutral-4: #303030; /* Neutral 4 */
+    --md-ref-palette-neutral-6: #303030; /* Neutral 6 */
+    --md-ref-palette-neutral-10: #303030; /* Neutral 10 */
+    --md-ref-palette-neutral-12: #444444; /* Neutral 12 */
+    --md-ref-palette-neutral-17: #444444; /* Neutral 17 */
+    --md-ref-palette-neutral-20: #444444; /* Neutral 20 */
+    --md-ref-palette-neutral-22: #444444; /* Neutral 22 */
+    --md-ref-palette-neutral-24: #444444; /* Neutral 24 */
+    --md-ref-palette-neutral-25: #666666; /* Neutral 25 */
+    --md-ref-palette-neutral-30: #666666; /* Neutral 30 */
+    --md-ref-palette-neutral-35: #666666; /* Neutral 35 */
+    --md-ref-palette-neutral-40: #acacac; /* Neutral 40 */
+    --md-ref-palette-neutral-50: #acacac; /* Neutral 50 */
+    --md-ref-palette-neutral-60: #acacac; /* Neutral 60 */
+    --md-ref-palette-neutral-70: #cccccc; /* Neutral 70 */
+    --md-ref-palette-neutral-80: #d8d8d8; /* Neutral 80 */
+    --md-ref-palette-neutral-87: #d8d8d8; /* Neutral 87 */
+    --md-ref-palette-neutral-90: #e3e3e3; /* Neutral 90 */
+    --md-ref-palette-neutral-92: #e3e3e3; /* Neutral 92 */
+    --md-ref-palette-neutral-94: #e3e3e3; /* Neutral 94 */
+    --md-ref-palette-neutral-95: #f4f4f4; /* Neutral 95 */
+    --md-ref-palette-neutral-96: #f4f4f4; /* Neutral 96 */
+    --md-ref-palette-neutral-98: #fafafa; /* Neutral 98 */
+    --md-ref-palette-neutral-99: #fafafa; /* Neutral 99 */
+    --md-ref-palette-neutral-100: #ffffff; /* Neutral 100 */
+    --md-ref-typeface-plain: Comic Sans MS; /* Plain typeface */
+    --md-ref-typeface-brand: Comic Sans MS; /* Brand typeface */
+    --md-ref-typeface-weight-bold: 700; /* Bold weight */
+    --md-ref-typeface-weight-medium: 500; /* Medium weight */
+    --md-ref-typeface-weight-regular: 400; /* Regular weight */
+
+    /* Nifi Dark mode. Use these variables when applying colors to elements */
+    --nf-success-default: #31975b; /* The success color  */
+    --nf-success-variant: #1390ca; /* The success variant color  */
+    --nf-success-contrast: #ffffff; /* The success contrast color */
+    --nf-caution-default: #cf9338; /* The caution color  */
+    --nf-caution-contrast: #ffffff; /* The caution contrast color */
+    --nf-neutral: #acacac; /* The neutral color  */
+    --nf-disabled: #cccccc; /* The color to use for disabled */
+    --nf-error-variant: #f49999; /* The stopped run status color  */
+    --nf-new-canvas-item-grip: #000000; /* The new canvas item grip color  */
+    --nf-new-canvas-item-hover: #ffffff; /* The new canvas item hover color  */
+    --nf-resizable-triangle: rgba(18, 18, 18, 0.2); /* The color of the resize handle */
+    --nf-banner: #f4f4f414; /* The banner row color */
+    --nf-odd: #f4f4f406; /* The odd background color */
+    --nf-even: #303030; /* The even background color */
+    --nf-text-shadow: 0 0 4px rgba(0, 0, 0, 1); /* The text shadow color */
+    --nf-zero-opactiy: 0.5; /* The zero opacity color */
+    --nf-connection-drop-shadow: black; /* The connection drop shadow color */
+    --nf-canvas-background: #0d1411; /* The canvas background color */
+    --nf-canvas-border-stroke-width: 2; /* The canvas border stroke width */
+    --nf-codemirror-gutters: #3b3b3b; /* The codemirror gutters color */
+    --nf-codemirror-linenumber: #bbbbbb; /* The codemirror line number color */
+    --nf-codemirror-selection: rgba(128, 203, 196, 0.2); /* The codemirror selection color */
+    --nf-codemirror-header: #b8b8ff; /* The codemirror header color */
+    --nf-codemirror-quote: #6bfd6b; /* The codemirror quote color */
+    --nf-codemirror-negative: #fc9797; /* The codemirror negative color */
+    --nf-codemirror-positive: #8cfd8c; /* The codemirror positive color */
+    --nf-codemirror-bracket: #93937c; /* The codemirror bracket color */
+    --nf-codemirror-keyword: #c792ea; /* The codemirror keyword color */
+    --nf-codemirror-error-background-color: #ff002a; /* The codemirror error background color */
+    --nf-codemirror-error-color: rgba(255, 255, 255, 1); /* The codemirror error text color */
+    --nf-codemirror-link: #8e8ef6; /* The codemirror link color */
+    --nf-codemirror-invalidchar: #ff9c9c; /* The codemirror invalid character color */
+    --nf-codemirror-operator: #89ddff; /* The codemirror operator color */
+    --nf-codemirror-variable: #fff; /* The codemirror variable color */
+    --nf-codemirror-variable-2: #72b6fc; /* The codemirror variable 2 color */
+    --nf-codemirror-variable-3: #f07178; /* The codemirror variable 3 color */
+    --nf-codemirror-builtin: #a280f3; /* The codemirror builtin color */
+    --nf-codemirror-atom: #f78c6c; /* The codemirror atom color */
+    --nf-codemirror-number: #fd758c; /* The codemirror number color */
+    --nf-codemirror-def: #82aaff; /* The codemirror definition color */
+    --nf-codemirror-string: #f07178; /* The codemirror string color */
+    --nf-codemirror-string2: #f07178; /* The codemirror string 2 color */
+    --nf-codemirror-comment: #d7d7d7; /* The codemirror comment color */
+    --nf-codemirror-tag: #fc768d; /* The codemirror tag color */
+    --nf-codemirror-nonmatchingbracket: #a62020; /* The codemirror non matching bracket color */
+    --nf-codemirror-matchingtag: rgba(255, 150, 0, 0.97); /* The codemirror matching tag color */
+    --nf-codemirror-activeline-background: rgba(255, 255, 255, 0.5); /* The codemirror active line background color */
+    --nf-prism-language-color: #f07178; /* The prism language color */
+    --nf-prism-token-comment: #545454; /* The prism token comment color */
+    --nf-prism-token-punctuation: #c792ea; /* The prism token punctuation color */
+    --nf-prism-token-constant: #f07178; /* The prism token constant color */
+    --nf-prism-token-function: #ffffff; /* The prism token function color */
+
+    color-scheme: dark;
+
+    @include mat.theme-overrides(
+        (
+            primary: var(--md-ref-palette-primary-80),
+            on-primary: var(--md-ref-palette-primary-0),
+            primary-container: var(--md-ref-palette-neutral-30),
+            on-primary-container: var(--md-ref-palette-primary-80),
+            inverse-primary: var(--md-ref-palette-primary-80),
+            primary-fixed: var(--md-ref-palette-primary-80),
+            primary-fixed-dim: var(--md-ref-palette-primary-80),
+            on-primary-fixed: var(--md-ref-palette-primary-0),
+            on-primary-fixed-variant: var(--md-ref-palette-primary-0),
+            secondary: var(--md-ref-palette-secondary-40),
+            on-secondary: var(--md-ref-palette-secondary-0),
+            secondary-container: var(--md-ref-palette-secondary-40),
+            on-secondary-container: var(--md-ref-palette-secondary-0),
+            secondary-fixed: var(--md-ref-palette-secondary-40),
+            secondary-fixed-dim: var(--md-ref-palette-secondary-40),
+            on-secondary-fixed: var(--md-ref-palette-secondary-0),
+            on-secondary-fixed-variant: var(--md-ref-palette-secondary-0),
+            tertiary: var(--md-ref-palette-tertiary-60),
+            on-tertiary: var(--md-ref-palette-tertiary-0),
+            tertiary-container: var(--md-ref-palette-tertiary-10),
+            on-tertiary-container: var(--md-ref-palette-neutral-90),
+            tertiary-fixed: var(--md-ref-palette-tertiary-60),
+            tertiary-fixed-dim: var(--md-ref-palette-tertiary-60),
+            on-tertiary-fixed: var(--md-ref-palette-tertiary-0),
+            on-tertiary-fixed-variant: var(--md-ref-palette-tertiary-0),
+            background: var(--md-ref-palette-neutral-4),
+            on-background: var(--md-ref-palette-neutral-90),
+            surface: var(--md-ref-palette-neutral-12),
+            surface-dim: var(--md-ref-palette-neutral-4),
+            surface-bright: var(--md-ref-palette-neutral-12),
+            surface-container-lowest: var(--md-ref-palette-neutral-variant-0),
+            surface-container-low: var(--md-ref-palette-neutral-4),
+            surface-container: var(--md-ref-palette-neutral-12),
+            surface-container-high: var(--md-ref-palette-neutral-12),
+            surface-container-highest: var(--md-ref-palette-neutral-30),
+            on-surface: var(--md-ref-palette-neutral-90),
+            shadow: var(--md-ref-palette-neutral-variant-0),
+            scrim: var(--md-ref-palette-neutral-variant-0),
+            surface-tint: var(--md-ref-palette-neutral-30),
+            inverse-surface: var(--md-ref-palette-neutral-90),
+            inverse-on-surface: var(--md-ref-palette-neutral-variant-0),
+            outline: var(--md-ref-palette-neutral-30),
+            outline-variant: var(--md-ref-palette-neutral-30),
+            neutral: var(--md-ref-palette-neutral-60),
+            neutral10: var(--md-ref-palette-neutral-90),
+            error: var(--md-ref-palette-error-50),
+            error-container: var(--md-ref-palette-error-50),
+            on-error: var(--md-ref-palette-error-100),
+            on-error-container: var(--md-ref-palette-error-100),
+            surface-variant: var(--md-ref-palette-neutral-variant-40),
+            on-surface-variant: var(--md-ref-palette-neutral-variant-90),
+            neutral-variant: var(--md-ref-palette-neutral-variant-70),
+            neutral-variant20: var(--md-ref-palette-neutral-variant-80),
+            inverse-secondary: var(--md-ref-palette-secondary-40),
+            inverse-tertiary: var(--md-ref-palette-tertiary-70)
+        )
+    );
+
+    @include mat.snack-bar-overrides(
+        (
+            button-color: #004849
+        )
+    );
+
+    .tertiary-checkbox {
+        @include mat.checkbox-overrides(
+            (
+                selected-icon-color: var(--md-ref-palette-tertiary-70)
+            )
+        );
+    }
+
+    .primary-icon-button {
+        @include mat.icon-button-overrides(
+            (
+                icon-color: var(--md-ref-palette-primary-80)
+            )
+        );
+    }
+
+    .error-button {
+        @include mat.button-overrides(
+            (
+                filled-container-color: var(--md-ref-palette-error-50),
+                filled-label-text-color: var(--md-ref-palette-error-100)
+            )
+        );
+    }
+
+    .tertiary-spinner {
+        @include mat.progress-spinner-overrides(
+            (
+                active-indicator-color: var(--md-ref-palette-tertiary-70)
+            )
+        );
+    }
+}
diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/components/map-table/editors/text-editor/_text-editor.component-theme.scss b/nifi-frontend/src/main/frontend/libs/shared/src/components/map-table/editors/text-editor/_text-editor.component-theme.scss
index 085bde433c9f..ce4d651e6b9f 100644
--- a/nifi-frontend/src/main/frontend/libs/shared/src/components/map-table/editors/text-editor/_text-editor.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/libs/shared/src/components/map-table/editors/text-editor/_text-editor.component-theme.scss
@@ -24,7 +24,6 @@
 
         .editor {
             &.blank {
-                border-color: var(--mdc-outlined-text-field-disabled-label-text-color);
                 cursor: not-allowed !important;
             }
         }
diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/components/map-table/map-table.component.html b/nifi-frontend/src/main/frontend/libs/shared/src/components/map-table/map-table.component.html
index 4f639681a54e..49e8da515797 100644
--- a/nifi-frontend/src/main/frontend/libs/shared/src/components/map-table/map-table.component.html
+++ b/nifi-frontend/src/main/frontend/libs/shared/src/components/map-table/map-table.component.html
@@ -22,7 +22,12 @@
         </div>
         @if (!isDisabled) {
             <div>
-                <button title="Add" mat-icon-button type="button" (click)="newEntryClicked()">
+                <button
+                    title="Add"
+                    mat-icon-button
+                    class="primary-icon-button"
+                    type="button"
+                    (click)="newEntryClicked()">
                     <i class="fa fa-plus"></i>
                 </button>
             </div>
diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/components/resizable/_resizeable-theme.scss b/nifi-frontend/src/main/frontend/libs/shared/src/components/resizable/_resizeable-theme.scss
index 16409d14518d..0d62d7acb24d 100644
--- a/nifi-frontend/src/main/frontend/libs/shared/src/components/resizable/_resizeable-theme.scss
+++ b/nifi-frontend/src/main/frontend/libs/shared/src/components/resizable/_resizeable-theme.scss
@@ -18,10 +18,9 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
-    $border-color: mat.get-theme-color($material-theme, neutral-variant, map.get($config, neutral-variant));
+@mixin generate-theme() {
     .resizable-triangle {
-        border-right-color: $border-color;
-        border-bottom-color: $border-color;
+        border-right-color: var(--mat-sys-outline);
+        border-bottom-color: var(--mat-sys-outline);
     }
 }
diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/components/tooltips/property-hint-tip/_property-hint-tip.component-theme.scss b/nifi-frontend/src/main/frontend/libs/shared/src/components/tooltips/property-hint-tip/_property-hint-tip.component-theme.scss
index c31c3919840c..ce73f71fc13f 100644
--- a/nifi-frontend/src/main/frontend/libs/shared/src/components/tooltips/property-hint-tip/_property-hint-tip.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/libs/shared/src/components/tooltips/property-hint-tip/_property-hint-tip.component-theme.scss
@@ -18,26 +18,9 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
-    $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
-    $material-theme-primary-palette-default: mat.get-theme-color(
-        $material-theme,
-        primary,
-        map.get(map.get($config, primary), default)
-    );
-    $material-theme-neutral-palette-darker: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), darker)
-    );
-    $material-theme-neutral-palette-lighter: mat.get-theme-color(
-        $material-theme,
-        neutral,
-        map.get(map.get($config, neutral), lighter)
-    );
-
+@mixin generate-theme() {
     .hint-pattern {
-        color: if($is-material-dark, $material-theme-neutral-palette-darker, $material-theme-neutral-palette-lighter);
-        background-color: $material-theme-primary-palette-default;
+        color: var(--mat-sys-background);
+        background-color: var(--mat-sys-primary);
     }
 }
diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/services/index.ts b/nifi-frontend/src/main/frontend/libs/shared/src/services/index.ts
index 8572877ade9e..7dc6d9d6924b 100644
--- a/nifi-frontend/src/main/frontend/libs/shared/src/services/index.ts
+++ b/nifi-frontend/src/main/frontend/libs/shared/src/services/index.ts
@@ -16,6 +16,7 @@
  */
 
 export * from './nifi-common.service';
+export * from './system-tokens.service';
 export * from './storage.service';
 export * from './session-storage.service';
 export * from './theming.service';
diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/services/system-tokens.service.spec.ts b/nifi-frontend/src/main/frontend/libs/shared/src/services/system-tokens.service.spec.ts
new file mode 100644
index 000000000000..7feefefebe92
--- /dev/null
+++ b/nifi-frontend/src/main/frontend/libs/shared/src/services/system-tokens.service.spec.ts
@@ -0,0 +1,97 @@
+/*
+ * 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.
+ */
+
+import { TestBed } from '@angular/core/testing';
+import { DOCUMENT } from '@angular/common';
+
+import { SystemTokensService } from './system-tokens.service';
+
+describe('SystemTokensService', () => {
+    let service: SystemTokensService;
+    let mockDocument: Document;
+    let mockStyleSheet: Partial<CSSStyleSheet>;
+
+    beforeEach(() => {
+        // Create a mock document
+        mockDocument = document.implementation.createHTMLDocument();
+
+        TestBed.configureTestingModule({
+            providers: [{ provide: DOCUMENT, useValue: mockDocument }]
+        });
+
+        service = TestBed.inject(SystemTokensService);
+
+        // Mock a CSSStyleSheet object
+        mockStyleSheet = {
+            cssRules: [
+                { cssText: 'body { background-color: red; }' } as CSSRule,
+                { cssText: '.container { display: flex; }' } as CSSRule,
+                { cssText: ':root { --primary-color: #ff0000; }' } as CSSRule
+            ] as unknown as CSSRuleList
+        };
+
+        // Mock `document.styleSheets`
+        Object.defineProperty(mockDocument, 'styleSheets', {
+            value: [mockStyleSheet],
+            writable: true
+        });
+    });
+
+    it('should be created', () => {
+        expect(service).toBeTruthy();
+    });
+
+    it('should append style sheet on iframe load', () => {
+        const iframe = document.createElement('iframe');
+        document.body.appendChild(iframe);
+        iframe.contentDocument!.write('<html><head></head><body></body></html>');
+        iframe.contentDocument!.close();
+
+        service.appendStyleSheet(iframe);
+
+        const styleElement = iframe.contentDocument!.head.querySelector('style');
+        expect(styleElement).toBeTruthy();
+        expect(styleElement!.textContent).toContain(
+            'body { background-color: red; } .container { display: flex; } :root { --primary-color: #ff0000; } '
+        );
+    });
+
+    it('should extract all CSS rules from document stylesheets', () => {
+        const cssText = service.extractAllStyles();
+
+        expect(cssText).toContain('body { background-color: red; }');
+        expect(cssText).toContain('.container { display: flex; }');
+        expect(cssText).toContain(':root { --primary-color: #ff0000; }');
+    });
+
+    it('should return an empty string if no stylesheets are present', () => {
+        Object.defineProperty(mockDocument, 'styleSheets', { value: [], writable: true });
+
+        const cssText = service.extractAllStyles();
+
+        expect(cssText).toBe('');
+    });
+
+    it('should handle stylesheets without cssRules gracefully', () => {
+        const emptyStyleSheet: Partial<CSSStyleSheet> = { cssRules: [] as unknown as CSSRuleList };
+        Object.defineProperty(mockDocument, 'styleSheets', { value: [emptyStyleSheet], writable: true });
+
+        const cssText = service.extractAllStyles();
+
+        expect(cssText).toBe('');
+    });
+});
diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/services/system-tokens.service.ts b/nifi-frontend/src/main/frontend/libs/shared/src/services/system-tokens.service.ts
new file mode 100644
index 000000000000..be189039874f
--- /dev/null
+++ b/nifi-frontend/src/main/frontend/libs/shared/src/services/system-tokens.service.ts
@@ -0,0 +1,60 @@
+/*
+ * 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.
+ */
+
+import { Inject, Injectable } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+@Injectable({ providedIn: 'root' })
+export class SystemTokensService {
+    constructor(@Inject(DOCUMENT) private _document: Document) {}
+
+    appendStyleSheet(iframe: any): void {
+        // Ensure the iframe's contentDocument is available
+        if (iframe.contentDocument) {
+            const iframeDoc = iframe.contentDocument;
+
+            // Extract all CSS rules from the first stylesheet
+            const allCSS = this.extractAllStyles();
+
+            // Append CSS variables as inline <style> to the end of the iframe's <head>
+            const styleElement = iframeDoc.createElement('style');
+            styleElement.appendChild(iframeDoc.createTextNode(`${allCSS}`));
+
+            // Append to the end of the <head> to ensure it overrides existing styles
+            iframeDoc.head.appendChild(styleElement);
+        }
+    }
+
+    extractAllStyles(): string {
+        let cssText = '';
+
+        // Iterate over all stylesheets in the document
+        for (let i = 0; i < this._document.styleSheets.length; i++) {
+            const styleSheet = this._document.styleSheets[i] as CSSStyleSheet;
+
+            // Ensure we can access rules
+            if (styleSheet.cssRules) {
+                for (let j = 0; j < styleSheet.cssRules.length; j++) {
+                    const rule = styleSheet.cssRules[j] as CSSRule;
+                    cssText += rule.cssText + ' ';
+                }
+            }
+        }
+
+        return cssText;
+    }
+}
diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/services/theming.service.ts b/nifi-frontend/src/main/frontend/libs/shared/src/services/theming.service.ts
index 595352989a62..a963a2a0f80e 100644
--- a/nifi-frontend/src/main/frontend/libs/shared/src/services/theming.service.ts
+++ b/nifi-frontend/src/main/frontend/libs/shared/src/services/theming.service.ts
@@ -29,19 +29,19 @@ export class ThemingService {
     toggleTheme(darkModeOn: boolean, theme: any) {
         if (darkModeOn) {
             if (theme === DARK_THEME) {
-                this._document.body.classList.toggle('dark-theme', true);
+                this._document.body.classList.toggle('darkMode', true);
             } else if (theme === LIGHT_THEME) {
-                this._document.body.classList.toggle('dark-theme', false);
+                this._document.body.classList.toggle('darkMode', false);
             } else {
-                this._document.body.classList.toggle('dark-theme', true);
+                this._document.body.classList.toggle('darkMode', true);
             }
         } else {
             if (theme === DARK_THEME) {
-                this._document.body.classList.toggle('dark-theme', true);
+                this._document.body.classList.toggle('darkMode', true);
             } else if (theme === LIGHT_THEME) {
-                this._document.body.classList.toggle('dark-theme', false);
+                this._document.body.classList.toggle('darkMode', false);
             } else {
-                this._document.body.classList.toggle('dark-theme', false);
+                this._document.body.classList.toggle('darkMode', false);
             }
         }
     }