diff --git a/api/js/etemplate/Et2Avatar/cropperStyles.ts b/api/js/etemplate/Et2Avatar/cropperStyles.ts
index 05d96b2371..1290e5eabb 100644
--- a/api/js/etemplate/Et2Avatar/cropperStyles.ts
+++ b/api/js/etemplate/Et2Avatar/cropperStyles.ts
@@ -55,12 +55,12 @@ export const cropperStyles = css`
 }
 
 .cropper-drag-box {
-	background-color: #fff;
+	background-color: var(--sl-color-neutral-1000);
 	opacity: 0;
 }
 
 .cropper-modal {
-	background-color: #000;
+	background-color: var(--sl-color-neutral-0);
 	opacity: 0.5;
 }
 
@@ -68,7 +68,7 @@ export const cropperStyles = css`
 	display: block;
 	height: 100%;
 	outline: 1px solid #39f;
-	outline-color: rgba(51, 153, 255, 0.75);
+	outline-color: var(--sl-color-primary-600);
 	overflow: hidden;
 	width: 100%;
 }
@@ -110,7 +110,7 @@ export const cropperStyles = css`
 
 .cropper-center::before,
 .cropper-center::after {
-	background-color: #eee;
+	background-color: var(--sl-color-neutral-100);
 	content: ' ';
 	display: block;
 	position: absolute;
@@ -141,13 +141,13 @@ export const cropperStyles = css`
 }
 
 .cropper-face {
-	background-color: #fff;
+	background-color: var(--sl-color-neutral-1000);
 	left: 0;
 	top: 0;
 }
 
 .cropper-line {
-	background-color: #39f;
+	background-color: var(--sl-color-primary-600);
 }
 
 .cropper-line.line-e {
@@ -179,7 +179,7 @@ export const cropperStyles = css`
 }
 
 .cropper-point {
-	background-color: #39f;
+	background-color: var(--sl-color-primary-600);
 	height: 5px;
 	opacity: 0.75;
 	width: 5px;
@@ -263,7 +263,7 @@ export const cropperStyles = css`
 }
 
 .cropper-point.point-se::before {
-	background-color: #39f;
+	background-color: var(--sl-color-primary-600);
 	bottom: -50%;
 	content: ' ';
 	display: block;
diff --git a/api/js/etemplate/Et2Description/Et2Description.ts b/api/js/etemplate/Et2Description/Et2Description.ts
index f8d9972acb..933e64ece9 100644
--- a/api/js/etemplate/Et2Description/Et2Description.ts
+++ b/api/js/etemplate/Et2Description/Et2Description.ts
@@ -45,7 +45,7 @@ export class Et2Description extends Et2Widget(LitElement) implements et2_IDetach
 				}
 			::slotted(a) {
 				cursor: pointer;
-				color: #26537c;
+				color: var(--sl-color-primary-700);
 				text-decoration: none;
 			  	display: inherit;
 			}`
diff --git a/api/js/etemplate/Et2Dialog/Et2Dialog.ts b/api/js/etemplate/Et2Dialog/Et2Dialog.ts
index 77b7e4c3f3..dec9974ad5 100644
--- a/api/js/etemplate/Et2Dialog/Et2Dialog.ts
+++ b/api/js/etemplate/Et2Dialog/Et2Dialog.ts
@@ -210,7 +210,7 @@ export class Et2Dialog extends Et2Widget(SlDialog)
 				}
 				.dialog__panel {
 					border: 1px solid silver;
-					box-shadow: -2px 1px 9px 3px #b4b4b4;
+					box-shadow: -2px 1px 9px 3px var(--sl-color-gray-400);
 					min-width: 250px;
 					touch-action: none;
 				}
@@ -223,7 +223,7 @@ export class Et2Dialog extends Et2Widget(SlDialog)
 					user-select: none;
 				}
 				.dialog__close {
-					background-color: #f3f3f3;
+					background-color: var(--sl-color-gray-100);
 					padding: 0;
 					order: 99;
 				}
@@ -234,7 +234,7 @@ export class Et2Dialog extends Et2Widget(SlDialog)
 					justify-content: flex-start;
 					align-items: stretch;
 					gap: 5px;
-					border-top: 1px solid silver;
+					border-top: 1px solid var(--sl-color-gray-400);
 					margin-top: 0.5em;
 				}
 
diff --git a/api/js/etemplate/Et2Email/Et2Email.styles.ts b/api/js/etemplate/Et2Email/Et2Email.styles.ts
index 400cf5997c..35e9cedfe7 100644
--- a/api/js/etemplate/Et2Email/Et2Email.styles.ts
+++ b/api/js/etemplate/Et2Email/Et2Email.styles.ts
@@ -195,7 +195,7 @@ export default css`
 
 	:host([readonly][rows]) .hover__popup::part(popup) {
 		z-index: var(--sl-z-index-dropdown);
-		background-color: white;
+		background-color: var(--sl-color-neutral-0);
 		display: flex;
 		flex-wrap: wrap;
 
diff --git a/api/js/etemplate/Et2Select/Et2Select.ts b/api/js/etemplate/Et2Select/Et2Select.ts
index 3dd207617f..cd61f51190 100644
--- a/api/js/etemplate/Et2Select/Et2Select.ts
+++ b/api/js/etemplate/Et2Select/Et2Select.ts
@@ -212,7 +212,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
 
 				:host([readonly][multiple][rows]) .hover__popup::part(popup) {
 					z-index: var(--sl-z-index-dropdown);
-					background-color: white;
+					background-color: var(--sl-color-neutral-0);
 				}
 
 				:host([ readonly ][ multiple ][ rows ]) .hover__popup .select__tags {
diff --git a/api/js/etemplate/Et2Select/SearchMixin.ts b/api/js/etemplate/Et2Select/SearchMixin.ts
index 5101542cf0..01d49413ad 100644
--- a/api/js/etemplate/Et2Select/SearchMixin.ts
+++ b/api/js/etemplate/Et2Select/SearchMixin.ts
@@ -172,7 +172,7 @@ export const Et2WithSearchMixin = dedupeMixin(<T extends Constructor<LitElement>
 					margin-left: 0px;
 					height: var(--sl-input-height-medium);
 					width: 100%;
-					background-color: white;
+					  background-color: var(--sl-color-neutral-0);
 					z-index: var(--sl-z-index-dropdown);
 				  }
 
diff --git a/api/js/etemplate/Et2Tree/Et2Tree.ts b/api/js/etemplate/Et2Tree/Et2Tree.ts
index 900a3bb54a..e7d06db87a 100644
--- a/api/js/etemplate/Et2Tree/Et2Tree.ts
+++ b/api/js/etemplate/Et2Tree/Et2Tree.ts
@@ -249,21 +249,17 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement)
 					text-overflow: ellipsis;
 				}
 
