diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts
index 595da98b54..f73e4b7241 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts
@@ -56,7 +56,7 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement {
 			}
 			.trackerDisabled::after {
 				content: '';
-				background-color: rgba(250, 250, 250, 0.7);
+				background-color: var(--uui-color-disabled);
 				position: absolute;
 				border-radius: 2px;
 				left: 0;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-settings.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-settings.element.ts
index ab1e999c0d..ce43b2b8cd 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-settings.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-settings.element.ts
@@ -21,7 +21,7 @@ export class UmbModalLayoutFieldsSettingsElement extends UmbModalLayoutElement<U
 				display: flex;
 				flex-direction: column;
 				height: 100%;
-				background-color: white;
+				background-color: var(--uui-color-surface);
 				box-shadow: var(--uui-shadow-depth-1, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24));
 				border-radius: var(--uui-border-radius);
 				padding: var(--uui-size-space-5);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-viewer.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-viewer.element.ts
index be77bffe68..233f1dc28e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-viewer.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-viewer.element.ts
@@ -16,7 +16,7 @@ export class UmbModalLayoutFieldsViewerElement extends UmbModalLayoutElement<Sea
 				display: flex;
 				flex-direction: column;
 				height: 100%;
-				background-color: white;
+				background-color: var(--uui-color-surface);
 				box-shadow: var(--uui-shadow-depth-1, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24));
 				border-radius: var(--uui-border-radius);
 				padding: var(--uui-size-space-5);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-action.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-action.element.ts
index 41c98164f8..d05ba05b10 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-action.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-action.element.ts
@@ -17,7 +17,7 @@ export class UmbDashboardHealthCheckActionElement extends UmbLitElement {
 				margin: var(--uui-size-space-4) 0;
 				display: block;
 				border-radius: var(--uui-border-radius);
-				background-color: #eee;
+				background-color: var(--uui-color-surface-alt);
 			}
 			form {
 				margin: 0;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/shared/property-action-menu/property-action-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/shared/property-action-menu/property-action-menu.element.ts
index 8988fad47c..585629cb9f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/shared/property-action-menu/property-action-menu.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/shared/property-action-menu/property-action-menu.element.ts
@@ -29,14 +29,14 @@ export class UmbPropertyActionMenuElement extends UmbLitElement {
 			}
 
 			#dropdown {
-				background-color: white;
+				background-color: var(--uui-color-surface);
 				border-radius: var(--uui-border-radius);
 				width: 100%;
 				height: 100%;
 				box-sizing: border-box;
 				box-shadow: var(--uui-shadow-depth-3);
 				min-width: 200px;
-				color: black; /* Change to variable */
+				color: var(--uui-color-text);
 			}
 		`,
 	];
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts
index f47294058e..f5ce3cc2c7 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts
@@ -29,7 +29,7 @@ export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<UmbMo
 				display: flex;
 				flex-direction: column;
 				height: 100%;
-				background-color: white;
+				background-color: var(--uui-color-surface);
 				box-shadow: var(--uui-shadow-depth-1, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24));
 				border-radius: var(--uui-border-radius);
 				padding: var(--uui-size-space-5);
@@ -74,7 +74,7 @@ export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<UmbMo
 			#icon-selection .icon:focus,
 			#icon-selection .icon:hover,
 			#icon-selection .icon.selected {
-				background-color: rgba(0, 0, 0, 0.1);
+				background-color: var(--uui-color-selected);
 			}
 
 			uui-button {