diff --git a/packages/design-system/src/css/dialog.scss b/packages/design-system/src/css/dialog.scss
index 7abf11c46e3bb..69f99fa80ee57 100644
--- a/packages/design-system/src/css/dialog.scss
+++ b/packages/design-system/src/css/dialog.scss
@@ -38,7 +38,7 @@
 	border-radius: var(--border-radius-small);
 	box-shadow: var.$dialog-box-shadow;
 	box-sizing: border-box;
-	width: 50%;
+	width: var(#{getCssVarName('dialog-width')}, 50%);
 
 	@include mixins.when(fullscreen) {
 		width: 100%;
diff --git a/packages/design-system/src/utils.scss b/packages/design-system/src/utils.scss
index f81567d968656..7a951fe126cac 100644
--- a/packages/design-system/src/utils.scss
+++ b/packages/design-system/src/utils.scss
@@ -5,3 +5,18 @@
 @function saturation($h, $s, $l, $saturation) {
 	@return hsl(var(#{$h}), calc(var(#{$s}) + #{$saturation}), var(#{$l}));
 }
+
+@function joinVarName($list) {
+  $name: '--' + 'el';
+  @each $item in $list {
+    @if $item != '' {
+      $name: $name + '-' + $item;
+    }
+  }
+  @return $name;
+}
+
+// getCssVarName('button', 'text-color') => '--el-button-text-color'
+@function getCssVarName($args...) {
+  @return joinVarName($args);
+}
diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index c185ca03ba3a5..01760505b0d7f 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -254,7 +254,7 @@ export default defineComponent({
 			this.postAuthenticateDone = true;
 		},
 	},
-	async mounted() {
+	async created() {
 		this.setTheme();
 		await this.initialize();
 		this.logHiringBanner();