diff --git a/docs/content-services/directives/inherited-button.directive.md b/docs/content-services/directives/inherited-button.directive.md
index f836e4ef4c..7671115f63 100644
--- a/docs/content-services/directives/inherited-button.directive.md
+++ b/docs/content-services/directives/inherited-button.directive.md
@@ -13,7 +13,6 @@ Update the current node by adding/removing the inherited permissions.
 
 ```html
     <button mat-raised-button
-            color="primary"
             adf-inherit-permission [nodeId]="nodeId"
             (updated)="onUpdatedPermissions($node)">PERMISSION</button>
 ```
diff --git a/docs/core/components/datatable.component.md b/docs/core/components/datatable.component.md
index 5049053576..e21f440a8d 100644
--- a/docs/core/components/datatable.component.md
+++ b/docs/core/components/datatable.component.md
@@ -351,7 +351,6 @@ while the data for the table is loading:
             <!--Add your custom loading template here-->
             <mat-progress-spinner
                 class="adf-document-list-loading-margin"
-                [color]="'primary'"
                 [mode]="'indeterminate'">
             </mat-progress-spinner>
         </ng-template>
diff --git a/docs/core/components/header.component.md b/docs/core/components/header.component.md
index 7a00e4c54b..5839170143 100644
--- a/docs/core/components/header.component.md
+++ b/docs/core/components/header.component.md
@@ -16,7 +16,6 @@ Reusable header for Alfresco applications.
     title="title" 
     logo="logo.svg" 
     [redirectUrl]="'/home'"
-    color="primary"
     (clicked)=toggleMenu($event)>
 </adf-layout-header>
 ```
@@ -38,7 +37,7 @@ body of the element:
 
 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
-| color | [`ThemePalette`](https://github.com/angular/components/blob/master/src/material/core/common-behaviors/color.ts) |  | Background color for the header. It can be any hex color code or one of the Material theme colors: 'primary', 'accent' or 'warn'. |
+| backgroundColor | [`string`] | Background color for the header. It can be any hex color code or CSS variable. |
 | expandedSidenav | `boolean` | true | expandedSidenav: Toggles the expanded state of the component. |
 | logo | `string` |  | Path to an image file for the application logo. |
 | position | `string` | "start" | The side of the page that the drawer is attached to (can be 'start' or 'end') |
@@ -58,5 +57,5 @@ body of the element:
 ## Details
 
 This component displays a customizable header that can be reused. Use the input properties to
-configure the left side (title, button) and the primary color of the header. The right part of the
+configure the left side (title, button) and the background color of the header. The right part of the
 header can contain other components which are transcluded in the header component.
diff --git a/docs/core/components/toolbar.component.md b/docs/core/components/toolbar.component.md
index 9d5bf4e8f0..2520f8e1c9 100644
--- a/docs/core/components/toolbar.component.md
+++ b/docs/core/components/toolbar.component.md
@@ -19,7 +19,6 @@ Simple container for headers, titles, actions and breadcrumbs.
     -   [Properties](#properties)
 -   [Details](#details)
     -   [Dropdown menu](#dropdown-menu)
-    -   [Custom color](#custom-color)
 -   [See also](#see-also)
 
 ## Basic Usage
@@ -74,7 +73,6 @@ pushed to the right by a spacer:
 
 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
-| color | [`ThemePalette`](https://github.com/angular/components/blob/master/src/material/core/common-behaviors/color.ts) |  | Toolbar color. Can be changed to empty value (default), `primary`, `accent` or `warn`. |
 | title | `string` | "" | Toolbar title. |
 
 ## Details
@@ -116,21 +114,6 @@ when you click the menu button:
 
 ![](../../docassets/images/adf-toolbar-04.png)
 
-### Custom color
-
-Besides the default color you can use 'primary', 'accent', or 'warn' values:
-
-You might also want to change colors to follow your application's color
-[theme](../../user-guide/theming.md):
-
-For example:
-
-![](../../docassets/images/adf-toolbar-05.png)
-
-![](../../docassets/images/adf-toolbar-06.png)
-
-![](../../docassets/images/adf-toolbar-07.png)
-
 ## See also
 
 -   [Toolbar Divider component](toolbar-divider.component.md)
diff --git a/docs/core/services/process-content.service.md b/docs/core/services/process-content.service.md
index 895f0b2064..1f335f490b 100644
--- a/docs/core/services/process-content.service.md
+++ b/docs/core/services/process-content.service.md
@@ -95,7 +95,7 @@ Let's say we have an upload button as follows:
 
 ```html
   <div>
-    <button mat-button color="accent" mat-mini-fab (click)="fileInput.click()">
+    <button mat-button mat-mini-fab (click)="fileInput.click()">
       <mat-icon>attachment</mat-icon>
     </button>
     <input hidden type="file" #fileInput (change)="onUploadFile($event)"/>
