diff --git a/src/App.vue b/src/App.vue
index 255d0c5..6e291e2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -186,6 +186,14 @@ export default defineComponent({
 .q-card--dark {
   background: var(--q-dark-page);
 }
+.container {
+  color: black;
+  background: white;
+}
+.body--dark .container {
+  color: white;
+  background: var(--q-dark-page);
+}
 .q-tooltip {
   font-size: 11px;
 }
diff --git a/src/components/CommandCard.vue b/src/components/CommandCard.vue
index d040d41..37eebf8 100644
--- a/src/components/CommandCard.vue
+++ b/src/components/CommandCard.vue
@@ -103,9 +103,6 @@
         @click="handleCardClick"
         v-ripple
         :class="{ [`text-${disabledColor}`]: !isCommandActivated }"
-        :style="{
-          background: cardBgColor,
-        }"
       >
         <q-card-section>
           <!-- logo -->
@@ -317,9 +314,6 @@ export default {
     disabledColor() {
       return this.$q.dark.isActive ? "grey-6" : "grey-5";
     },
-    cardBgColor() {
-      return this.$q.dark.isActive ? "#ffffff08" : "#00000008";
-    },
     featureCode() {
       return this.commandInfo.features.code;
     },
@@ -425,6 +419,10 @@ export default {
 .q-card {
   cursor: pointer;
   user-select: none;
+  background: #00000008;
+}
+.q-card--dark {
+  background: #ffffff08;
 }
 .q-badge {
   font-size: 15px;
diff --git a/src/components/CommandEditor.vue b/src/components/CommandEditor.vue
index ce5132c..606771e 100644
--- a/src/components/CommandEditor.vue
+++ b/src/components/CommandEditor.vue
@@ -1,11 +1,5 @@
 <template>
-  <div
-    class="absolute-full"
-    :style="{
-      background: $q.dark.isActive ? 'var(--q-dark-page)' : '#ffffff',
-      overflow: 'hidden',
-    }"
-  >
+  <div class="absolute-full container" style="overflow: 'hidden'">
     <!-- 命令设置栏 -->
     <CommandSideBar
       ref="sidebar"
@@ -25,6 +19,7 @@
       :style="{
         left: showSidebar ? sideBarWidth + 'px' : 65,
         zIndex: 1,
+        transition: '0.3s',
       }"
     >
       <div class="row" v-show="languageBarHeight">
@@ -34,12 +29,7 @@
             flat
             dense
             color="primary"
-            :style="{
-              background: $q.dark.isActive
-                ? 'rgba(255, 255, 255, 0.07)'
-                : 'rgba(0, 0, 0, 0.05)',
-              borderRadius: '0',
-            }"
+            class="menuBtn"
             icon="menu"
             @click="toggleSideBarWidth"
             ><q-tooltip
@@ -402,3 +392,13 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.menuBtn {
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 0;
+}
+.body--dark .menuBtn {
+  background: rgba(255, 255, 255, 0.07);
+}
+</style>
diff --git a/src/components/MonacoEditor.vue b/src/components/MonacoEditor.vue
index 377ec2e..a14ed91 100644
--- a/src/components/MonacoEditor.vue
+++ b/src/components/MonacoEditor.vue
@@ -37,7 +37,6 @@ export default {
       editor: null,
       value: null,
       wordWrap: "off",
-      shortCutKeyBg: this.$q.dark.isActive ? "#262626" : "#f3f4f6",
       shortCuts: [
         ["保存", cmdCtrlKey, "S"],
         ["运行", cmdCtrlKey, "B"],
@@ -52,9 +51,6 @@ export default {
     rawEditor() {
       return toRaw(this.editor);
     },
-    isDark() {
-      return this.$q.dark.isActive;
-    },
   },
   props: {
     placeholder: Boolean,
@@ -169,7 +165,7 @@ export default {
       });
     },
     setEditorTheme() {
-      monaco.editor.setTheme(this.isDark ? "vs-dark" : "vs");
+      monaco.editor.setTheme(this.$q.dark.isActive ? "vs-dark" : "vs");
     },
     getEditorValue() {
       return this.rawEditor.getValue();
@@ -269,10 +265,13 @@ export default {
   user-select: none;
 }
 .shortcut-key {
-  background-color: v-bind(shortCutKeyBg);
+  background-color: #f3f4f6;
   border-radius: 0.25rem;
   margin-left: 0.5rem;
   padding-left: 0.25rem;
   padding-right: 0.25rem;
 }
+.body--dark .shortcut-key {
+  background-color: #262626;
+}
 </style>
diff --git a/src/components/quickcommandUI/SelectList.vue b/src/components/quickcommandUI/SelectList.vue
index 67b7c4c..dd362ef 100644
--- a/src/components/quickcommandUI/SelectList.vue
+++ b/src/components/quickcommandUI/SelectList.vue
@@ -228,7 +228,7 @@ export default {
 .item-selected {
   background: #dfe2e6;
 }
-.item-selected.q-item--dark {
+.body--dark .item-selected {
   background: #515151;
 }
 </style>
diff --git a/src/components/quickcommandUI/TextArea.vue b/src/components/quickcommandUI/TextArea.vue
index 2b95406..6d43d46 100644
--- a/src/components/quickcommandUI/TextArea.vue
+++ b/src/components/quickcommandUI/TextArea.vue
@@ -4,14 +4,13 @@
       v-model="result"
       :placeholder="options.placeholder"
       autofocus
-      class="fixed"
+      class="fixed container"
       :style="{
         top: 0,
         bottom: 0,
         left: 0,
         right: 0,
         background: '#00000000',
-        color: $q.dark.isActive ? 'white' : 'black',
         fontSize: '16px',
         outline: 'none',
         border: '3px solid #3577cb',
diff --git a/src/pages/ShareCenterPage.vue b/src/pages/ShareCenterPage.vue
index 13faaf3..5fbda86 100644
--- a/src/pages/ShareCenterPage.vue
+++ b/src/pages/ShareCenterPage.vue
@@ -7,13 +7,7 @@
         v-for="count in currentPageCounts"
         :key="count"
       >
-        <q-card
-          class="my-card"
-          :style="{
-            padding: '8px',
-            background: $q.dark.isActive ? '#ffffff08' : '#00000008',
-          }"
-        >
+        <q-card>
           <q-item v-if="loading">
             <q-item-section avatar>
               <q-skeleton square width="48px" height="48px" animation="fade" />
@@ -269,6 +263,11 @@ export default {
 <style scoped>
 .q-card {
   user-select: none;
+  padding: 8px;
+  background: #00000008;
+}
+.q-card--dark {
+  background: #ffffff08;
 }
 .tag {
   background: var(--q-primary);
@@ -282,7 +281,7 @@ export default {
 }
 .wrapper:hover {
   transition: 0.5s;
-  transform: translateY(-1px);
+  transform: scale(0.97);
   filter: drop-shadow(1px 1px 5px #0000008e);
 }
 </style>