-				sl-tree-item {
-					background-color: white;
-				}
-
 				sl-tree-item.drop-hover {
-					background-color: #0a5ca5;
+					background-color: var(--primary-background-color);
 				}
 
 				sl-tree-item.drop-hover sl-tree-item {
-					background-color: white;
+					background-color: var(--sl-color-neutral-1000);
 				}
 
 				sl-badge::part(base) {
 
-					background-color: rgb(130, 130, 130);
+					background-color: var(--sl-color-neutral-500);
 					font-size: 0.75em;
 					font-weight: 700;
 					position: absolute;
diff --git a/api/js/etemplate/Et2Url/Et2UrlReadonly.ts b/api/js/etemplate/Et2Url/Et2UrlReadonly.ts
index 582ad893d7..d5e53bdab7 100644
--- a/api/js/etemplate/Et2Url/Et2UrlReadonly.ts
+++ b/api/js/etemplate/Et2Url/Et2UrlReadonly.ts
@@ -25,7 +25,7 @@ export class Et2UrlReadonly extends Et2Description
 			  
 			a {
 				cursor: pointer;
-				color: #26537c !important;
+				color: var(--primary-background-color) !important;
 			    text-decoration: none !important;
 			}`
 		];
diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css
index 2e35748a27..5a17138b03 100644
--- a/api/templates/default/etemplate2.css
+++ b/api/templates/default/etemplate2.css
@@ -33,6 +33,7 @@
  * @see http://getbem.com/naming/ for what inspired naming convention
  */
 :root {
+	--primary-color: #26537C;
     --primary-background-color: #4177a2;
     --highlight-background-color: rgba(153, 204, 255, .4);