diff --git a/src/App.vue b/src/App.vue
index 1f4996a..42ba10a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,7 +13,8 @@ export default defineComponent({
   data() {
     return {
       setCssVar: setCssVar,
-    };
+
+};
   },
   computed: {},
   created: function () {
@@ -87,4 +88,19 @@ export default defineComponent({
   transform: translateY(-5px);
   filter: drop-shadow(2px 1px 5px grey);
 }
+
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: rgba(194, 194, 194, 0.4);
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 10px;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+}
 </style>
diff --git a/src/components/quickcommandUI/SelectList.vue b/src/components/quickcommandUI/SelectList.vue
index 346c864..a99e936 100644
--- a/src/components/quickcommandUI/SelectList.vue
+++ b/src/components/quickcommandUI/SelectList.vue
@@ -71,8 +71,6 @@ export default {
       itemHeight: 50,
       lazyItemSize: 50,
       searchWords: "",
-      scrollBarThumbColor: this.$q.dark.isActive ? "#505050" : "#c1c1c0",
-      scrollBarTrackColor: this.$q.dark.isActive ? "#303030" : "#fffffe",
     };
   },
   mounted() {
@@ -191,21 +189,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-::-webkit-scrollbar {
-  width: 6px;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  background: v-bind(scrollBarThumbColor);
-}
-
-::-webkit-scrollbar-track {
-  border-radius: 10px;
-  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  background: v-bind(scrollBarTrackColor);
-}
-</style>