diff --git a/src/components/Mask.vue b/src/components/Mask.vue
index 1223f31..7e79409 100644
--- a/src/components/Mask.vue
+++ b/src/components/Mask.vue
@@ -83,12 +83,12 @@ function toStartServer() {
 
 <style scoped lang="scss">
 .mask {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: transparent;
   overflow: hidden;
   cursor: pointer;
 }
 .notice {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(0, 0, 0, 0.5);
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/src/components/keyboard/KeyBoard.vue b/src/components/keyboard/KeyBoard.vue
index 3647def..6ba8d0a 100644
--- a/src/components/keyboard/KeyBoard.vue
+++ b/src/components/keyboard/KeyBoard.vue
@@ -34,19 +34,41 @@ function keyupHandler(event: KeyboardEvent) {
   } else keyboardCodeList.value.push(event.code);
 }
 
+function mousedownHandler(event: MouseEvent) {
+  event.preventDefault();
+  const key = `M${event.button}`;
+  if (keyboardCodeList.value.length > 10) {
+    keyboardCodeList.value.shift();
+    keyboardCodeList.value.push(key);
+  } else keyboardCodeList.value.push(key);
+}
+
+function mouseupHandler(event: MouseEvent) {
+  event.preventDefault();
+  const key = `M${event.button}`;
+  if (keyboardCodeList.value.length > 10) {
+    keyboardCodeList.value.shift();
+    keyboardCodeList.value.push(key);
+  } else keyboardCodeList.value.push(key);
+}
+
 onActivated(() => {
   keyboardElement.value?.addEventListener("mousemove", mousemoveHandler);
+  keyboardElement.value?.addEventListener("mousedown", mousedownHandler);
+  keyboardElement.value?.addEventListener("mouseup", mouseupHandler);
   document.addEventListener("keyup", keyupHandler);
 });
 
 onBeforeRouteLeave(() => {
   keyboardElement.value?.removeEventListener("mousemove", mousemoveHandler);
+  keyboardElement.value?.removeEventListener("mousedown", mousedownHandler);
+  keyboardElement.value?.removeEventListener("mouseup", mouseupHandler);
   document.removeEventListener("keyup", keyupHandler);
 });
 </script>
 
 <template>
-  <div ref="keyboardElement" class="keyboard">
+  <div ref="keyboardElement" class="keyboard" @contextmenu.prevent>
     此处最好用其他颜色的蒙版，和右侧的按键列表区同色
     <div>{{ mouseX }}, {{ mouseY }}</div>
     <div v-for="code in keyboardCodeList">
@@ -57,7 +79,8 @@ onBeforeRouteLeave(() => {
 
 <style scoped>
 .keyboard {
-  background-color: rgba(255, 255, 255, 0.5);
+  color: var(--light-color);
+  background-color: rgba(0, 0, 0, 0.5);
   overflow: hidden;
 }
 </style>
diff --git a/src/styles.css b/src/styles.css
index 1c38148..2bce007 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,12 +1,12 @@
 :root {
-  --primary-color: #63E2B7;
-  --primary-hover-color: #7FE7C4;
-  --primary-pressed-color: #5ACEA7;
+  --primary-color: #63e2b7;
+  --primary-hover-color: #7fe7c4;
+  --primary-pressed-color: #5acea7;
+
   --bg-color: #101014;
-  --content-bg-color: #18181C;
-  --content-hl-color: #26262A;
-  
-  --light-color: rgba(255, 255, 255, 0.9);
+  --content-bg-color: #18181c;
+  --content-hl-color: #26262a;
+  --light-color: rgba(255, 255, 255, 0.82);
   --gray-color: #6b6e76;
   --red-color: #fc5185;
   --red-pressed-color: #f4336d;
@@ -24,4 +24,3 @@ div#app {
   height: 100%;
   box-sizing: border-box;
 }
-