diff --git a/src/components/CommandCard.vue b/src/components/CommandCard.vue
index dc65a25..0e4d6aa 100644
--- a/src/components/CommandCard.vue
+++ b/src/components/CommandCard.vue
@@ -119,6 +119,6 @@ export default {
 }
 
 .card-wrapper-hover {
-  transform: scale(1.02);
+  transform: translateY(-1px);
 }
 </style>
diff --git a/src/components/quickcommandUI/QuickCommand.vue b/src/components/quickcommandUI/QuickCommand.vue
index f4b7846..8395b4e 100644
--- a/src/components/quickcommandUI/QuickCommand.vue
+++ b/src/components/quickcommandUI/QuickCommand.vue
@@ -370,10 +370,10 @@ export default {
 
 <style>
 .quickcommand-ui.q-card {
-  background-color: #f4f4f4;
+  background-color: var(--utools-bright-bg);
 }
 
 .body--dark .quickcommand-ui.q-card {
-  background-color: var(--q-dark-page);
+  background-color: var(--utools-dark-bg);
 }
 </style>
diff --git a/src/css/app.css b/src/css/app.css
index 215a42d..696f982 100644
--- a/src/css/app.css
+++ b/src/css/app.css
@@ -1,16 +1,20 @@
 /* app global css */
 :root {
+  --utools-bright-bg: #f4f4f4;
+  --utools-bright-font-color: #333;
+  --utools-dark-bg: #303133;
+  --utools-dark-font-color: #fff;
   --q-dark: #464646;
-  --q-dark-page: #303133;
+  --q-dark-page: var(--utools-dark-bg);
 }
 
 .q-card--dark {
-  background: var(--q-dark-page);
+  background: var(--utools-dark-bg);
 }
 
 body {
-  background: #f4f4f4;
-  color: #333;
+  background: var(--utools-bright-bg);
+  color: var(--utools-bright-font-color);
 }
 
 /* Monaco Editor 调整行号栏样式 */
diff --git a/src/pages/ConfigurationPage.vue b/src/pages/ConfigurationPage.vue
index f787240..37b1fc8 100644
--- a/src/pages/ConfigurationPage.vue
+++ b/src/pages/ConfigurationPage.vue
@@ -39,7 +39,7 @@
     <transition name="slide">
       <div v-if="isEditorShow" class="editor-container">
         <component
-          :is="commandEditorAction.data.component"
+          :is="commandEditorAction.component"
           :action="commandEditorAction"
           @editorEvent="editorEvent"
           :allQuickCommandTags="allQuickCommandTags"
@@ -284,6 +284,7 @@ export default {
       this.commandEditorAction = {
         type: "edit",
         data: window.lodashM.cloneDeep(command),
+        component: "CommandEditor",
       };
       this.isEditorShow = true;
     },
@@ -421,9 +422,8 @@ export default {
     addNewCommand(component = "CommandEditor") {
       this.commandEditorAction = {
         type: "new",
-        data: {
-          component,
-        },
+        data: {},
+        component,
       };
       this.isEditorShow = true;
     },
@@ -518,8 +518,7 @@ export default {
 }
 
 .editor-container {
-  color: black;
-  background: white;
+  color: var(--utools-bright-font-color);
   overflow: hidden;
   position: fixed;
   top: 0;
@@ -527,12 +526,12 @@ export default {
   right: 0;
   bottom: 0;
   z-index: 5000;
-  background: var(--q-page-background);
+  background: var(--utools-bright-bg);
 }
 
 .body--dark .editor-container {
-  color: white;
-  background: var(--q-dark-page);
+  color: var(--utools-dark-font-color);
+  background: var(--utools-dark-bg);
 }
 
 /* 编辑器容器动画 */