diff --git a/packages/web-component-designer/src/elements/helper/contextMenu/ContextMenu.ts b/packages/web-component-designer/src/elements/helper/contextMenu/ContextMenu.ts
index 75d8d691..d576ed07 100644
--- a/packages/web-component-designer/src/elements/helper/contextMenu/ContextMenu.ts
+++ b/packages/web-component-designer/src/elements/helper/contextMenu/ContextMenu.ts
@@ -26,7 +26,10 @@ export class ContextMenu implements IContextMenu {
 		transform-origin: top left;
 		padding: 0;
 		z-index: 2147483647;
-		color: black;
+		color: var(--context-menu-color, black);
+		font-family: var(--context-menu-font-family, inherit);
+		font-size: var(--context-menu-font-size, inherit);
+		font-weight: var(--context-menu-font-weight, inherit);
 	  }
 	  
 	  .context_menu.context_menu_display {
@@ -45,11 +48,12 @@ export class ContextMenu implements IContextMenu {
 	  
 	  .context_menu ul {
 		list-style-type: none;
-		padding: 3px;
+		padding: var(--context-menu-padding, 3px);
 		margin: 0;
-    border: none;
-		background-color: #f5f7f7;
-		box-shadow: 0 0 5px #333;
+    border: var(--context-menu-border, none);
+		border-radius: var(--context-menu-border-radius, 0);
+		background-color: var(--context-menu-background, #f5f7f7);
+		box-shadow: var(--context-menu-shadow, 0 0 5px #333);
     max-inline-size: calc(100vw - 8px);
     max-block-size: calc(100vh - 8px);
     overflow: auto;
@@ -60,12 +64,12 @@ export class ContextMenu implements IContextMenu {
     .context_menu ul[popover] {
     inset: auto;
     margin: 0;
-    border: none;
+    border: var(--context-menu-border, none);
+    border-radius: var(--context-menu-border-radius, 0);
     }
 	  
 	  .context_menu li {
-		padding: 0;
-		padding-right: 1.7em;
+		padding: var(--context-menu-item-padding-y, 0) 1.7em var(--context-menu-item-padding-y, 0) 0;
 		cursor: pointer;
 		white-space: nowrap;
 		display: flex;
@@ -73,18 +77,18 @@ export class ContextMenu implements IContextMenu {
 	  }
 	  
 	  .context_menu li:hover {
-		background-color: #bbb;
+		background-color: var(--context-menu-hover-background, #bbb);
 	  }
 	  
-	  .context_menu li .context_menu_icon_span {	
-		width: 28px;
+	  .context_menu li .context_menu_icon_span {
+		width: var(--context-menu-icon-column-width, 28px);
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
 	  }
 
-	  .context_menu li .context_menu_icon_span img {	
-		height: 18px;
+	  .context_menu li .context_menu_icon_span img {
+		height: var(--context-menu-icon-size, 18px);
 	  }
 
 	  .context_menu li .context_menu_text {	
@@ -122,7 +126,7 @@ export class ContextMenu implements IContextMenu {
 	  }
 	  
 	  .context_menu li.context_menu_divider {
-		border-bottom: 1px solid #aaa;
+		border-bottom: 1px solid var(--context-menu-divider-color, #aaa);
 		margin: 5px;
 		padding: 0;
 		cursor: default;
@@ -133,7 +137,7 @@ export class ContextMenu implements IContextMenu {
 	  }
 	  
 	  .context_menu li[disabled=""] {
-		color: #777;
+		color: var(--context-menu-disabled-color, #777);
 		cursor: default;
 	  }
 	  
@@ -142,7 +146,7 @@ export class ContextMenu implements IContextMenu {
 	  }
 	  
 	  .context_menu li.context_menu_marked {
-		background-color: #5ebdec;
+		background-color: var(--context-menu-marked-background, #5ebdec);
 	  }`;
 
   static count = 0;