diff --git a/docs/user-guide/theming.md b/docs/user-guide/theming.md
index 543760da6f..1ff43f9f04 100644
--- a/docs/user-guide/theming.md
+++ b/docs/user-guide/theming.md
@@ -40,21 +40,6 @@ ADF is based on Angular Material library, which offers solutions for theming you
 
 If you already setup Angular Material theming in the application you use ADF in, there is no need for taking additional steps to theme ADF components - colors, typography and other parts of the theme will be taken from your setup.
 
-## Customizing deprecated theme variables
-
-Currently we have an amount of custom variables around components to mange libraries look and feel consistently and globally. 
-
-While they are getting deprecated to be replaced with [Angular Material system variables](https://material.angular.dev/guide/system-variables), for seamless integration with Angular Material's theming, you can provide values for those variables inside the `:root` element.
-
-For example:
-```css
-:root {
-    --theme-primary-color: --mat-sys-primary;
-    --theme-accent-color: --mat-sys-tertiary;
-}
-```
-**No new variables should be added to the project**
-
 [Reference list of overridable variables](https://github.com/Alfresco/alfresco-ng2-components/blob/29d341cc3b6a0842a776464027dcb1154875a8f0/lib/core/src/lib/styles/_index.scss#L25)
 
 ## Default reusable class
@@ -73,14 +58,14 @@ For example:
 
 Avoid adding css variables with names related to components:
 ```
---my-component-nr-xxx-background-color: mat.get-color-from-palette($primary, 50),  // bad
---theme-primary-color-50: mat.get-color-from-palette($primary, 50)  // good
+--my-component-nr-xxx-background-color: var(--mat-sys-primary),  // bad
+--theme-primary-color-50: var(--mat-sys-primary)  // good
 ```
 
 Avoid adding css variables with custom values, values should come from the theme:
 ```
 --new-variable: yellow  // bad
---new-variable: mat.get-color-from-palette($primary, 50), // good 
+--new-variable: var(--mat-sys-primary), // good 
 ```
 
 When styling components use Angular Material system variables (colors, typography, elevation):
diff --git a/lib/content-services/src/lib/document-list/components/document-list.component.html b/lib/content-services/src/lib/document-list/components/document-list.component.html
index 4da58e75f3..2344337253 100644
--- a/lib/content-services/src/lib/document-list/components/document-list.component.html
+++ b/lib/content-services/src/lib/document-list/components/document-list.component.html
@@ -75,7 +75,6 @@
                     id="adf-document-list-loading"
                     class="adf-document-list-loading-margin"
                     [attr.aria-label]="'ADF-DOCUMENT-LIST.LOADER_LABEL' | translate"
-                    [color]="'primary'"
                     [mode]="'indeterminate'" />
             </div>
             <ng-content select="adf-custom-loading-content-template" />
diff --git a/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.html b/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.html
index a0c55ef8a8..84ef4ea93c 100644
--- a/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.html
+++ b/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.html
@@ -1,6 +1,6 @@
 <mat-card class="adf-permission-card" id="adf-permission-manager-card">
     <div *ngIf="(permissionList.data$ | async) === null && permissionList.loading$ | async" class="adf-permission-loader">
-        <mat-progress-spinner [color]="'primary'" [mode]="'indeterminate'" />
+        <mat-progress-spinner [mode]="'indeterminate'" />
     </div>
 
     <ng-container *ngIf="permissionList.error$ | async">
diff --git a/lib/core/feature-flags/src/lib/components/flags/flags.component.html b/lib/core/feature-flags/src/lib/components/flags/flags.component.html
index 3279ebe037..af435e067f 100644
--- a/lib/core/feature-flags/src/lib/components/flags/flags.component.html
+++ b/lib/core/feature-flags/src/lib/components/flags/flags.component.html
@@ -39,7 +39,7 @@
     <ng-container matColumnDef="value">
       <th mat-header-cell class="adf-val-col header-cell" *matHeaderCellDef>
         <div class="adf-input-field-buttons-container">
-          <button *ngIf="showPlusButton$ | async" mat-icon-button title="{{'CORE.FEATURE-FLAGS.ADD_NEW' | translate}}" color="accent" (click)="onAddButtonClick()">
+          <button *ngIf="showPlusButton$ | async" mat-icon-button title="{{'CORE.FEATURE-FLAGS.ADD_NEW' | translate}}" (click)="onAddButtonClick()">
             <mat-icon class="material-icons-outlined" adf-icon="add_circle" />
           </button>
           <button *ngIf="inputValue" matSuffix mat-icon-button aria-label="Clear" (click)="onClearInput()" class="adf-clear-button">
diff --git a/lib/core/src/lib/form/components/form-base.component.ts b/lib/core/src/lib/form/components/form-base.component.ts
index 0b44e6e2f1..555e73a791 100644
--- a/lib/core/src/lib/form/components/form-base.component.ts
+++ b/lib/core/src/lib/form/components/form-base.component.ts
@@ -16,7 +16,6 @@
  */
 
 import { Directive, EventEmitter, Input, Output } from '@angular/core';
-import { ThemePalette } from '@angular/material/core';
 import { FormFieldModel, FormFieldValidator, FormModel, FormOutcomeEvent, FormOutcomeModel } from './widgets';
 import { isOutcomeButtonVisible } from './helpers/buttons-visibility';
 
@@ -43,7 +42,6 @@ export abstract class FormBaseComponent {
     static readonly START_PROCESS_OUTCOME_ID: string = FormModel.START_PROCESS_OUTCOME;
 
     static readonly CUSTOM_OUTCOME_ID: string = '$custom';
-    static readonly COMPLETE_BUTTON_COLOR: ThemePalette = 'primary';
 
     /**
      * @deprecated Use {@link FormOutcomeModel.COMPLETE_ACTION} instead.
@@ -153,10 +151,6 @@ export abstract class FormBaseComponent {
         return titleEnabled;
     }
 
-    getColorForOutcome(outcomeName: string): ThemePalette {
-        return outcomeName === FormOutcomeModel.COMPLETE_ACTION ? FormBaseComponent.COMPLETE_BUTTON_COLOR : null;
-    }
-
     isOutcomeButtonEnabled(outcome?: FormOutcomeModel): boolean {
         if (this.form.readOnly) {
             return false;
diff --git a/lib/core/src/lib/form/components/widgets/button/button.widget.html b/lib/core/src/lib/form/components/widgets/button/button.widget.html
index 4cbbc59f25..f8d59e111c 100644
--- a/lib/core/src/lib/form/components/widgets/button/button.widget.html
+++ b/lib/core/src/lib/form/components/widgets/button/button.widget.html
@@ -1,7 +1,6 @@
 <button
     mat-flat-button
     class="adf-button-widget__button"
-    [color]="'primary'"
     [matTooltip]="field?.tooltip"
     [matTooltipShowDelay]="tooltipShowDelay"
     [disabled]="field?.readOnly ?? false"
diff --git a/lib/core/src/lib/header/header.component.html b/lib/core/src/lib/header/header.component.html
index ca78789de4..5a0150c80b 100644
--- a/lib/core/src/lib/header/header.component.html
+++ b/lib/core/src/lib/header/header.component.html
@@ -1,6 +1,6 @@
 <ng-container [ngSwitch]="variant">
     <ng-container *ngSwitchCase="'minimal'">
-        <adf-toolbar [color]="color">
+        <adf-toolbar>
             <adf-toolbar-title>
                 <ng-container *ngTemplateOutlet="toolbarTitleContent" />
             </adf-toolbar-title>
@@ -11,13 +11,13 @@
     </ng-container>
 
     <ng-container *ngSwitchCase="'extended'">
-        <adf-toolbar [color]="color">
+        <adf-toolbar>
             <adf-toolbar-title>
                 <ng-container *ngTemplateOutlet="toolbarTitleContent" />
             </adf-toolbar-title>
             <ng-container *ngTemplateOutlet="toolbarActions" />
         </adf-toolbar>
-        <adf-toolbar [color]="color">
+        <adf-toolbar>
             <ng-container *ngTemplateOutlet="navbarTemplate" />
         </adf-toolbar>
     </ng-container>
diff --git a/lib/core/src/lib/header/header.component.md b/lib/core/src/lib/header/header.component.md
index 830d751c22..ae6b0d6860 100644
--- a/lib/core/src/lib/header/header.component.md
+++ b/lib/core/src/lib/header/header.component.md
@@ -12,7 +12,6 @@ Displaying a minimal header with a logo and navbar:
 <adf-header
     variant="minimal"
     headerHeight="64px"
-    color="primary"
     [logoSrc]="src"
     [logoAlt]="alt"
     [logoHeight]="logoHeight"
@@ -47,8 +46,7 @@ Displaying an extended header with toolbar actions:
 ```html
 <adf-header variant="extended" [logoSrc]="src" [title]="title" [navbarItems]="items">
     <div adf-toolbar-actions>
-        <mat-button variant="flat">Secondary</mat-button>
-        <mat-button variant="flat" color="accent">Primary</mat-button>
+        <mat-button variant="flat">Primary</mat-button>
 
         <adf-toolbar-divider></adf-toolbar-divider>
 
@@ -90,8 +88,7 @@ import { HeaderComponent } from '@alfresco/adf-core';
 | `logoAlt`      | `string`        |              | The alt text for the logo.                                 |
 | `logoHeight`   | `string`        | `36px`       | The height of the logo.                                    |
 | `logoWidth`    | `string`        | `logoHeight` | The width of the logo.                                     |
-| `title`        | `string`        |              | The title to display in the header.                        |
-| `color`        | `ThemePalette`  |              | The theme color palette for the header.                    |
+| `title`        | `string`        |              | The title to display in the header.                    |
 | `navbarItems`  | `NavbarItem[]`  | `[]`         | Navigation items to display in the header.                 |
 
 ## Theming
diff --git a/lib/core/src/lib/header/header.component.ts b/lib/core/src/lib/header/header.component.ts
index 1f34368308..3876a89488 100644
--- a/lib/core/src/lib/header/header.component.ts
+++ b/lib/core/src/lib/header/header.component.ts
@@ -17,7 +17,6 @@
 
 import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ThemePalette } from '@angular/material/core';
 import { TOOLBAR_DIRECTIVES } from '../toolbar';
 import { NavbarItem } from './navbar/navbar-item.component';
 import { NavbarComponent } from './navbar/navbar.component';
@@ -59,9 +58,6 @@ export class HeaderComponent {
     @Input()
     title: string;
 
-    @Input()
-    color: ThemePalette;
-
     @Input()
     navbarItems: NavbarItem[] = [];
 }
diff --git a/lib/core/src/lib/icon/icon.component.html b/lib/core/src/lib/icon/icon.component.html
index d83aebd455..9d2d6f5561 100644
--- a/lib/core/src/lib/icon/icon.component.html
+++ b/lib/core/src/lib/icon/icon.component.html
@@ -1,7 +1,7 @@
 <ng-content />
 
 @if (isSvg) {
-  <mat-icon [color]="color" [svgIcon]="value" aria-hidden="true" />
+  <mat-icon [svgIcon]="value" aria-hidden="true" />
 } @else {
-  <mat-icon [fontSet]="fontSet" [color]="color" aria-hidden="true">{{ value }}</mat-icon>
+  <mat-icon [fontSet]="fontSet" aria-hidden="true">{{ value }}</mat-icon>
 }
diff --git a/lib/core/src/lib/icon/icon.component.ts b/lib/core/src/lib/icon/icon.component.ts
index 453da6e891..84205ee37a 100644
--- a/lib/core/src/lib/icon/icon.component.ts
+++ b/lib/core/src/lib/icon/icon.component.ts
@@ -16,7 +16,6 @@
  */
 
 import { Component, Input, ViewEncapsulation, ChangeDetectionStrategy, inject, ElementRef, AfterContentInit } from '@angular/core';
-import { ThemePalette } from '@angular/material/core';
 import { MatIconModule } from '@angular/material/icon';
 import { ICON_ALIAS_MAP_TOKEN } from './icon-alias-map.token';
 
@@ -39,10 +38,6 @@ export class IconComponent implements AfterContentInit {
     private _value = DEFAULT_ICON_VALUE;
     private _isSvg = false;
 
-    /** Theme color palette for the component. */
-    @Input()
-    color: ThemePalette;
-
     /** Icon font set */
     @Input()
     fontSet: string;
diff --git a/lib/core/src/lib/layout/components/header/header.component.html b/lib/core/src/lib/layout/components/header/header.component.html
index 61ba8aec1d..7a7ddcb459 100644
--- a/lib/core/src/lib/layout/components/header/header.component.html
+++ b/lib/core/src/lib/layout/components/header/header.component.html
@@ -1,7 +1,6 @@
 <mat-toolbar
     class="adf-toolbar-container-row"
-    [color]="color"
-    [style.background-color]="color"
+    [style.background-color]="backgroundColor"
     [style.background-image]="backgroundImage ? 'url(' + backgroundImage + ')' : 'none'">
     <button
         *ngIf="showSidenavToggle && position === 'start'"
diff --git a/lib/core/src/lib/layout/components/header/header.component.spec.ts b/lib/core/src/lib/layout/components/header/header.component.spec.ts
index bc56e351bc..30686fe904 100644
--- a/lib/core/src/lib/layout/components/header/header.component.spec.ts
+++ b/lib/core/src/lib/layout/components/header/header.component.spec.ts
@@ -22,7 +22,6 @@ import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { UnitTestingUtils } from '../../../testing/unit-testing-utils';
 import { provideRouter } from '@angular/router';
-import { MatToolbar } from '@angular/material/toolbar';
 
 describe('HeaderLayoutComponent', () => {
     let loader: HarnessLoader;
@@ -57,15 +56,8 @@ describe('HeaderLayoutComponent', () => {
             expect(testingUtils.getInnerTextByCSS('.adf-app-title')).toEqual('TEST TITLE');
         });
 
-        it('should have assigned correct color on toolbar', async () => {
-            component.color = 'primary';
-            fixture.detectChanges();
-
-            expect(testingUtils.getByDirective(MatToolbar).componentInstance.color).toBe('primary');
-        });
-
         it('should change background color when custom is provided', async () => {
-            component.color = '#42f57e';
+            component.backgroundColor = '#42f57e';
             fixture.detectChanges();
 
             const host = await testingUtils.getMatToolbarHost();
diff --git a/lib/core/src/lib/layout/components/header/header.component.stories.ts b/lib/core/src/lib/layout/components/header/header.component.stories.ts
index 9cc0c33b33..515b0ab2fa 100644
--- a/lib/core/src/lib/layout/components/header/header.component.stories.ts
+++ b/lib/core/src/lib/layout/components/header/header.component.stories.ts
@@ -34,20 +34,20 @@ const meta: Meta<HeaderLayoutComponent> = {
         docs: {
             description: {
                 component: `This component displays a customizable header for Alfresco applications that can be reused.
-                 Use the input properties to configure the left side (title, button) and the primary color of the header.
+                 Use the input properties to configure the left side (title, button) and the background color of the header.
                  The right part of the header can contain other components which are transcluded in the header component.`
             }
         }
     },
     argTypes: {
-        color: {
+        backgroundColor: {
             control: 'radio',
-            options: ['primary', 'accent', 'warn', '#42f57e', undefined],
+            options: ['#42f57e', '#f54242', '#4287f5', 'var(--mat-sys-surface)'],
             description: `Background color for the header.
-                It can be any hex color code or one of the Material theme colors: 'primary', 'accent' or 'warn'`,
+                It can be any hex color code or CSS variable.`,
             table: {
-                type: { summary: 'ThemePalette' },
-                defaultValue: { summary: 'undefined' }
+                type: { summary: 'string' },
+                defaultValue: { summary: 'var(--mat-sys-surface)' }
             }
         },
         expandedSidenav: {
diff --git a/lib/core/src/lib/layout/components/header/header.component.ts b/lib/core/src/lib/layout/components/header/header.component.ts
index ec689271c2..1dc8b2fd60 100644
--- a/lib/core/src/lib/layout/components/header/header.component.ts
+++ b/lib/core/src/lib/layout/components/header/header.component.ts
@@ -15,9 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnInit, inject } from '@angular/core';
-import { ThemePalette } from '@angular/material/core';
-import { AppConfigService } from '../../../app-config/app-config.service';
+import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatButtonModule } from '@angular/material/button';
@@ -34,8 +32,6 @@ import { IconModule } from '../../../icon/icon.module';
     host: { class: 'adf-layout-header' }
 })
 export class HeaderLayoutComponent implements OnInit {
-    private readonly appConfigService = inject(AppConfigService);
-
     /** Title of the application. */
     @Input() title: string;
 
@@ -52,10 +48,9 @@ export class HeaderLayoutComponent implements OnInit {
     @Input() tooltip: string;
 
     /**
-     * Background color for the header. It can be any hex color code or one
-     * of the Material theme colors: 'primary', 'accent' or 'warn'.
+     * Background color for the header. It can be any hex color code or CSS variable.
      */
-    @Input() color: ThemePalette | string;
+    @Input() backgroundColor = 'var(--mat-sys-surface)';
 
     /** Path to a background image for the header. */
     @Input() backgroundImage = '';
@@ -84,11 +79,6 @@ export class HeaderLayoutComponent implements OnInit {
     }
 
     ngOnInit() {
-        const textColor = this.appConfigService.get<string | undefined>('headerTextColor');
-        if (textColor) {
-            document.documentElement.style.setProperty('--theme-header-text-color', textColor);
-        }
-
         if (!this.logo) {
             this.logo = './assets/images/logo.svg';
         }
diff --git a/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.stories.ts b/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.stories.ts
index 087df34e58..49e44bee03 100644
--- a/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.stories.ts
+++ b/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.stories.ts
@@ -23,7 +23,7 @@ import { IconModule } from '../../../icon/icon.module';
 
 type SidenavLayoutStoryArgs = SidenavLayoutComponent & {
     title?: string;
-    color?: 'primary' | 'accent' | 'warn';
+    backgroundColor?: string;
     clicked?: any;
 };
 
@@ -112,14 +112,14 @@ const meta: Meta<SidenavLayoutStoryArgs> = {
                 category: 'Header'
             }
         },
-        color: {
+        backgroundColor: {
             control: 'radio',
-            options: ['primary', 'accent', 'warn', undefined],
+            options: ['#42f57e', '#f54242', '#4287f5', 'var(--mat-sys-surface)'],
             description: `Background color for the header.
-                It can be any hex color code or one of the Material theme colors: 'primary', 'accent' or 'warn'`,
+                It can be any hex color code or CSS variable.`,
             table: {
-                type: { summary: 'ThemePalette' },
-                defaultValue: { summary: 'undefined' },
+                type: { summary: 'string' },
+                defaultValue: { summary: 'var(--mat-sys-surface)' },
                 category: 'Header'
             }
         },
@@ -157,7 +157,7 @@ export const SidenavLayout: Story = {
         <div class="adf-sidenav-layout-full-space">
             <adf-sidenav-layout-header>
                 <ng-template>
-                    <adf-layout-header [title]="title" [color]="color"></adf-layout-header>
+                    <adf-layout-header [title]="title" [backgroundColor]="backgroundColor"></adf-layout-header>
                 </ng-template>
             </adf-sidenav-layout-header>
 
diff --git a/lib/core/src/lib/notifications/components/notification-history.component.html b/lib/core/src/lib/notifications/components/notification-history.component.html
index aa067a1700..103f1d876c 100644
--- a/lib/core/src/lib/notifications/components/notification-history.component.html
+++ b/lib/core/src/lib/notifications/components/notification-history.component.html
@@ -8,7 +8,7 @@
     id="adf-notification-history-open-button"
     (menuOpened)="onMenuOpened()"
 >
-    <mat-icon aria-hidden="false" matBadge="&#8288;" [matBadgeHidden]="!notifications.length" class="adf-notification-history-menu_button-icon" matBadgeColor="accent" matBadgeSize="small" adf-icon="notifications" />
+    <mat-icon aria-hidden="false" matBadge="&#8288;" [matBadgeHidden]="!notifications.length" class="adf-notification-history-menu_button-icon" matBadgeSize="small" adf-icon="notifications" />
 </button>
 
 <mat-menu #menu="matMenu"
diff --git a/lib/core/src/lib/toolbar/toolbar.component.html b/lib/core/src/lib/toolbar/toolbar.component.html
index 16e73dcc23..4ded47fdc4 100644
--- a/lib/core/src/lib/toolbar/toolbar.component.html
+++ b/lib/core/src/lib/toolbar/toolbar.component.html
@@ -1,4 +1,4 @@
-<mat-toolbar class="adf-toolbar-container adf-toolbar-container-row" [color]="color">
+<mat-toolbar class="adf-toolbar-container adf-toolbar-container-row">
     <span class="adf-toolbar-title" *ngIf="title">{{ title | translate }}</span>
     <ng-content select="adf-toolbar-title" />
     <ng-content />
diff --git a/lib/core/src/lib/toolbar/toolbar.component.stories.ts b/lib/core/src/lib/toolbar/toolbar.component.stories.ts
index 48134f2479..2ad12bfb9c 100644
--- a/lib/core/src/lib/toolbar/toolbar.component.stories.ts
+++ b/lib/core/src/lib/toolbar/toolbar.component.stories.ts
@@ -40,15 +40,6 @@ const meta: Meta<ToolbarStoryArgs> = {
         })
     ],
     argTypes: {
-        color: {
-            control: 'radio',
-            options: ['primary', 'accent', 'warn', undefined],
-            description: 'Toolbar color.',
-            table: {
-                type: { summary: 'ThemePalette' },
-                defaultValue: { summary: 'undefined' }
-            }
-        },
         title: {
             control: 'text',
             description: 'Toolbar title.',
@@ -112,7 +103,7 @@ export const Toolbar: Story = {
     render: (args: ToolbarComponent & { anyContentProjection: boolean } & { toolbarDivider: boolean } & { toolbarTitle: boolean }) => ({
         props: args,
         template: `
-    <adf-toolbar color="${args.color}" title="${args.title}">
+    <adf-toolbar title="${args.title}">
         <ng-container *ngIf="${args.toolbarTitle}"><adf-toolbar-title>Projected Title</adf-toolbar-title></ng-container>
         <ng-container *ngIf="${args.anyContentProjection}">
             <span style="color:red">projected content</span>
diff --git a/lib/core/src/lib/toolbar/toolbar.component.ts b/lib/core/src/lib/toolbar/toolbar.component.ts
index 856c4c67f7..eea315b024 100644
--- a/lib/core/src/lib/toolbar/toolbar.component.ts
+++ b/lib/core/src/lib/toolbar/toolbar.component.ts
@@ -16,7 +16,6 @@
  */
 
 import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
-import { ThemePalette } from '@angular/material/core';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { TranslatePipe } from '@ngx-translate/core';
 import { NgIf } from '@angular/common';
@@ -34,8 +33,4 @@ export class ToolbarComponent {
     /** Toolbar title. */
     @Input()
     title: string = '';
-
-    /** Toolbar color. Can be changed to empty value (default), `primary`, `accent` or `warn`. */
-    @Input()
-    color: ThemePalette;
 }
diff --git a/lib/core/src/lib/viewer/components/viewer.component.html b/lib/core/src/lib/viewer/components/viewer.component.html
index 8e11eb011d..b1f8d1805a 100644
--- a/lib/core/src/lib/viewer/components/viewer.component.html
+++ b/lib/core/src/lib/viewer/components/viewer.component.html
@@ -16,9 +16,8 @@
                                 [attr.aria-label]="'ADF_VIEWER.ACTIONS.INFO' | translate"
                                 title="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}"
                                 data-automation-id="adf-toolbar-left-sidebar"
-                                [color]="showLeftSidebar ? 'accent' : null"
                                 (click)="toggleLeftSidebar()">
-                            <mat-icon adf-icon="info_outline" />
+                            <mat-icon [class.adf-viewer-toolbar-left-sidebar-icon]="showLeftSidebar" adf-icon="info_outline" />
                         </button>
                     </ng-container>
 
@@ -111,9 +110,8 @@
                             [attr.aria-label]="'ADF_VIEWER.ACTIONS.INFO' | translate"
                             title="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}"
                             data-automation-id="adf-toolbar-sidebar"
-                            [color]="showRightSidebar ? 'accent' : null"
                             (click)="toggleRightSidebar()">
-                        <mat-icon adf-icon="info_outline" />
+                        <mat-icon [class.adf-viewer-toolbar-right-sidebar-icon]="showRightSidebar" adf-icon="info_outline" />
                     </button>
 
                 </ng-container>
diff --git a/lib/core/src/lib/viewer/components/viewer.component.scss b/lib/core/src/lib/viewer/components/viewer.component.scss
index 70bad495d7..5b782beed6 100644
--- a/lib/core/src/lib/viewer/components/viewer.component.scss
+++ b/lib/core/src/lib/viewer/components/viewer.component.scss
@@ -15,6 +15,16 @@
         width: auto;
     }
 
+    &-toolbar {
+        &-left-sidebar-icon {
+            color: var(--mat-sys-primary);
+        }
+
+        &-right-sidebar-icon {
+            color: var(--mat-sys-secondary);
+        }
+    }
+
     &-main {
         width: 0;
     }
diff --git a/lib/insights/src/lib/analytics-process/components/analytics-generator.component.html b/lib/insights/src/lib/analytics-process/components/analytics-generator.component.html
index 3a53934514..a7f8840215 100644
--- a/lib/insights/src/lib/analytics-process/components/analytics-generator.component.html
+++ b/lib/insights/src/lib/analytics-process/components/analytics-generator.component.html
@@ -4,10 +4,9 @@
             mat-icon-button
             *ngFor="let report of reports; let idx = index"
             [title]="report.title"
-            [color]="isCurrent(idx) ? 'primary' : null"
             (click)="selectCurrent(idx)"
         >
-            <mat-icon>{{ report.icon }}</mat-icon>
+            <mat-icon [class.adf-report-icons--selected]="isCurrent(idx)">{{ report.icon }}</mat-icon>
         </button>
     </div>
     <div class="adf-clear-both"></div>
diff --git a/lib/insights/src/lib/analytics-process/components/analytics-generator.component.scss b/lib/insights/src/lib/analytics-process/components/analytics-generator.component.scss
index 0d1c7fdc81..19b2e5a079 100644
--- a/lib/insights/src/lib/analytics-process/components/analytics-generator.component.scss
+++ b/lib/insights/src/lib/analytics-process/components/analytics-generator.component.scss
@@ -10,6 +10,10 @@
 .adf-report-icons {
     margin: 20px 0;
     float: left;
+
+    &--selected {
+        color: var(--mat-sys-primary);
+    }
 }
 
 .adf-full-width {
diff --git a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html
index 291741c0bd..fe95e37114 100644
--- a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html
@@ -124,7 +124,6 @@
                                 @for (outcome of visibleOutcomes; track outcome.name) {
                                     <button
                                         [id]="'adf-form-' + outcome.name | formatSpace"
-                                        [color]="getColorForOutcome(outcome.name)"
                                         mat-button
                                         [disabled]="!isOutcomeButtonEnabled(outcome)"
                                         class="adf-cloud-form-custom-outcome-button"
diff --git a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.spec.ts
index 82918b8d80..d21acecf67 100644
--- a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.spec.ts
@@ -258,10 +258,6 @@ describe('FormCloudComponent', () => {
         expect(validationSection).toBeNull();
     });
 
-    it('should return primary color for complete button', () => {
-        expect(formComponent.getColorForOutcome('COMPLETE')).toBe('primary');
-    });
-
     it('should not enable outcome button when model missing', () => {
         expect(formComponent.isOutcomeButtonVisible(null, false)).toBeFalsy();
     });
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/upload/upload-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/upload/upload-cloud.widget.html
index b49a35ba20..6b8cb1a67d 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/upload/upload-cloud.widget.html
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/upload/upload-cloud.widget.html
@@ -41,7 +41,7 @@
         </div>
 
         <div *ngIf="(!hasFile || multipleOption) && !field.readOnly">
-            <button mat-raised-button color="primary" (click)="uploadFiles.click()" [title]="field.tooltip">
+            <button mat-raised-button (click)="uploadFiles.click()" [title]="field.tooltip">
                 {{ 'FORM.FIELD.UPLOAD' | translate }}<mat-icon adf-icon="file_upload" />
                 <input #uploadFiles [multiple]="multipleOption" type="file" [id]="field.form.nodeId" (change)="onFileChanged($event)" />
             </button>
diff --git a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.html b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.html
index 9ccfa33745..d33d1dc892 100644
--- a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.html
@@ -29,7 +29,6 @@
                 <mat-progress-spinner
                     *ngIf="!customLoadingContent"
                     class="adf-cloud-process-list-loading-margin"
-                    [color]="'primary'"
                     [mode]="'indeterminate'" />
                 <ng-content select="adf-custom-loading-content-template" />
             </ng-template>
diff --git a/lib/process-services-cloud/src/lib/task/task-list/components/service-task-list/service-task-list-cloud.component.html b/lib/process-services-cloud/src/lib/task/task-list/components/service-task-list/service-task-list-cloud.component.html
index 4827d3f7a8..9ec0733a21 100644
--- a/lib/process-services-cloud/src/lib/task/task-list/components/service-task-list/service-task-list-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/task/task-list/components/service-task-list/service-task-list-cloud.component.html
@@ -31,7 +31,6 @@
                 <ng-template>
                     <mat-progress-spinner
                         class="adf-cloud-task-list-loading-margin"
-                        [color]="'primary'"
                         [mode]="'indeterminate'" />
                 </ng-template>
             </adf-loading-content-template>
diff --git a/lib/process-services-cloud/src/lib/task/task-list/components/task-list/task-list-cloud.component.html b/lib/process-services-cloud/src/lib/task/task-list/components/task-list/task-list-cloud.component.html
index 4827d3f7a8..9ec0733a21 100644
--- a/lib/process-services-cloud/src/lib/task/task-list/components/task-list/task-list-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/task/task-list/components/task-list/task-list-cloud.component.html
@@ -31,7 +31,6 @@
                 <ng-template>
                     <mat-progress-spinner
                         class="adf-cloud-task-list-loading-margin"
-                        [color]="'primary'"
                         [mode]="'indeterminate'" />
                 </ng-template>
             </adf-loading-content-template>
diff --git a/lib/process-services/src/lib/attachment/process-attachment-list/process-attachment-list.component.html b/lib/process-services/src/lib/attachment/process-attachment-list/process-attachment-list.component.html
index 77fd487643..8ff2fb218e 100644
--- a/lib/process-services/src/lib/attachment/process-attachment-list/process-attachment-list.component.html
+++ b/lib/process-services/src/lib/attachment/process-attachment-list/process-attachment-list.component.html
@@ -27,7 +27,7 @@
     <adf-loading-content-template>
         <ng-template>
             <!--Add your custom loading template here-->
-            <mat-progress-spinner class="adf-attachment-list-loading-margin" [color]="'primary'" [mode]="'indeterminate'" />
+            <mat-progress-spinner class="adf-attachment-list-loading-margin" [mode]="'indeterminate'" />
         </ng-template>
     </adf-loading-content-template>
 
diff --git a/lib/process-services/src/lib/attachment/task-attachment-list/task-attachment-list.component.html b/lib/process-services/src/lib/attachment/task-attachment-list/task-attachment-list.component.html
index 88f6aeff4a..f5f345d1d9 100644
--- a/lib/process-services/src/lib/attachment/task-attachment-list/task-attachment-list.component.html
+++ b/lib/process-services/src/lib/attachment/task-attachment-list/task-attachment-list.component.html
@@ -25,7 +25,7 @@
             <adf-loading-content-template>
                 <ng-template>
                 <!--Add your custom loading template here-->
-                    <mat-progress-spinner class="adf-attachment-list-loading-margin" [color]="'primary'" [mode]="'indeterminate'" />
+                    <mat-progress-spinner class="adf-attachment-list-loading-margin" [mode]="'indeterminate'" />
                 </ng-template>
             </adf-loading-content-template>
 </adf-datatable>
diff --git a/lib/process-services/src/lib/form/form.component.html b/lib/process-services/src/lib/form/form.component.html
index 9db1709b4c..0aa280d48e 100644
--- a/lib/process-services/src/lib/form/form.component.html
+++ b/lib/process-services/src/lib/form/form.component.html
@@ -34,7 +34,7 @@
         <mat-card-actions *ngIf="form.hasOutcomes()" class="adf-form-mat-card-actions" align="end">
             <ng-content select="adf-form-custom-outcomes" />
             <button [id]="'adf-form-'+ outcome.name  | formatSpace" *ngFor="let outcome of form.outcomes"
-                [color]="getColorForOutcome(outcome.name)" mat-button [disabled]="!isOutcomeButtonEnabled(outcome)"
+                mat-button [disabled]="!isOutcomeButtonEnabled(outcome)"
                 [class.adf-form-hide-button]="!isOutcomeButtonVisible(outcome, form.readOnly)"
                 (click)="onOutcomeClicked(outcome)">
                 {{outcome.name | translate | uppercase }}
diff --git a/lib/process-services/src/lib/form/form.component.spec.ts b/lib/process-services/src/lib/form/form.component.spec.ts
index 106bda3f5c..3517d26d47 100644
--- a/lib/process-services/src/lib/form/form.component.spec.ts
+++ b/lib/process-services/src/lib/form/form.component.spec.ts
@@ -154,10 +154,6 @@ describe('FormComponent', () => {
         expect(formComponent.isTitleEnabled()).toBeFalsy();
     });
 
-    it('should return primary color for complete button', () => {
-        expect(formComponent.getColorForOutcome('COMPLETE')).toBe('primary');
-    });
-
     it('should not enable outcome button when model missing', () => {
         expect(formComponent.isOutcomeButtonVisible(null, false)).toBeFalsy();
     });