diff --git a/src/assets/base.css b/src/assets/base.css
index 71dc55a3cb5a72589496743a327c738ead3e1c83..8e5bf0f2831678755233e26f9cd61683f0536e6c 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -19,6 +19,8 @@
   --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
   --vt-c-text-dark-1: var(--vt-c-white);
   --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+
+  
 }
 
 /* semantic color variables for this project */
diff --git a/src/assets/main.css b/src/assets/main.css
index 49acca8632f6723a6eab398c18df0a54fb489984..7bbc7d6f91a09ba6a4eb8a07af4e41586aec3b57 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -5,6 +5,12 @@
   padding: 0;
 }
 
+html,
+body,
+#app {
+  height: 100%;
+}
+
 #app {
   margin: 0 auto;
 
@@ -38,7 +44,7 @@ input {
 }
 
 .border-top {
-  border-top: 1px solid #ccc;
+  border-top: 1px solid var(--color-border);
 }
 
 .content-lattice {
@@ -65,7 +71,7 @@ input {
   text-align: center;
   height: 1px;
   width: 100%;
-  background: #999;
+  background: var(--color-border);
   position: absolute;
   top: calc(50% - 1px);
   left: 0;
@@ -76,7 +82,7 @@ input {
   content: '';
   width: 1px;
   height: 100%;
-  background: #999;
+  background: var(--color-border);
   position: absolute;
   left: calc(50% - 1px);
   top: 0;
@@ -90,7 +96,7 @@ input {
   height: 90%;
   top: calc((20px - 20px * 0.9) * 0.5);
   left: calc((20px - 20px * 0.9) * 0.5);
-  border: 1px solid #999;
+  border: 1px solid var(--color-border);
 }
 
 /* 竖线隐藏 */
@@ -102,16 +108,17 @@ input {
 
 .isWhite::after {
   background-color: white;
+  border: 1px solid var(--color-border);
 }
 
 .isBlack::after {
   background-color: black;
-  border: 1px solid black;
+  border: 1px solid var(--color-border);
 }
 
 .isWin::after {
   background-color: red;
-  border: 1px solid red;
+  border: 1px solid var(--color-border);
 }
 
 .space-nowrap {