diff --git a/src/App.vue b/src/App.vue
index b013ec3..5356b30 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -59,10 +59,11 @@ export default defineComponent({
 </script>
 
 <style>
-body.body--dark {
-  background: #1d1d1d;
-}
 .q-tooltip {
   font-size: 11px;
 }
+:root {
+    --q-dark: #303133;
+    --q-dark-page: #303133;
+}
 </style>
diff --git a/src/components/CommandEditor.vue b/src/components/CommandEditor.vue
index c9bf332..fe19523 100644
--- a/src/components/CommandEditor.vue
+++ b/src/components/CommandEditor.vue
@@ -8,7 +8,7 @@
       class="absolute-left shadow-10"
       :style="{
         width: sideBarWidth + 'px',
-        background: $q.dark.isActive ? '#2d2d2d' : '#f2f2f2',
+        background: $q.dark.isActive ? 'var(--q-dark)' : '#f2f2f2',
         zIndex: 1,
         transition: '0.3s',
       }"